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;
}
Nota
Si no quieres los módulos visibles, utiliza uno de los dos códigos CSS anteriores para ocultarlos. No hagas, por ejemplo, otras alternativas como poner ancho cero a los módulos desde el PA, puesto que no funcionará.

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">
  1. 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.