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.
Instalación
1. Configuración de los iconos.
Primero es necesario vayas a la Gestión de Imágenes de tu foro y en la pestaña de «Iconos de los Temas» crees tantos iconos como tipos de temas quieras (o clases específicas para los temas, según como lo quieras ver).
Como la única forma que tenemos de identificar los iconos es mediante su imagen, es necesario que cada uno tenga una imagen distinta. Para ello copia la siguiente ruta y coloca un identificador del icono al final para que sea más fácil después ponerlo en el código.
Esta imagen la utilizaremos más adelante en el código. No es necesario que ponga privado ya que el código no lo utilizará para nada. Es simplemente una ayuda para poder organizarte mejor.
Listo, cada vez que añades algo distinto al final de esa URL tienes una imagen que a vista de Foroactivo es única pero a vista del navegador de los usuarios es la misma (así evitamos tener más peticiones http de las necesarias).
2. Crear selector para el tipo de tema
Ahora tenemos que eliminar el viejo selector de icono de temas y crear el nuestro propio basándonos en el nombre que le demos al tipo de tema. El resultado sería algo así:
Para ello, hay que hacer unos cambios a la plantilla posting_body, en la subsección de plantillas «Escribir un Mensaje y Mensajes Privados».
¡Ojo! En las primeras líneas hay una definición de topicicons. Ahí debéis de poner tantas líneas como tipos de temas hayáis creado (es decir, cuántos iconos hayáis creado) y reemplazarlo por el nombre que le has dado a dicho tipo de tema (icono) y la dirección a la imagen.
5. Ocultar los iconos
Aunque sean imágenes invisibles, a mi me molesta que ese pixel invisible siga siendo visible (if that makes any sense). Para eliminar las imágenes en los títulos de los temas añadiremos este CSS:
.topic-title img {
display: none;
}
4. Darle diseño
El JS ya está haciendo su trabajo generando las clases dependiendo del tema. Ahora es tu turno de personalizar tu foro. Recuerda que el límite es la imaginación. Adjunto a continuación el CSS que he utilizado para hacer efecto de la anterior imagen: