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”

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.