Surrounding EpiServer lines with a div in content area
Some days ago I had a discussion with our frontenders regarding the rows in ContentArea. They liked to have a div surrounding each line of the items so they can make the styles in a correct way. In this small post I will describe what have I done:
I will use Alloy Demo site to describe the issue and my solution
The problem:
In a ContentArea, if you add some items it will be a big div with multiple lines inside.
As you can see in the picture item 1 is taking a line, 2 and 3 are in the second line and 4,5,6 are in the third line. And size of each block depends on their display options.
The request
Surrounding each line with a div with CssClass="row" and removing the one for content area.
The solution
Removing the css class from the ContentArea is too easy since it has been added to html.Propertyfor in the index page:
However to remove add the container around each row, you need to override ContentAreaRenderer. In alloy demo website, it has already been overridden to add suitable classes based on the tags and it is called AlloyContentAreaRenderer. Just override RenderContentAreaItems method and add this code. Then you are good to go :)
protected override void RenderContentAreaItems(HtmlHelper htmlHelper, IEnumerable contentAreaItems)
{
float totalSize = 0;
if (contentAreaItems.Any())
htmlHelper.ViewContext.Writer.Write(@"
");
foreach (ContentAreaItem contentAreaItem in contentAreaItems)
{
var tag = this.GetContentAreaItemTemplateTag(htmlHelper, contentAreaItem);
totalSize += GetSize(tag);
if (totalSize>1)
{
htmlHelper.ViewContext.Writer.Write(@"
");
totalSize = GetSize(tag);
}
this.RenderContentAreaItem(htmlHelper, contentAreaItem,
this.GetContentAreaItemTemplateTag(htmlHelper, contentAreaItem),
this.GetContentAreaItemHtmlTag(htmlHelper, contentAreaItem),
this.GetContentAreaItemCssClass(htmlHelper, contentAreaItem));
}
if (contentAreaItems.Any())
htmlHelper.ViewContext.Writer.Write(@"
");
}
float GetSize(string tagName)
{
if (string.IsNullOrEmpty(tagName))
{
return 1f;
}
switch (tagName.ToLower())
{
case "span12":
return 1f;
case "span8":
return 0.666666f;
case "span6":
return 0.5f;
case "span4":
return 0.333333f;
default:
return 1f;
}
}
The result
