How to add a class to a `li` in an Orchard Content List?

Question

I am using Orchard 1.8, have created a new theme, and am trying to implement the Blog Post List as a Bootstrap List Group. Here is the markup that the Bootstrap List Group requires. We need to add a class to both the ul and to each li.

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

I am stuck on step three of my implementation.

Add Bootstrap to the Layout. Done.
Add a list-group class to the ul of the Parts_Blogs_BlogPost_List shape. Done.
Add a list-group-item class to each li. Not Done.

How do I add a list-group-item class to each li?

Add Bootstrap to the Layout. Done.

Add Bootstrap in Layout

Add a list-group class to the ul of the Parts_Blogs_BlogPost_List shape. Done.

Add a <code>list-group</code> class to the <code>ul</code> of the BlogPostList shape

When doing my implementation, I used Shape Tracing to determine that I needed to modify the Parts_Blogs_BlogPost_List shape and its Parts.Blogs.BlogPost.List.cshtml template to add the list-group class to the ul element. How, though, do we add a list-group-item to each li element?

Shaun Luttin Shaun Luttin · Accepted Answer · 2014-04-28T00:43:10

In the Parts.Blogs.BlogPost.List.cshtml template, add the following line of code:

Model.ContentItems.ItemClasses.Add("list-group-item");

Your finished Bootstrap List Group template will look like this:

@{
    IEnumerable<object> blogPosts = Model.ContentItems;
    Model.ContentItems.Classes.Add("content-items");
    Model.ContentItems.Classes.Add("blog-posts");
    Model.ContentItems.Classes.Add("list-group");
    Model.ContentItems.ItemClasses.Add("list-group-item");
}

@Display(Model.ContentItems)

@if (blogPosts == null || blogPosts.Count() < 1) {
    <p>@T("There are no posts for this blog.")</p>
}

You can research this yourself via Shape Tracing > Model:

enter image description here

How to add a class to a `li` in an Orchard Content List?

1 Answers