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:

.Item.New.ItemDiscussion{
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.