Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

apply class to each block in contentarea

Vote:
 

I want to apply a specific style to all the blocks within the contentarea.

Model.cs:
public virtual ContentArea contentArea { get; set; }

Block.cs:
public virtual string Heading { get; set; }
public virtual XhtmlString Description { get; set; }

In the view, I am rendering as


@Html.PropertyFor(x => x.CurrentPage.contentArea)

In the above case, class is applied to the contentArea, but I want to apply the class to each block not to contentArea. I tried as below, but nothing is rendered in the contentarea.

@if(Model.CurrentPage.SelfServiceContentArea.Items.Any())
{
foreach(var item in Model.CurrentPage.SelfServiceContentArea.Items)
{


@item

}
}

#149744
Jun 06, 2016 15:43
Vote:
 

If the css class is static and not changed per block you can use 

ChildrenCssClass parameter in propertyfor method. Example if you have content area property called Teasers and want to change both wrapping tag for each block and css class on each block

@Html.PropertyFor(x => x.Teasers, 
    new
        {
            ChildrenCustomTagName ="span", 
            ChildrenCssClass = "block"
        })

Read more on options for rendering content areas here:

http://joelabrahamsson.com/episerver-7-and-mvc-custom-tags-and-css-classes-when-rendering-properties/

If you need block specific css class, it's easiest to put it in the partial view for the block instead. It's also possible to override the default content area renderer if you feel really trigger happy but I would stay away from that since it makes maintaining the solution more difficult.

#149745
Edited, Jun 06, 2016 16:04
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.