Cambiar el diseño del foro dependiendo del foro/categoría

El otro día estabamos hablando en el Chat de Rol sobre las características de phpBB y no se tardó en mencionar la posibilidad de cambiar el diseño dependiendo del foro en el que el usuario se encuentre. Aunque yo sea partidario de que se utilize phpBB, un usuario del FDF pidió soporte para hacer esto en Foroactivo y me pareció interesante hacerle el código. Como tampoco me parece bien dejar el código tan solo en el FDF lo publico por aquí.

Características

El código tiene un funcionamiento similar a aquel que hice hace unas semanas para cambiar el diseño del foro dependiendo del grupo. Es decir, crea una clase única en el elemento «body» dependiendo del foro en el que te encuentres. Además, también expandí la funcionalidad del código un poco. A continuación explico de forma detallada sus características:

1. Crea una clase única del foro en el que te encuentres y la aplica a la etiqueta body.
2. Además, también genera clases para todos los foros y categorías padre de dicho foro.
3. Si te encuentras en un tema, la misma lógica anterior se aplica: tienes disponible clases del foro en el que te encuentres y sus foros/categorías antepasados.

Instalación

El código es muy simple de instalar (no lo traigo en formato plugin porque no tiene necesidad de configuración y es un código muy simple). Crea un JS y actívalo en los subforos y los temas (si no lo activas en los temas la característica número 3 no funcionará). A continuación coloca este código:

$(function() {
    var urlToClass = function(str) {
        var res = /([fc])\d+/.exec(str);
        return `${res[1] == 'f' ? 'forum' : 'category'}-${res[0].substr(1)}`;
    };

    $('.path.nomargin, .pathname-box').first().find('a').filter(function(i) {
        return i != 0;
    }).each(function() {
        $('body').addClass(urlToClass($(this).attr('href')));
    });
});

Explicación detallada

Imagínate la siguiente situación: Tu foro se llama «El Mundo», un foro en el que personas de todo el mundo pueden hablar de temas relacionados con los países del mundo. Dentro de dicho foro, tu te encuentras ahora mismo en el foro «Inglaterra», que se corresponde a la siguiente situación jerárquica:

El Mundo → Europa → Reino Unido → Inglaterra

Correspondiendo dicha situación jerárquica a lo siguiente:

Nombre del foro (El Mundo) → Una categoría (Europa) → Un foro de la anterior categoría (Reino Unido) → Un subforo del anterior foro (Inglaterra)

La etiqueta «body» recibirá una clase única para cada foro o categoría padre de «Inglaterra» y para «Inglaterra» también. Nota: Para este ejemplo daría igual que tu situación actual fuese cualquier tema dentro del foro «Inglaterra», todo lo dicho anteriormente se seguiría aplicando.

¿Cómo sé qué clase se generaría para cada foro/categoría?

Es muy sencillo. Siguiendo el anterior ejemplo, si la ruta de la categoría es:

/c23-europa

Entonces la clase para dicha categoría sería body.category-23. Si por ejemplo tenemos el foro «Inglaterra» y su ruta es:

/f6-inglaterra

Entonces la clase para el anterior foro sería body.forum-6.

Modo de uso

Para utilizar las clases es muy sencillo. Imagínate que en el anterior ejemplo quieres hacer que el fondo de la página para los foros y temas dentro de la categoría «Europa» tenga un color azul. Tan solo tendrías que hacer lo siguiente:

body.category-23 {
	background-color: blue;
}

Si, de igual forma quieres que las listas de temas tengan un borde azul tan solo tendrías que hacer esto:

body.category-23 .forumbg {
	border: 1px solid blue;
}

Es muy simple de entender siempre que sepas CSS y HTML básico.

Para acabar…

Si tienes cualquier tipo de duda no dudes en abrirme un chat por Tumblr. Por cierto, es para phpBB3.

---

Importante: Aunque este código sigue generando clases para los foros y categorías padres de un tema en ese mismo tema, no se genera una clase única para el tema.