<img height="1" width="1" style="display:none" src="https://q.quora.com/_/ad/10b616b60fad4a51aa023ade12476783/pixel?tag=ViewContent&amp;noscript=1">

[Product] How to Differentiate Members Using Roles and Ranks

Posted by Adrian Speyer on Jul 16, 2014 9:48:31 AM
Find me on:

4 minute read

ranks and roles members

Within a Vanilla Forum powered community, there are a two ways to differentiate members: Roles and Ranks.

Roles

Roles_Permissions

Roles are typically used to group people based on their permissions and the role they play in the community. Common Roles include: members, moderators, staff members and administrators. You can create different Roles to fit your needs and modify the permissions given to each Role.

Ranks

ranks

Another way to differentiate users is with Ranks. Ranks are usually used to denote seniority or status to the rest of the community. Rank levels can be assigned or can be earned by acquiring reputation points.

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.

role_titles

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:

css_comment_vanilla

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".

role_ranks

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.

Edit_Rank

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:

images_role

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.

edit_ranks_image

The end result:

ranks_images-2

 

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. 

Topics: Product

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.