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”

Centrado horizontal y vertical «like a boss»

Menos de 24h y ya escribo otra guía. Me parece justo, llevaba un mes sin publicar nada; aunque he de admitir que me gusta esta «serie», si es que se le puede llamar así.

Ahora toca el turno de los centrados, algo tan simple y que a su vez mucha gente utiliza mal. Antes de empezar, vamos a situarnos. Cuando nos referimos a centrar tenemos que saber que existen dos formas de centrar las cosas: horizontal (con respecto al eje de las X) y vertical (con respecto al eje de las Y). A parte de esto, existen dos posibilidades para centrar dependiendo de si el elemento se comporta como un bloque o como texto. Es decir, tenemos 2^2 posibilidades para centrar.

Continuar leyendo “Centrado horizontal y vertical «like a boss»”

Columnas «like a boss»

He visto que muchos diseñadores de skins que necesitan columnas abusan de métodos como los float o display: inline-block para obtener dicho resultado.

El uso de estas propiedades no es más que un «truco» para evitar tener que utilizar el elemento <table> para maquetar. Debemos recordar que en el pasado (¿en serio acabo de llamarle a los años 2000 «pasado»?) este elemento era utilizado de forma abusiva para constituir las estructuras de las páginas, llevando a los desarrolladores a problemas de semántica y mantenibilidad, entre otros.

Desafortunadamente mucha gente utiliza de forma incorrecta estas propiedades, por lo que dedicaré las siguientes líneas a explicar cómo se deben utilizar para obtener columnas como resultado.

Continuar leyendo “Columnas «like a boss»”

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”

Temas con barra de desplazamiento y mejoras en la visualización del texto

Es ya bien sabido que cada vez se utiliza más la técnica de las barras de desplazamiento o «scroll» para aprovechar espacio en las páginas. Se empezó en su momento con las tablillas, donde el scroll permitía centrar la atención en sus diseños detallistas y dejar en segundo plano lo menos importante: el texto. Ahora, podemos verlas desde en descripciones de foros, las últimas 24h o incluso algunos atrevidos están empezando a crear tendencia incluyendo el scroll en la leyenda de los grupos.

Continuar leyendo “Temas con barra de desplazamiento y mejoras en la visualización del texto”

Variables CSS

El lenguaje CSS ha sufrido unas cuantas mejoras desde que la especificación de su versión número tres salió a la luz. De entre las mejoras, siempre he estado siguiendo de reojo a la evolución de las variables CSS, puesto que suponen un gran avance en la editabilidad y escalabilidad de los códigos CSS.

Considero que esta característica ha madurado lo suficiente y tiene el soporte necesario por parte de los navegadores más corrientes para poder ser utilizado a día de hoy. Es por ello que os vengo a informar sobre ella y a enseñaros, de forma general, cómo utilizarla.

Continuar leyendo “Variables CSS”

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”