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

Flerex

hace 7 años

hace 5 años

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.

http://illiweb.com/fa/empty.gif#

Por ejemplo:

http://illiweb.com/fa/empty.gif#privado

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».

Busca:

<dt><label>{L_SUBJECT}</label></dt>
        <dd>

Reemplázalo por:

<dt><label>{L_SUBJECT}</label></dt>
        <dd id="posting-subject">

Busca la primera ocurrencia de:

<!-- BEGIN switch_icon_checkbox -->
        <dl>

Reemplázalo por:

<!-- BEGIN switch_icon_checkbox -->
        <dl id="posting-icon">

Busca:

<!-- END switch_subject_color -->

Añade después:

<script type="text/javascript">
!function() {
    const $iconcont = $('#posting-icon');

    if(!$iconcont.length)
        return;

    const $labels = $iconcont.find('dd label'),
    $select = $('<select />', { name: 'post_icon', id: 'posting-icon-select' });

    $labels.each(function() {
        let $this = $(this),
        $img = $this.find('img'),
        $input = $this.find('input'), 
        $option = $('<option />', {
            value: $input.val(),
            text: $img.length ? $img.attr('title') : $this.find('span').text(),
        });
        if(typeof $input.attr('checked') != 'undefined')
            $option.attr('selected', 'selected');
        $select.append($option);
    });

    $('#posting-subject').prepend($select);
    $iconcont.remove();
}();
</script>

Ahora es necesario añadir este pequeño CSS para separar el selector del campo del título:

#posting-icon-select {
    margin-right: 5px;
}

3. Añadir el JS principal

Ahora tan solo falta añadir el siguiente JS desde la Gestión de JavaScripts y marcarlo para que se vea solo en los subforos.

!function() {

    const topicicons = [
        ['Público', 'https://illiweb.com/itest/smilies/default/default3.gif'],
        ['Privado', 'https://illiweb.com/itest/smilies/default/default2.gif'],
    ];

    let slug = function(str) {
        const from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;',
        to   = 'aaaaeeeeiiiioooouuuunc------';
        str = str.trim().toLowerCase();
        for (var i = 0, l = from.length; i<l; i++)
            str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
        return str.replace(/[^a-z0-9 -]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-');
    };

    $(function() {
        $('dd.dterm').each(function() {
            let classname,
            $this = $(this),
            bg = $this.css('background-image').slice(4, -1).replace(/"/g, '');
            if(bg) {
                let icon = topicicons.find(elm => elm[1] == bg);
                classname = icon ? slug(icon[0]) : 'unrecognizedicon';
            } else
                classname = 'noicon';

            $this.closest('.row').addClass(`topic-icon-${ slug(classname) }`);
        });
    });

}();

¡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:

/* Common properties for all tags */
.topic-icon-publico .topic-title::before,
.topic-icon-privado .topic-title::before {
    background-color:  #0075B3;
    color: #fff;
    display: inline-block;
    text-transform: uppercase;
    padding: 2px 5px;
    font-size: 9px;
    font-weight: bold;
    margin-right: 5px;
    border-radius: 3px;
}

.topic-icon-publico .topic-title::before {
    content: 'Público';
    background-color: #76B300;  
}

.topic-icon-privado .topic-title::before {
    content: 'Privado';
    background-color: #B30000;
}

Clases disponibles

li.row.topic-icon-[nombresimplificado]: Temas con el icono de dicho nombre
li.row.topic-icon-noicon: Temas sin icono
li.row.topic-icon-unrecognizedicon: Temas con un icono que no has configurado al principio del script
#posting-icon-select: El selector del icono
#posting-subject: El contenedor del selector y el cuadro de texto del título