Diseño a mensajes dependiendo del grupo del autor

Con este código podrás darle diseño a los mensajes de tu foro dependiendo del grupo de quién los haya publicado. Gracias a esto podrás hacer modificaciones como poner en azul los mensajes de los miembros de la casa «Ravenclaw», etc.

Además, este código también identifica los mensajes de los invitados o de los usuarios sin color, por lo que las posibilidades son aún mayores.

El funcionamiento es el siguiente: se crea una clase que identifica a los grupos y se añade a div.post 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

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

!function() {
	const getClassFromUsername = username => {
		const prefix = 'usergroup-',
		color = username.querySelector('span');

		if(username.childElementCount == 0)
			return prefix + 'guest';
		else if(color)
			return prefix + `group- ${ FLX.forumGroups.getByColor(color.getAttribute('style').substr(-7)).code || 'unknown' }`;
		else
			return  prefix + 'nogroup';
	};

	document.addEventListener('DOMContentLoaded', function() {
		Array.from(document.querySelectorAll('div.post')).forEach(post => {
			const username = post.querySelector('.postprofile dt strong[style^="font-size"]');
			if (!username) return;

			post.classList.add(getClassFromUsername(username));
		});
	});
}();

Consideraciones

• Este código no añade clases estáticas en el tiempo. Es decir, si en un futuro un usuario cambia de grupo, pierde su grupo o se elimina (se convierte en invitado), la clase de sus mensajes cambiará con ellos.
  

Clases posibles

• div.post.usergroup-group-{identificador_del_grupo}: Clase creada para los mensajes escritos por un usuario que esté en uno de los grupos del foro (dependiendo de la terminación del selector será un grupo o otro).
• div.post.usergroup-nogroup: El autor del mensaje no pertenece a ningún grupo
• div.post[class*="usergroup-group-"]:El autor del mensaje pertenece a un grupo cualquiera del foro identificado por el código.
• div.post.usergroup-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).
• div.post.usergroup-guest: El autor es un invitado.