Diseño del foro para cada grupo

Con este código aprenderás a hacer que el diseño de tu foro cambie por completo dependiendo del grupo en el que esté tu usuario. Básicamente podrás hacer cosas como desde mostrar partes del foro solo a ciertos grupos, como hacer que tu foro de Harry Potter se vea rojo para los Gryfffindor, azul para los Ravenclaw, etc.

Requisitos

• Manejo con soltura del PA de Foroactivo
• Tener instalado previamente el código Lista de Grupos
  

Instalación

Para instalar el código debes seguir los siguientes pasos.

Módulo «Conectarse»

Activa los módulos (widgets) y pon en cualquier sitio el módulo «Conectarse».

En caso de que queráis ocultar los módulos porque no los queréis:

/* Si lo pusiste a la izquierda */
#left {
    display: none;
}

/* Si lo pusiste a la derecha */
#right {
    display: none;
}

Por otro lado, si lo que queríais es que no se viese en exclusiva el módulo de conexión, podéis hacer lo siguiente:

1. Váis al template Portal → mod_login
   
2. En la primera línea debería aparecer lo siguiente:

<div class="module">

3. Lo cambiáis por:

<div class="module" style="display:none">

Modificar una plantilla

Ve a la plantilla Portal → mod_login y busca:

<!-- BEGIN switch_profile -->
<div class="h3">{USERNAME}</div><br>

Sustituimos por:

<!-- BEGIN switch_profile -->
<div class="h3"><span id="usergroup-user">{USERNAME}</span></div><br />

Colocar el JavaScript

Colocar el siguiente JS en el PA, para todas las páginas.

!function() {

	function setBodyClassByUser($body, usr) {
		const colorel = $('[style]', usr);

		if (!colorel.length) {
			$body.addClass('usergroup-nogroup');
			return;
		}

		const groupcolor = colorel.attr('style'),
		color = groupcolor.substr(groupcolor.lastIndexOf('#'));
		$body.addClass(`usergroup-${ FLX.forumGroups.getByColor(color).code || 'unknown' }`);
	}

	$(function() {
		const $body = $('body');

		if (_userdata['user_id'] == -1) {
			$body.addClass('usergroup-guest');
			return;
		}

		const usr = $('#usergroup-user');

		if (usr.length) {
			setBodyClassByUser($body, usr);
			return;
		}

		$.get('/faq', function(data) {
			setBodyClassByUser($body, $(data).find('#flerex-user'));
		});

	});
}();

Uso

La forma en la que funciona el código es muy simple: básicamente añade una clase especial a body dependiendo de en qué grupo estés. Gracias a esto puedes aplicar un código CSS a un grupo en específico añadiendo antes del selector de dicho código el body con la clase especial.

Por ejemplo, si tenemos la clase .forabg y queremos que para los usuarios del grupo “Gryffindor” tenga un borde rojo, tendríamos que hacer, simplemente:

body.usergroup-gryffindor .forabg {
    border: 10px solid red;
}

Selectores disponibles

Las clases que añade este código al body de tu foro son las siguientes.

• body.usergroup-guest: Usuario invitado (aquellos que no se han conectado).
• body.usegroup-nogroup: Usuarios sin color, conectados.
• body.usegroup-{codigo-grupo}: Sustituyendo las llaves (incluídas) por el código del grupo puesto en el JS del código «Lista de Grupos» que está como requisito para la instalación de este código.
• body.usegroup-unknown: Usuarios con color, pero cuyo grupo no está definido en el código «Lista de Grupos». No deberías ver esto nunca.