Highlighting Roles and Ranks

If you want to highlight comments made by members of a specific Role or Rank in your community, it can be done using CSS.  In the following examples, we will show you how:

Modifying CSS for Roles

If you are not using Ranks, you will want to enable the “Roles Titles” plugin. This adds a role specific CSS class for you to target. In the following example, we can see, using Firebug (but use whatever dev tool you like), that a new class “Role_Administrator” is added for users of the administrator account.

The next step is to add a custom CSS rule to your “Edit CSS” tab in Customize Theme. So for example to change the background of comments we can add something like:

li.ItemComment.Role_Administrator {
background-color: #F5F8E8;
}

The result:

If you want to change colour of the discussions started by the Administrator role use:

.Item.ItemDiscussion.Role_Administrator {
background-color: #F5F8E8;
}


If you want all content (comments and discussions) of an admin to be highlighted use:

.Item.Role_Administrator {
background-color: #F5F8E8;
}

Finally, remember to change “Role_Administrator” in the above example to the appropriate role as needed. i.e Moderator is Role_Moderator. We have used the example of changing the background, but you can apply any CSS changes you want.

Modifying CSS for Ranks

Once you turn on Ranks, the CSS class to differentiate each rank is added automatically. As you can see the following example the Admin, is given a class called “Rank-Admin”.

Like before, if you want to modify the looks of posts by users of certain Ranks add a custom CSS rule to your “Edit CSS” tab in Customize Theme. For example, to change the background of comments we can add something like:

li.ItemComment.Rank-Admin {
background-color: #F5F8E8;
}

For both discussions and comments use:

.ItemDiscussion, li.ItemComment.Rank-Admin {
background-color: #F5F8E8;
}


Depending on the theme, the below might work as well:

Item.Rank-Admin {
background-color: #F5F8E8;
}

If you plan to add customization to other Ranks including custom Ranks, make sure you edit the specific Rank and give it an appropriate CSS class. In the following example, a new CSS class called “Rank-Newb” is added to a Rank called ‘Level 1’. This keeps the naming convention consistent and ensure no conflicts in the existing theme.

In the above examples we  showed you how to change the background of specific Roles and Ranks, but this is only the beginning. In this next section, we want to show you how you can have a bit more fun in the customization of Roles and Ranks.

Displaying Icons For Roles and Ranks

There are some other ways you can use CSS and images to differentiate Roles and Ranks. Here are some other examples to get your creative juices flowing.

If you wanted to add a “Staff” icon to a Staff Role, for example, you can do that with CSS. Using the “Role Titles” plugin, we get the “Role_Staff” CSS class. By using the following CSS:

.Item.Role_Staff .MItem.RoleTitle {
color: transparent;
background: no-repeat url(/pathtoimage/staff.jpg);
content: " " !important;
position: absolute;
width: 30px;
margin-left: 8px;
}

We can have an end result like this:

Depending on the theme you are using, you may have to modify the CSS to fit your needs.

For Ranks, it’s a bit different. If you decide to add an image icon to a specific Rank, no custom CSS changes are needed. To add an image icon in Ranks, the way to do this is to add some HTML in the “Label” form field when editing a specific Ranks’ detail. For example, our Rank Newb, example from before, you would add HTML to the label section.

The end result:

As you can see there is a chance to really get creative and give your community a very unique look and feel.

We hope you found the above tutorials, helpful. Check out our Theme Guide for some other helpful tips.

Please note about the sample code in the is post. They were done using the “Bootstrap theme”, but the concepts are the same. For best results, make sure to use a proper tools like Google Chrome Dev Tool or Firebug to identify classes to modify.