Diseño independiente en los perfiles dependiendo del grupo

Flerex

Hoy os traigo un nuevo código de una idea sugerida por @dreamsofkitha. Este código permite darle un diseño a los perfiles de los usuarios dependiendo del grupo de dicho usuario. Nótese que estamos hablando de los perfiles y no de los miniperfiles.

El funcionamiento es el siguiente: se crea una clase que identifica a los grupos y se añade a body#phpbb para poder hacer cualquier tipo de modificación.

Instalación

La instalación es realmente simple. Tan solo hay que añadir desde la «Gestión de JavaScript» el siguiente código, activándolo en todas las páginas:

/* 
* A la izquierda, el nombre de la clase del grupo al que
*   corresponde el color (tal y como lo tengas en el PA)
*   de la derecha 
*/
const groups_id = [
    ['mod', '#5AB07C'],
    ['admin', '#3262BA'],
],

getClassFromUsername = username => {
    let output = 'userprofile-';

    if(username) {
        const group = groups_id.find(elm => elm[1] == username.getAttribute('style').substr(-7));
        output += group ? 'profile-' + group[0] : 'unknown';
    } else
        output += 'nogroup';

    return output;

};

/\/u\d+/.test(location.pathname)
&& document.addEventListener('DOMContentLoaded', function() {
    const username = document.querySelector('h1.page-title').firstElementChild;
    document.body.classList.add(getClassFromUsername(username));
});

De todo ese código solo hay que editar la constante groups_id, que se encuentra entre las primeras lineas, la cual permite identificar los grupos.

Se deberá añadir una linea nueva por cada grupo de tu foro, poniendo a la derecha el color de dicho grupo exactamente igual como aparece en el PA y a la izquierda un identificador del grupo que utilizará el código a la hora de crear las clases.

Consideraciones

  • Detecta si un usuario no tiene grupo
  • Funciona tanto con los perfiles simples como los avanzados
  • Este código no añade clases estáticas en el tiempo. Es decir, si en un futuro un usuario cambia o pierde su grupo la clase de aplicada a body#phpbb cambiará con él.
  • Solo funciona en phpBB3 de Foroactivo.

Clases posibles

  • body#phpbb.userprofile-profile-{identificador_del_grupo}: Clase creada para los perfiles de un usuario que esté en uno de los grupos del foro (dependiendo de la terminación del selector será un grupo o otro).
  • body#phpbb.userprofile-nogroup: El usuario del perfil no pertenece a ningún grupo
  • body#phpbb[class*="userprofile-profile-"]:El usuario del grupo pertenece a un grupo cualquiera del foro identificado por el código.
  • body#phpbb.userprofile-unknown: El usuario está en un grupo pero no ha sido identificado por el código (seguramente porque en la constante del código groups_id no hayas incluido el grupo o su color no corresponde).

por Flerex

Estudiante de Ingienería del Software con experiencia en el desarrollo web y la plataforma Foroactivo desde hace más de 8 años. Me encanta todo lo relacionado con el diseño de UI/UX.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *