CSS class on generated div element for EPiServer blocks

Question

I have a ContentArea with a number of floating blocks. EPiServer automatically wraps each block in a div-element, which is necessary for the edit mode to function properly. So what is initially one div becomes three nested divs: content area, child element wrapper and the block view.

Is it possible to add CSS classes to the child element wrapper from the block view? So what is today:

div.ContentArea > div > div.my-class

becomes:

div.ContentArea > div.my-class

Answer 1

I ended up using a custom content area renderer:

public class CustomContentAreaRenderer : ContentAreaRenderer 
{
    protected override string GetContentAreaItemCssClass(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem)
    {
        var tag = GetContentAreaItemTemplateTag(htmlHelper, contentAreaItem);
        return string.Format("block {0} {1} {2}", GetTypeSpecificCssClasses(contentAreaItem, ContentRepository), "my own classes", tag);
    }
}

I apply the custom renderer to the container with this code:

container.For<ContentAreaRenderer>().Use<CustomContentAreaRenderer>();

Thank you for your help!

Answer 2

If you want to avoid the extra wrapping divs, take a look into this post

My guess is that this is what you should render:

@Html.PropertyFor(x => x.Teasers, 
new
    {
        ChildrenCustomTagName ="div", 
        ChildrenCssClass = "my-class"
    })

Don't render a wrapping div element in the partial view, only the "inner content" (since a wrapping div element will be rendered regardless for each item in the content area).

The wrapping element rendered when the content area is rendered cannot be excluded, as that would break the on-page editing features in EPiServer.

Hope this helps and is clear enough.

Answer 3

Here you can read all there is about exending contentarea, and also why they work like they do. http://blog.tech-fellow.net/2015/06/11/content-area-under-the-hood-part-3/

Answer 4

It's possible to completely remove the extra div's by overriding the default content area. I've written quite a detailed tutorial here EpiServer 7 : Extra divs in content area how to remove them ?

Going with this approach is quite extreme though. If you only have this issue in one or two places then I would recommend using something like this

@Html.PropertyFor(x => Model.MainContentArea, new 
{
    CustomTag = "ul",
    CssClass = "list",
    ChildrenCustomTagName = "li",
    ChildrenCssClass = "list_item",
    Tag = string.Empty
})

You can read more about how these properties work here : How To Render EpiServer Blocks In Your Views Using PropertyFor