• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión

Mod.Plantilla Sub-nodos en columnas

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Busca las plantillas 'node_category_level_2' y 'node_forum_level_2'. En su interior encontrarás:
Rich (BB code):
                <xen:if is="{$renderedChildren} AND {$level} == 2">
                    <div class="Popup subForumsPopup">
 
                    </div>
                </xen:if>

Reemplaza todo con esto otro, incluyendo el '</xen:if>':
Rich (BB code):
<xen:if is="{$renderedChildren} AND {$level} == 2">
        <div class="subForumsPopup">
                <div class="subForumsMenu">
                        <ol class="secondaryContent blockLinksList">
                        <xen:foreach loop="$renderedChildren" value="$child">
                                {xen:raw $child}
                        </xen:foreach>
                        </ol>
                </div>
        </div>
</xen:if>
Esto se puede colocar en cualquier sitio (o simplemente dejarlo como está). Personalmente, me gusta que vaya después del propio nodo, por lo que voy a tener que poner mi nuevo código después de
Rich (BB code):
<div class="nodeControls">
            <a href="{xen:link forums/index.rss, $forum}" class="tinyIcon feedIcon" title="{xen:phrase rss}">{xen:phrase rss}</a>
        </div>
 
    </div>
que está en la plantilla 'node_forum_level_2'.

Como final, algo de CSS. Puedes agregar en la plantilla extra.css:
Rich (BB code):
body .subForumsPopup
{
    margin: 0;
    float: none;
}
 
body .subForumsPopup .blockLinksList
{
    display: inline-table;
    width: 100%;
    box-sizing: border-box;
    word-spacing: -10px;
}
 
body .subForumsPopup .blockLinksList > li
{
    display: inline-block;
    width: 25%;
    word-spacing: 0;
    vertical-align: top;
}
 
body .subForumsPopup .blockLinksList .nodeTitle
{
    font-weight: normal;
}
 
body .subForumsPopup .blockLinksList .unread .nodeTitle
{
    font-weight: bold;
}
 
body .subForumsPopup .blockLinksList .nodeTitle a:before
{
    content: "";
    background: @primaryLighter;
    border-radius: 4px;
    margin-right: 5px;
    display: inline-block;
    height: 4px;
    width: 4px;
    vertical-align: middle;
}
 
body .subForumsPopup .blockLinksList li.node > .unread .nodeTitle a:before
{
    background: @primaryMedium;
}
¡Hecho!
Puedes configurar el ancho de las columnas cambiando la propiedad width en 'body .subForumsPopup .blockLinksList > li' . Puedes configurar columnas en valores divisibles por 5 (50%, 25%, 15%, 10%) o, incluso, columnas imprecisas (33%). Nunca debes de configurar el valor de width más alto del 50% si quieres obtener columnas.

El resultado es:
12.png

Al que no le gusten los subniveles de subniveles, puede agregar este código para esconderlos:
Rich (BB code):
.subForumsMenu .node .node
{
    display: none;
}
y su resultado es:
13.png

Artículo original en XenForo: http://xenforo.com/community/resources/sub-nodes-in-columns.580/
Autor: CyberAP

Salud2
 
Arriba