Diseño a perfiles dependiendo del grupo

Flerex

Con este código podrás añadir CSS único para los perfiles de los usuarios de cierto grupo, con el objetivo de obtener una mayor personalización. Personalizaciones antes complicadas, como el hacer que los perfiles de miembros de «Gryffindor» tengan un color rojo, son ahora sencillas con tan solo instalar este código.

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.

Requisitos

  • Soltura con el PA de Foroactivo.
  • Un foro phpBB3 de Foroactivo.
  • Tener instalado previamente el código Lista de Grupos.

Instalación

Añade desde la «Gestión de JavaScript» el siguiente código, activándolo en todas las páginas:

!function() {
	const getClassFromUsername = username => {
		const prefix = 'userprofile-';
		if(!username) return prefix + 'nogroup';

		return prefix + `group- ${ FLX.forumGroups.getByColor(username.getAttribute('style').substr(-7)).code || 'unknown' }`
	};

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

}();

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.

Clases posibles

  • body#phpbb.userprofile-group-{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-group-"]:El usuario del grupo pertenece a un grupo cualquiera del foro identificado por el código.
  • body#phpbb.userprofile-group-unknown: Usuarios con color, pero cuyo grupo no está definido en el código «Lista de Grupos». No deberías ver esto nunca.

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.