WoltLab Suite uses the famous Font Awesome icon library to display icons throughout the suite. In this article we show you how to take advantage of Font Awesome and how to display an icon in front of the user rank to customise your community ranks.
User ranks can have different uses, for example, setting levels within the community depending on the user's activity. This way you could display different levels or ranks depending on the number of posts the user has made. Another possible function could be to differentiate your forum team members from the rest of the users by using a custom rank and a unique icon.
This effect is possible thanks to the ‘User Ranks’ feature included in WoltLab Suite and the possibility to set a custom CSS class for your new rank. We'll tell you step by step how to do it, but first we have to thank Aze, who shared the code needed for this trick with the WoltLab community.
Create a user rank
The first thing we must do is create a user rank to which we will apply this effect. To create a new user rank you must go to your Administration Panel and follow the path 'Users → User ranks → Add user rank'. Enter a title for the range and set the group of users that will be able to use it. For example, if you want to create a rank for team members, you must first create a user group called ‘Forum Team’, to which the users who will display this rank must belong.
In the option 'PHP class name' we will go to the last option and create a new class, in this example we will call it 'TeamBadge'. Before saving remember to assign the correct user group for the user rank.
Enter the CSS code
As I explained before, this trick is possible thanks to the possibility of using custom CSS code, which allows you to add a free icon from the Font Awesome library in front of the name of the range. If you look at the code shared in this article, you'll see that it's split into two parts. While @Aze shared the code in one block, we decided to split it into two parts so that we can adjust both the colour and the icon.
In the first block we adjust the colour. The 'background-colour' option adjusts the colour of the range label. The ‘colour’ option is used to change the colour of the font. The codes can be entered in hexadecimal or RGB code. Here is a website where you can get the colour codes.
In the second block we set the icon. In the line ‘content’ we indicate the icon we want to display, in this case the icon 'rocket'. All Font Awesome icons have a code, which you can find when you open an icon in the top right corner. Remember that in this case you can only use the free icons, as WoltLab Suite does not load premium or paid icons.
/*MOSTRAR ICONO DELANTE DEL RANGO
Gracias a @Aze*/
.userTitleBadge.TeamBadge {
background-color: #a41e2e;
color: #fff;
}
.userTitleBadge.TeamBadge:before {
content: "\f135";
font-family: "Font Awesome 6 Free";
font-weight: 600;
font-size: 12px;
padding-right: 5px;
}
Display More
Set a custom user title
By default, the user rank will appear with the title you created it with, however, you can give a twist to this trick. Let's imagine that in our team we have different roles such as Administrators and Moderators. By setting a custom user title to a user through the admin panel, this user will show the rank icon next to their new title.
Ejemplo de rango personalizado por defecto y con título de usuario personalizado.
As you can see, this way your community team can display a rank with a custom colour and icon, and you can also differentiate the different roles within the team, making it easier for your forum members to know who they are interacting with.
In WoltLab Community | Add rank icon with CSS (in English)
Comments