[Product Post] Theme Tip: Customize Discussion Appearance

Posted by Adrian Speyer on Dec 5, 2014 2:46:16 PM
Find me on:

3 minute read

3-types of vanilla discussions

As noted in the above graphic, there are some different types of discussions you will encounter in Vanilla Forums:

  • New: These are discussions you have seen, but new comments have been added since you last looked. By default, it will also have a little yellow indicator with a count of how many comments were added.
  • Brand New: These are discussions which you have not read.
  • None New: You have read these discussions, and no one has commented on them since your last visit.
  • None New & Participated: Not in the image above, these are message you have commented on in the past, but has no new responses since your last visit.

Each of these types can be modified with CSS:

CSS for New Discussions

This is the CSS for a discussion you have participated in, but now has new content. The following CSS will change the background of the item:


.Participated.Unread.ItemDiscussion {
background-color: #000 !important;

You could modify in the following way just to change the title color:

.Participated.Unread.ItemDiscussion a.Title {
color: #000000 ! important;

.HasNew, is the class for the NEW icon that denotes this is new content since last you came. You can change it from yellow to another color using something like the following:


.HasNew.NewCommentCount {
background-color: #ff0000;

CSS for Brand New Discussions

When the Discussion is brand new, and you have not read it, you can can use the following CSS:


background-color: #FFF000 !important;

CSS for Read Discussions

If a discussion has been read and there are no new comments, you might want make it a little less colorful. You can use the following CSS:


.Read.ItemDiscussion {
background-color: #D3D3D3 !important;

CSS for Read & Participated Discussions

If you want discussions that members participated in, but don't have new comments, you can use the following CSS:


.Participated.Read.ItemDiscussion {
background-color: #D4D4D9 !important;

CSS for Forums using Ranks:

The above rules apply to all members of you community, regardless of their rank. If you are using the Ranks plugin, you can also add rank class to the end of the CSS class. For example, Administrators have a class added of Rank-Admin, and the CSS could be modified in the following way to denote a new discussion from an Admin:


.New.ItemDiscussion.Rank-Admin {
background-color: #FF1212 !important;

Please note: All users will see these changes, as the CSS applies to the author of the Discussion, not the Rank of the user viewing the content.

Final thoughts

The examples were done on the Bootstrap theme, but the classes should be similar in your own theme. Just make the changes in the Customize Theme CSS tab in your Dashboard. Also while we only showed changing background colors, you can get really creative with how discussions appear once you know the CSS classes. For example, you could add a background image to only new discussions. Have some fun, add some personality to your community.

We hope this post has given you some ideas to modify your theme and make it something unique. Check under the product category for more product tips.

Topics: Product, News

Related posts

Subscribe to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.

Search this blog

Recent Posts

community playbook

Have an Article for Vanilla's Blog?

Send us an email to pr@vanillaforums.com with your topic idea and we'll circle back with our publishing guidelines.

Customer Experience Update