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.

Continuar leyendo “Cambiar el diseño del foro dependiendo del foro/categoría”

Personalización de Perfiles: En pestañas y campos con clases independientes

El primer plugin que os traigo es un dos en uno. El siguiente plugin permitirá poner en tu foro:

  • Perfiles en pestañas. Podrás elegir cuántas perstañas tendrá cada perfil, qué cosa se ve en cada una de ellas y en qué orden y cuál (o cuáles) son las que se verán por defecto.
  • Campos de perfil con clases independientes. Podrás personalizar cada campo del perfil con CSS, puesto que cada uno tendrá su clase independiente. También divide cada campo en dos elementos, el título y el contenido, para una mayor personalización. Además, incluyo la posibilidad de quitar los dos puntos después de cada título.

De momento este plugin solo puede hacer esas dos cosas. Al estar hospedado en un servidor, podré añadir nuevas características en un futuro sin que tengáis que hacer nada más que activar qué nuevas características queréis para vuestro foro.

Aunque pueda parecer que instalar este plugin es muy complicado puesto que esta entrada es bastante larga, no os echéis atrás. Simplemente me he tomado la molestia de explicar hasta el más mínimo detalle para que nadie se pierda, pero tanto texto tan solo explica unos pasos que se hacen en menos de cinco minutos.

Quiero aclarar que esas dos características disponibles en el plugin no se activan al mismo tiempo. Podréis elegir cuál de las dos (o las dos) queréis aplicar en vuestro foro. El plugin está pensado pensando en la eficiencia, por lo que si una de las características no la queréis activar, no supondrá que el código se tenga que ejecutar en vuestro foro.

Instalación

Vete a la plantilla overall_header y busca:

<script src="{JQUERY_PATH}" type="text/javascript"></script>

Añade después:

<script src="https://gitcdn.xyz/repo/Flerex/cdn/master/fm/custom-profile.js" type="text/javascript"></script>

¡Ya está! El plugin está instalado.

Modificaciones

El plugin depende de mi propuesta de estructura estándar de los perfiles para poder funcionar, así que si no la tienes en tu foro, ¿a qué esperas? Lleva un minuto colocarla y te hará la vida más fácil.


Lo siguiente solo se debería instalar si tienes la intención de activar la parte del plugin «perfiles en pestañas». Vete a tu CSS y añade lo siguiente:

/**
*
* PERFILES EN PESTAÑAS
* Este código oculta todas las pestañas que no sean las activas
*
*/
.postprofile-tab-content {
   display: none;
}

.postprofile-tab-content.active {
   display: block;
}

Activación

Una vez que ya hemos instalado el plugin solo tenemos que decirle que se active. Esta es la parte que normalmente os liaría pero ya “no more”.

Añade el siguiente JS y muéstralo solo en los temas (para decirle al plugin que se active solo en los temas, que es donde están los perfiles):

$(function() {
	$('.postprofile').customProfile({
		// Aquí la configuración del plugin
	});
});

La traducción del código anterior sería más o menos lo siguiente:

Activa para los perfiles, que en mi foro se llaman “.postprofile” (por defecto en FA y en la modificación que os he dado arriba) el plugin “customProfile”, que tiene las siguientes configuración.

Si os fijáis, he dejado un comentario que dice “Aquí la configuración del plugin”. En esta parte es donde le diréis al plugin qué queréis que haga.

Campos con clases independientes

Empecemos por la parte de los campos del perfil con clases independientes. Si queréis activar esta parte tan solo tenéis que añadir a la configuración la siguiente línea:

uniqueFieldClass: true,

¿Activar las clases únicas en los campos del perfil? Sí.

Simple, ¿qué? En caso de que queráis quitar los dos puntos (es necesario tener la anterior opción activada) solo tenéis que añadir esta otra configuración:

withColon: false,

¿Los campos tienen dos puntos? No.

Perfiles en pestañas

Esta es la parte más compleja. No porque sea difícil, que no lo es, si no porque es la configuración más larga. Para activar esta parte del plugin voy a explicarme mejor con un ejemplo:

tabStructure:  [

    {
        label: 'Información',
        default: true,
        content: [
            '.postprofile-avatar',
            '.postprofile-username',
            '.postprofile-rank',
        ]
    },

    {
        label: 'Campos',
        content: [
            '.postprofile-fields',
            '.postprofile-rpg',
            '.postprofile-contact',
        ]
    }

],

La anterior configuración es la configuración para lo que yo considero una estructura «estándar» de las pestañas en los foros. Es lo que más suelo ver y básicamente tiene las siguientes características:

  • Dos pestañas.
  • Una pestaña «Información» que contiene el avatar, el rango y el nombre
  • Una pestaña «Campos» que contiene los perfiles, los botones de contacto y la hoja de personaje en caso de que el foro la tuviese.
  • La pestaña «Información» activa por defecto.

Si estás de acuerdo con esta configuración ya no deberías siquiera seguir leyendo. Copia y pega lo anterior y ya estarías listo.

En caso de que no seas tan conformista y quieras una configuración única, el funcionamiento es el siguiente:

Dentro del apartado tabStructure se van a poner distintas pestañas, las cuales están representadas por varios campos entre llaves ({, }). Todo el contenido entre estas llaves representa una pestaña y solo una. Cada pestaña tiene el campo «label», el cual se mostrará en el propio botón de la pestaña y el campo content, que a su vez contiene varios selectores que se corresponden a cada elemento que contendrá dicha pestaña.

A parte de estos dos campos, existe un tercer campo opcional llamado «default» el cual, si se le da valor true, cada vez que entres a un tema, dicha (o dichas) pestaña se mostrará activa por defecto. Sí, he dicho dichas porque no vi razón alguna para no permitir esto. Seguro que a alguien se le ocurre algo muy original con esto.

Ahora bien, en cuanto al orden en el que aparecen las pestañas… También lo he hecho muy simple. El orden en el que aparezcan en la configuración es el que se seguirá (el orden en el que aparecen las llaves correspondientes a cada pestaña).

Para el orden del contenido de cada pestaña (si el avatar va antes o después del nombre, etc.) se seguirá la lógica anterior. El orden de los selectores del campo «content» es el que se seguirá.

Si has seguido todos los pasos bien, tu código debería parecerse a este:

$(function() {
   $('.postprofile').customProfile({
        uniqueFieldClass: true,
        tabStructure:  [

            {
                label: 'Información',
                default: true,
                content: [
                    '.postprofile-avatar',
                    '.postprofile-username',
                    '.postprofile-rank',
                ]
            },

            {
                label: 'Campos',
                content: [
                    '.postprofile-fields',
                    '.postprofile-rpg',
                    '.postprofile-contact',
                ]
            }

        ],
   });
});

El resultado es el siguiente:

Quiero dejar constancia de que no he añadido ningún tipo de CSS que sea de personalización. Es por ello que las pestañas aparecerán unas encimas de otras sin ningún diseño. Si hacéis clic en ellas podréis comprobar que la lógica funciona, que es lo que yo proporciono, pero la parte de diseño os corresponde totalmente a vosotros.

Selectores

He dejado algún que otro selector muy interesante para la personalización del código:

  • .postprofile-tabs: Contenedor de las pestañas (los botones)
  • .postprofile-tab: Cada pestaña (los botones).
  • .postprofile-tab-content: Contenedor del contenido de una pestaña cualquiera
  • .postprofile-tab-content-{NOMBRE}: El contenedor del contenido específico de la etiqueta NOMBRE.
  • .postprofile-tab-content.active: Contenedor del contenido de una pestaña cualquiera que está actualmente activa
  • .postprofile-tab.active: Una pestaña que está actualmente activa

Eso es todo para el primer plugin que publico. Si tenéis cualquier tipo de duda no dudéis en enviarme un mensaje privado.

Estructura estándar de los perfiles

A la hora de personalizar los perfiles, mucha gente (yo me incluyo) ha ideado selectores que muchas veces son muy engorrosos o ineficientes cuando se podrían hacer de otra forma. Para crear selectores reutilizables en cualquier foro, propongo un estándar de estructura de los perfiles bastante lógica, básica y fácil de entender.

Recomiendo utilizar esta estructura en cualquier foro o diseño nuevo. Nada más empezar a diseñar, instala esta estructura para hacer tu vida más simple.

En esta entrada básicamente explicaré cómo instalar esta estructura y finalmente proporcionaré algunos selectores para que veáis cuánto se simplifican los que hasta ahora se estaban utilizando.

Características

¿Por qué utilizar esta estructura?

  • Permite crear un estándar de selectores simples y reutilizables.
  • Simplifica la estructura de los perfiles.
  • Permite personalizar el perfil de nuevas formas antes no accesibles.
  • Está mejor organizado.

Instalación

Vete a la plantilla viewtopic_body y busca:

<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
    <!-- div class="online2"></div-->
    <dl><dt>
            {postrow.displayed.POSTER_AVATAR}
            <br><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
        </dt>
        <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
        <dd><br></dd>
        <dd>
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
        </dd>
        <dd><br></dd>
        <dd>
            {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
        </dd>
    </dl></div>

Sustitúyelo por:

<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
    <div class="postprofile-avatar">{postrow.displayed.POSTER_AVATAR}</div>
    <div class="postprofile-username">{postrow.displayed.POSTER_NAME}</div>
    <div class="postprofile-rank">{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</div>
    <div class="postprofile-fields">
        <!-- BEGIN profile_field -->
        <div class="postprofile-field">
            <span class="postprofile-field-label">{postrow.displayed.profile_field.LABEL}</span>
            <span class="postprofile-field-content">{postrow.displayed.profile_field.CONTENT}</span>
            <span class="postprofile-field-separator">{postrow.displayed.profile_field.SEPARATOR}</span>
        </div>
        <!-- END profile_field -->
    </div>
    <div class="postprofile-rpg">{postrow.displayed.POSTER_RPG}</div>
    <div class="postprofile-contact">
        <span class="postprofile-contact-profile">{postrow.displayed.PROFILE_IMG}</span>
        <span class="postprofile-contact-pm">{postrow.displayed.PM_IMG}</span>
        <span class="postprofile-contact-email">{postrow.displayed.EMAIL_IMG}</span>
        <!-- BEGIN contact_field -->
        <span class="postprofile-contact-field">{postrow.displayed.contact_field.CONTENT}</span>
        <!-- END contact_field -->
    </div>
</div>

¡Ya está! ¿Qué creías, que iba a ser muy complicado?

Selectores disponibles

  • .postprofile-rpg: Contiene todos los campos generados de la hoja de personaje.
  • .postprofile-contact: Contiene todos los campos de contacto del perfil.
  • .postprofile-field: Cada uno de los campos del perfil.
  • .postprofile-fields: Nótese la «s». Contiene todos los campos del perfil.
  • .postprofile-field-label: Contiene el nombre del campo de perfil.
  • .postprofile-field-content: Contiene el contenido del campo de perfil.
  • .postprofile-field-separator: Contiene el separador del campo de perfil.
  • .postprofile-contact-profile: Contiene el botón de ir al perfil.
  • .postprofile-contact-pm: Contiene el botón de enviar mensaje privado.
  • .postprofile-contact-email: Contiene el botón de enviar email.
  • .postprofile-contact-field: Cada botón de contacto que no es niguno de los tres anteriores. Por limitaciones de Foroactivo no es posible identificar cada botón de contacto personalizado sin recurir a JavaScript.
  • .postprofile-rank: Contiene el rango del usuario.
  • .postprofile-username: Contiene el nombre del usuario.
  • .postprofile-avatar: Contiene el avatar.

Ejemplos de códigos

Fijar el tamaño del avatar

.postprofile-avatar img {
    width: 200px;
    height: 200px;
}

No permitir que el tamaño del avatar sea más grande que el perfil

Si no tienes el anterior código, colocar este es una buena medida de seguridad.

.postprofile-avatar img {
    max-width: 100%;
}

Cambiar el tamaño o fuente del nombre del usuario

.postprofile-username {
    /* Tamaño de fuente */
    font-size: 20px;
    /* Tipo de fuente */
    font-family: 'Helvetica Neue', sans-serif; /* Recuerda que siempre debes poner de último sans-serif, serif, etc. dependiendo del tipo de fuente */
}

Y ahora mismo no se me ocurren más. ???? Si quieres que añada alguno más envíame un mensaje privado.

Plugins

Quería comentar que a partir de ahora voy a trabajar de una forma distinta a la hora de dar códigos, para solucionar alguno de los problemas más comunes que me he encontrado:

  • Eficiencia. Aunque siempre me planteo hacer los códigos de la forma más eficiente posible, sí es cierto que existen formas desaprovechadas de hacer que los códigos que publico carguen prácticamente al instante en vuestros foros.
  • Corrección de errores o puestas a punto. Todo el mundo tiene errores y, si en algún momento quiero corregir algo o cambiar alguna parte del código para hacerlo más eficiente, todas aquellas personas que ya lo hayan instalado en su foro no tendrán el código actualizado a no ser que lo vuelvan a hacer.
  • Abstracción. Muchas veces los códigos pueden resultar complicados y muy largos. A la vista de una persona que no entienda qué está pasando ahí, editarlos para que sean únicos a vuestro foro puede ser algo un poco complejo. A pesar de que siempre intento que mis códigos sean lo menos modificables posibles y que se adapten a los foros de forma automática, no siempre esto es posible.

Para corregir estos problemas he encontrado una solución perfecta para todos. A partir de ahora los códigos que publique tendrán un formato plugin y serán hospedados en un CDN propio. ¿Qué significa esto para los anteriores problemas?

  • En cuanto a la eficiencia, utilizar un CDN permite que cuanta más gente utilice mis códigos, menos probabilidades haya de que los códigos siquiera se tengan que cargar en tu foro. ¿Qué significa esto? Pues que si un visitante ya ha entrado a un foro que utilice cierto código mío, al entrar a tu foro no tendrá que volver a cargarlo porque ya va a estar en su ordenador. Es decir, el código cargará prácticamente al instante. Esto se lleva haciendo en el desarrollo web desde hace tiempo. Por ejemplo, Foroactivo carga jQuery de la misma forma, utiliando el CDN de Google.
  • En cuanto a la corrección de errores, tener el código hospedado en un servidor me permite corregir errores y mejorar los códigos de manera que el usuario (vosotros) no tengáis que hacer nada. Vuestros foros tendrán siempre la mejor versión de los códigos totalmente funcional sin tener que hacer nada.
  • Por último, la abstracción que permiten los plugins me permite pasar de lo que hacía hasta ahora, que era proporcionar los códigos con la parte editable y la no editable, a daros los códigos con tan sólo la parte editable. Lo he estado probando y es que es todo mucho más simple y fácil.

Por otro lado, aprovecho también para comentar algo que muchas personas me han preguntado y la verdad es que me gusta que se pregunte. Es sobre los créditos.

Veréis, a mí en este momento me dá bastante igual si me ponéis en los créditos de vuestro foro. Siempre se agradece si me enlazáis a este Tumblr, pero quiero dejar constancia que no es obligatorio. Lo que sí que no me gusta es que cambiéis partes de los códigos que hacen referencia a “flerex” o comentarios que tienen el propósito de demostrar la autoría del código. Son cosas que ningún usuario va a ver a no ser que indigue en el código fuente de la página, asi que no debería haber ningún problema.

Dicho esto, ya tengo un plugin preparado para estrenar este nuevo sistema. Esperemos que vaya todo perfecto lel.

Cambiar el diseño del foro dependiendo del grupo del usuario

Vale, no voy a introducir el tema porque el título es bastante self-explanatory.

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.flerex-gryffindor .forabg {
    border: 10px solid red;
}

Instalación

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

Activar los módulos (widgets) y poner 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 favor, evitad hacer cosas chungas como ocultarlos poniendo ancho 0, que eso es como eliminarlos y no funcionaría.

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 → modlogin
  2. En la primera línea debería aparecer lo siguiente:
    <div class="module">

    Lo cambiáis por:

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

Desactivar el FAQ, al menos para los miembros. (Opcional)
Este paso es opcional. TOTALMENTE. Pero solo quiero decir que el código funcionará de forma más eficiente (en algunas zonas del foro) si lo tienes desactivado. En caso de que no quieras desactivarlo (la verdad es que no se hasta que punto merece la pena) no pasa nada. Yo no lo haría, solo lo comento para los más tiquismiquis. Aunque bueno, ya aviso que de nada sirve si después llenas el foro con tropecientas imágenes. XD

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="flerex-user">{USERNAME}</span></div><br />

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

/* 
* A la izquierda, el nombre de la clase del grupo al que
*   corresponde el color (tal y como lo tengas en el PA)
*   de la derecha 
*/
var groups_id = [
    ['mod', '#3262BA'],
    ['admin', '#5AB07C'],
];

function getClassNameFromGroupColor(color) {
    for(var i = 0; i < groups_id.length; i++) {
        if(groups_id[i][1].toUpperCase() == color) {
            return groups_id[i][0];
        }
    }
    return 'default';
}

function setBodyClassByUser(usr) {
    var groupcolor = usr.children().first().attr('style');
    groupcolor = groupcolor.substr(groupcolor.lastIndexOf('#'));
    var classname = 'flerex-' + getClassNameFromGroupColor(groupcolor);
    $('body').addClass(classname);
}

$(function() {
    
    if(_userdata['user_id'] != -1) {

        var usr = $('#flerex-user');
        if(!usr.length) {
            $.get('/faq', function(data) {
                setBodyClassByUser($(data).find('#flerex-user'));
            });
        } else {
            setBodyClassByUser(usr);
        }
    } else {
        $('body').addClass('flerex-guest');
    }
});

Nótese que en las primeras líneas hay una parte que pone:

['mod', '#3262BA'],

Elimináis mis líneas de mod y admin y ponéis lo correspondiente a vuestro foro. A la izquierda poned el sufijo del classname que tendrá el body para el grupo al que corresponde el color de la derecha. Por ejemplo, en el ejemplo anterior (valga la redundancia), body sería accesible con:

body.flerex-mod

Tened en cuenta que los colores deben estar puestos exactamente igual que como los habéis puesto en el PA.

Sí, lo sé, es un coñazo poner todo a mano. Sí, lo sé, se podría automatizar. El problema es que he buscado la forma más eficiente de hacerlo y esta lo es sin duda.


Cualquier cosa, me habláis por chat de Tumblr. Si me he equivocado hacédmelo saber, porfa.

Y ya está. Me encantaría que me enseñáseis las cosas guapas que hacéis con esto.


PD: Se me olvidaba decir que he sido bueno y os he dejado dos clases por default para que hagáis lo que queráis. Estas clases son:

  • body.flerex-guest que se aplica a todos los invitados
  • body.flerex-default que se aplica a todos los grupos que no hayáis especificado en groups_id.