When you upgrade CM1 to version 5.3 you may notice that you have some additional options available to you in the Blog List widget output.

Styling Your Blog List with New Category Classes

Wed Apr 6, 2016

When you upgrade CM1 to version 5.3 you may notice that you have some additional options available to you in the Blog List widget output.

If you check out our own blog page here you will see that we have some icons before each blog post that is listed. (screenshot below)

Percussion Blog List with Icons

The main enhancement to the blog list is that we added a class for the category that is associated with each blog post to it's <li> tag. See screenshot below as an example.

Percussion Blog List Code

What this allows us to do is either change the coloring, fonts, padding, etc. for different categories of a blog post, or, what we did on our blog is used the classes to apply a different FontAwesome icon to each.

To do this on our blog, all I did was add the following CSS to be applied to all of the list-items in the blog list for matching formatting:

ol.perc-blog-list>li:before {
float: left; /* set the orange icon boxes to be floated to the left of each post */
display: block; /* allows the icons to be floated left */
background: #ee5336; /* sets the color of the boxes to be orange */
color: #FFF; /* sets the color of the icons to be white */
padding: 21px 23px; /* sets the padding around the white icon */
font-size: 30px; /* sets the font-size of the white icon */
text-align: center; /* aligns the white icon in the center of the orange box */
margin-right: 15px; /* adds a margin to the right of each orange box */
margin-bottom: 20px; /* adds a margin to the bottom of each orange box */
font-family: fontawesome; /* calls fontawesome font icons */
}

By using the 'before' pseudo class, we are able to put anything before each blog post in the list!

So now, I added the following CSS to choose a specific FontAwesome icon to be used for the different types of categories found in the blog list.

ol.perc-blog-list .perc-bloglist-category-designcss:before {
content: "\f1fc";
}

Other things you could do now that we have added categories in as classes may include:

  • adding icons before different types of blog posts (like above)
  • using a plugin like MixItUp or Isotope which rely on classes to do the filtering
  • changing the overall CSS for each of the posts in the list
Casey Aiello
Casey Aiello
Professional Services Manager | Web Consultant/Designer | Percussion Software

Along with being a Consultant, Casey is also the Professional Services Team Lead at Percussion and our in-house designer. She has a strong background in responsive web design and development. Casey knew that she wanted to work in the tech field ever since she was in elementary school. That strong passion led her to be a volunteer and strong advocate of various organizations that work to get more young women involved and excited about science and technology careers. In her free time, Casey enjoys spending time relaxing with family and friends.