Sugerencia de temas al escribir

Sugiere a tus usuarios temas relacionados cuando estén abriendo nuevos temas para evitar hilos repetidos. Este es el mismo código utilizado por el foro oficial de soporte de Foroactivo.

Diseño independiente en los perfiles dependiendo del grupo

Hoy os traigo un nuevo código de una idea sugerida por @dreamsofkitha. Este código permite darle un diseño a los perfiles de los usuarios dependiendo del grupo de dicho usuario. Nótese que estamos hablando de los perfiles y no de los miniperfiles.

El funcionamiento es el siguiente: se crea una clase que identifica a los grupos y se añade a body#phpbb para poder hacer cualquier tipo de modificación.

Continuar leyendo “Diseño independiente en los perfiles dependiendo del grupo”

Diseño independiente a los mensajes dependiendo del grupo del autor

En base a la sugerencia de @etherealxmemories traigo un nuevo código que permite darle un diseño a cada mensaje de un tema dependiendo de en qué grupo esté el autor del mismo. No solo se detectará en qué grupo está el usuario, sino que también permite cambiar el diseño si el usuario no está en un grupo o si el usuario es un invitado.

Continuar leyendo “Diseño independiente a los mensajes dependiendo del grupo del autor”

Diseño especial a un tema dependiendo de si es Libre o Privado

Con esta guía tendrás clases específicas para cada tema en la lista de temas de un foro dependiendo del icono que tengan esos foros (por ejemplo, un icono para los temas Libros y otro para los Privados).

Hay que tener en cuenta que el código se basa en la lógica de los iconos que proporciona Foroactivo pero no los utilizará de la forma visual en la que se conocen. Con esto quiero decir que el código ocultará la interfaz de los iconos a los usuarios y no funcionarán tal y como se les conoce hasta ahora.

Continuar leyendo “Diseño especial a un tema dependiendo de si es Libre o Privado”

Diferenciar Moderadores, Moderadores del Chat y Administradores en el Chatbox

El siguiente código elimina la arroba de los moderadores del chat, tanto en los mensajes como en la lista de usuarios conectados. Al mismo tiempo, añade las siguientes clases a los usuarios dependiendo de sus permisos:

  • Moderador: .chat-user-mod
  • Moderador del chat: (los antiguos «arrobas») .chat-user-chatmod
  • Administradores: .chat-user-admin
  • Usuario: .chat-user-normal

Con estas clases, el código permite poner un identificador personalizado para los moderadores e incluso añadir cualquier tipo de formato personalizado con CSS (sombras, bordes, fondos, etc.).

Continuar leyendo “Diferenciar Moderadores, Moderadores del Chat y Administradores en el Chatbox”

Imagen personalizada en los títulos de los mensajes

Algunos foros están dando a sus usuarios nuevas formas de personalizar sus perfiles. Últimamente estoy viendo bastantes foros con imágenes elegidas por los usuarios al lado de los títulos de sus mensajes.

Según tengo entendido, esto es algo muy sencillo de implementar en la plataforma Jcink, pero en Foroactivo puede ser un poco más lioso. He decidido hacer esta guía para enseñaros como hacerlo en Foroactivo en unos muy sencillos pasos utilizando mi plugin de modificaciones a los perfiles.

Funcionamiento

El usuario podrá acceder a su perfil, donde un nuevo campo aparecerá para que introduzcan la URL a una imagen que deseen que aparezca en sus mensajes, al lado de los títulos.

Continuar leyendo “Imagen personalizada en los títulos de los mensajes”

Cambiar el diseño del foro dependiendo de la estación

No sé para que demonios puede servir este código, pero por las risas aquí os lo dejo. Con este JS podréis cambiar el diseño del foro dependiendo de la estación del año. Está preparado para seguir una lógica única para todos los usuarios (las estaciones del hemisferio norte o del sur).

Detalles a tener en cuenta

  • Funciona en todas las versiones de Foroactivo e incluso en Jcink (yay 🙃)
  • Por motivos de sencillez, se considera que todos los años las estaciones cambian el día 21.
  • Por motivos de usabilidad para los administradores de foros de RPG, todos los usuarios comparten la misma estación.

Continuar leyendo “Cambiar el diseño del foro dependiendo de la estación”

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”

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.