WoltLab Suite utiliza la famosa biblioteca de iconos Font Awesome para mostrar iconos en todo el conjunto de aplicaciones. En este artículo te enseño cómo sacarle partido a Font Awesome y cómo mostrar un icono delante del rango de usuario para personalizar los rangos de tu comunidad.
Los rangos de usuario pueden tener diferentes usos, por ejemplo, establecer niveles dentro de la comunidad dependiendo de la actividad del usuario. De esta manera podrías mostrar diferentes niveles o rangos según el número de mensajes que ha escrito el usuario. Otro posible función puede ser la diferenciar a los miembros del equipo de tu foro del resto de los usuarios utilizando un rango personalizado y un icono único.
Este efecto es posible gracias a la función de «Rangos de usuario» que incluye WoltLab Suite y a la posibilidad de establecer una clase CSS personalizada para tu nuevo rango. Te cuento paso a paso cómo hacerlo, pero primero debemos dar las gracias a Aze, que es quien compartió el código necesario para este truco con la comunidad de WoltLab.
Crea un rango de usuario
Lo primero que debemos hacer es crear un rango de usuario al que aplicaremos este efecto. Para crear un nuevo rango de usuario debes ir a tu Panel de Administración y seguir la ruta «Usuarios → Rangos de usuarios → Añadir rango de usuarios». Introduce un título para el rango y establece el grupo de usuarios que podrá utilizarlo. Por ejemplo, si queremos crear un rango para los miembros del equipo, antes deberás haber creado un grupo de usuarios llamado Equipo del Foro, al que deberán pertenecer los usuarios que mostrarán este rango.
En la opción Nombre de clase PHP iremos a la ultima opción y crearemos una clase nueva, en este ejemplo la llamaremos TeamBadge. Antes de guardar acuerdate de asignar el grupo de usuarios correcto para el rango de usuario.
Introduce el código CSS
Como te explicaba antes, este truco es posible gracias a la posibilidad de usar código CSS personalizado, lo cual permite añadir un icono gratuito de la biblioteca Font Awesome delante del nombre del rango. Si te fijas en el código que compartimos en este artículo, verás que está dividido en dos partes. Si bien @Aze compartió el código en un sólo bloque, hemos decidido separarlo en dos partes para poder ajustar tanto el color como el icono.
En el primer bloque ajustamos el color. La opción background-color ajusta el color de la etiqueta del rango. La opción color, por su parte, sirve para cambiar el color de la letra. Los códigos puedes introducirlos en código hexadecimal o RGB. Aquí te compartimos una web donde podrás conseguir los códigos de los colores.
En el segundo bloque ajustamos el icono. En la línea content indicamos el icono que queremos mostrar, en este caso el icono «\f135» o «rocket» (cohete en inglés). Todos los iconos de Font Awesome tienen un código, el cual podrás encontrar al abrir un icono en la esquina superior derecha. Recuerda que en este caso sólo puedes usar los iconos gratuitos, pues WoltLab Suite no carga los iconos premium o de pago.
/*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;
}Establece un título de usuario personalizado
Por defecto, el rango de usuario aparecerá con el título que hayas puesto al crearlo, sin embargo, puedes darle una vuelta de tuerca a este truco. Vamos a imaginar que en nuestro equipo tenemos diferentes roles como pueden ser Administradores y Moderadores. Estableciendo un título de usuario personalizado a un usuario a través del panel de administración, este usuario mostrará el icono del rango junto a su nuevo título.
Como ves, de esta manera el equipo de tu comunidad puede mostrar un rango con un color e icono personalizado y, además, se pueden diferenciar los diferentes roles dentro del equipo, facilitando así que los miembros de tu foro sepan con quien están interaccionando.
En WoltLab Community | Agregar icono de rango con CSS (en inglés)
