• ¡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 Cómo agregar iconos en las pestañas del foro añadiendo en los Listeners

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
En nuestro foro (www.entropiaplanets.com/foros (VB * ptooey advertencia *)) se utilizan iconos en las pestañas de nuestra navegación. Queríamos tener lo mismo en XF, y la aplicación de esta en las pestañas por defecto fue fácil, pero en las pestañas dinámicamente añadidas plantea un desafío. Afortunadamente, todavía es bastante fácil de lograr, y aquí está cómo. En primer lugar, buscar la plantilla navegation. En ella, buscar las líneas 75 y 159 74, 87, 148 y 161:
Insertar CODE, HTML o PHP:
<a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
Cambiarlo por:
Insertar CODE, HTML o PHP:
                        <a href="{$extraTab.href}" class="navLink"><img src="{$extraTab.image}" width="24px" height="24px" border="0" alt="{$extraTab.title}" align="top" />&nbsp;&nbsp;{$extraTab.title}</a>
                    <xen:else />
                        <a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
                    </xen:if>
En pocas palabras, esto añade una imagen, la fuente de la que es una nueva variable llamada $extraTab.image,con un tamaño de 24*24 píxeles, sin borde, y una etiqueta alt igual que el título.
El último paso es ir a la carpeta de instalación del add-on para el que se desea agregar el icono (yo personalmente uso Jaxels XenMedio y XenAtendo , así como el excelenteblog Leafnet de Onimua), y hacer una pequeña modificación allí.
Voy a utilizar el blog LeafNet como un ejemplo. El add-on se instala normalmente en la carpeta <xf-home>/library/LNBlog. En eso, ve a la carpeta Listener y edita el archivo llamado NavTab.php. En ella verás la siguiente matriz:
Insertar CODE, HTML o PHP:
$ ExtraTabs ['blogs'] = array ( 'Title' => new XenForo_Phrase ('lnblog_blogs'),
'Href' => XenForo_Link:: buildPublicLink ("blogs"),
"LinksTemplate '=>' lnblog_tab_links,
'Position' => 'medio' );
Añade la siguiente línea debajo de la línea 'title':
Insertar CODE, HTML o PHP:
'Imagen' => '<patth a su icono>/blog.png',
Obviamente, modifique la ruta según sus necesidades. ¡Ya está! Ahora todo lo que necesitamos hacer es convencer a los que hacer un add-ons para agregar una opción AdminCP en sus modificaciones para permitir fácilmente que nos llene en el lugar, y ya está todo listo Disfrutelo Autor: Peter - SchmitzIT
Artículo original: http://xenforo.com/community/threads/how-to-add-forum-icons-in-tabs-added-with-listeners.14912/

A mi me ha quedado la plantilla navigation así:
Insertar CODE, HTML o PHP:
<xen:edithint template="navigation.css" />
 
<div id="navigation" class="pageWidth">
<div class="pageContent">
<nav>
 
<div class="navTabs">
<ul class="publicTabs">
 
<!-- home -->
<xen:if is="{$showHomeLink}">
<li class="navTab home PopupClosed"><a href="{$homeLink}" class="navLink">{xen:phrase home}</a></li>
</xen:if>
 
<!-- extra tabs: home -->
<xen:if is="{$extraTabs.home}">
<xen:foreach loop="$extraTabs.home" key="$extraTabId" value="$extraTab">
<xen:if is="{$extraTab.linksTemplate}">
<li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
 
<xen:if is="{$extraTab.image}">
<a href="{$extraTab.href}" class="navLink"><img src="{$extraTab.image}" width="24px" height="24px" border="0" alt="{$extraTab.title}" align="top" />&nbsp;&nbsp;{$extraTab.title}</a>
<xen:else />
<a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
</xen:if>
<a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
 
<div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
<div class="primaryContent menuHeader">
<h3>{$extraTab.title}</h3>
<div class="muted">{xen:phrase quick_links}</div>
</div>
{xen:raw $extraTab.linksTemplate}
</div>
</li>
<xen:else />
<li class="navTab {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
<xen:if is="{$extraTab.image}">
<a href="{$extraTab.href}" class="navLink"><img src="{$extraTab.image}" width="24px" height="24px" border="0" alt="{$extraTab.title}" align="top" />&nbsp;&nbsp;{$extraTab.title}</a>
<xen:else />
<a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
</xen:if>
<xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
</li>
</xen:if>
</xen:foreach>
</xen:if>
 
<!-- forums -->
<xen:if is="{$tabs.forums}">
<li class="navTab forums {xen:if $tabs.forums.selected, 'selected', 'Popup PopupControl PopupClosed'}">
 
<a href="{$tabs.forums.href}" class="navLink"><img src="@imagePath/foros.png" width="24px" height="24px" border="0" alt="{$tabs.forums.title}" align="top" />&nbsp;&nbsp;{$tabs.forums.title}</a>
<a href="{$tabs.forums.href}" class="SplitCtrl" rel="Menu"></a>
 
<div class="{xen:if {$tabs.forums.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
<div class="primaryContent menuHeader">
<h3>{$tabs.forums.title}</h3>
<div class="muted">{xen:phrase quick_links}</div>
</div>
<ul class="secondaryContent blockLinksList">
<xen:hook name="navigation_tabs_forums">
<xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'forums/-/mark-read', '', 'date={$serverTime}'}" class="OverlayTrigger">{xen:phrase mark_all_forums_read}</a></li></xen:if>
<xen:if is="{$canSearch}"><li><a href="{xen:link search, '', 'type=post'}">{xen:phrase search_forums}</a></li></xen:if>
<xen:if is="{$visitor.user_id}"><li><a href="{xen:link 'watched/threads'}">{xen:phrase watched_threads}</a></li></xen:if>
<li><a href="{xen:link 'find-new/threads'}">{xen:phrase whats_new}</a></li>
</xen:hook>
</ul>
</div>
</li>
</xen:if>
 
<!-- extra tabs: middle -->
<xen:if is="{$extraTabs.middle}">
<xen:foreach loop="$extraTabs.middle" key="$extraTabId" value="$extraTab">
<xen:if is="{$extraTab.linksTemplate}">
<li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
<xen:if is="{$extraTab.image}">
<a href="{$extraTab.href}" class="navLink"><img src="{$extraTab.image}" width="24px" height="24px" border="0" alt="{$extraTab.title}" align="top" />&nbsp;&nbsp;{$extraTab.title}</a>
<xen:else />
<a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
</xen:if>
<a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
 
<div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
<div class="primaryContent menuHeader">
<h3>{$extraTab.title}</h3>
<div class="muted">{xen:phrase quick_links}</div>
</div>
{xen:raw $extraTab.linksTemplate}
</div>
</li>
<xen:else />
<li class="navTab {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
<xen:if is="{$extraTab.image}">
<a href="{$extraTab.href}" class="navLink"><img src="{$extraTab.image}" width="24px" height="24px" border="0" alt="{$extraTab.title}" align="top" />&nbsp;&nbsp;{$extraTab.title}</a>
<xen:else />
<a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
</xen:if>
<xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
</li>
</xen:if>
</xen:foreach>
</xen:if>
 
<!-- members -->
<xen:if is="{$tabs.members}">
<li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
 
<a href="{$tabs.members.href}" class="navLink"><img src="@imagePath/members.png" width="24px" height="24px" border="0" alt="{$tabs.members.title}" align="top" />&nbsp;&nbsp;{$tabs.members.title}</a>
<a href="{$tabs.members.href}" class="SplitCtrl" rel="Menu"></a>
 
<div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
<div class="primaryContent menuHeader">
<h3>{$tabs.members.title}</h3>
<div class="muted">{xen:phrase quick_links}</div>
</div>
<ul class="secondaryContent blockLinksList">
<xen:hook name="navigation_tabs_members">
<li><a href="{xen:link members}">{xen:phrase registered_members}</a></li>
<li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
<li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li>
</xen:hook>
</ul>
</div>
</li>
</xen:if>
 
<!-- help -->
<xen:if is="{$tabs.help}">
<li class="navTab help {xen:if $tabs.help.selected, 'selected', 'Popup PopupControl PopupClosed'}">
 
<a href="{$tabs.help.href}" class="navLink" rel="help"><img src="@imagePath/help.png" width="24px" height="24px" border="0" alt="{$tabs.help.title}" align="top" />&nbsp;&nbsp;{$tabs.help.title}</a>
<a href="{$tabs.help.href}" class="SplitCtrl" rel="Menu"></a>
 
<div class="{xen:if {$tabs.help.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
<div class="primaryContent menuHeader">
<h3>{$tabs.help.title}</h3>
<div class="muted">{xen:phrase quick_links}</div>
</div>
<ul class="secondaryContent blockLinksList">
<xen:hook name="navigation_tabs_help">
<li><a href="{xen:link help/smilies}">{xen:phrase smilies}</a></li>
<li><a href="{xen:link help/bb-codes}">{xen:phrase bb_codes}</a></li>
<li><a href="{xen:link help/trophies}">{xen:phrase trophies}</a></li>
<li><a href="{xen:link help/manual}">{xen:phrase lms_xenforo}</a></li>
<li><a href="{xen:link help/licencia}">{xen:phrase lms_licencia}</a></li>
</xen:hook>
</ul>
</div>
</li>
</xen:if>
 
<!-- extra tabs: end -->
<xen:if is="{$extraTabs.end}">
<xen:foreach loop="$extraTabs.end" key="$extraTabId" value="$extraTab">
<xen:if is="{$extraTab.linksTemplate}">
<li class="navTab {$extraTabId} {xen:if $extraTab.selected, 'selected', 'Popup PopupControl PopupClosed'}">
 
<xen:if is="{$extraTab.image}">
<a href="{$extraTab.href}" class="navLink"><img src="{$extraTab.image}" width="24px" height="24px" border="0" alt="{$extraTab.title}" align="top" />&nbsp;&nbsp;{$extraTab.title}</a>
<xen:else />
<a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
</xen:if>
<a href="{$extraTab.href}" class="SplitCtrl" rel="Menu"></a>
 
<div class="{xen:if {$extraTab.selected}, 'tabLinks', 'Menu JsOnly tabMenu'}">
<div class="primaryContent menuHeader">
<h3>{$extraTab.title}</h3>
<div class="muted">{xen:phrase quick_links}</div>
</div>
{xen:raw $extraTab.linksTemplate}
</div>
</li>
<xen:else />
<li class="navTab {xen:if $extraTab.selected, 'selected', 'PopupClosed'}">
<xen:if is="{$extraTab.image}">
<a href="{$extraTab.href}" class="navLink"><img src="{$extraTab.image}" width="24px" height="24px" border="0" alt="{$extraTab.title}" align="top" />&nbsp;&nbsp;{$extraTab.title}</a>
<xen:else />
<a href="{$extraTab.href}" class="navLink">{$extraTab.title}</a>
</xen:if>
<xen:if is="{$extraTab.selected}"><div class="tabLinks"></div></xen:if>
</li>
</xen:if>
</xen:foreach>
</xen:if>
 
<!-- no selection -->
<xen:if is="!{$selectedTab}">
<li class="navTab selected"><div class="tabLinks"></div></li>
</xen:if>
 
</ul>
 
<xen:if is="{$visitor.user_id}"><xen:include template="navigation_visitor_tab" /></xen:if>
</div>
 
<span class="helper"></span>
 
</nav>
</div>
</div>
Dejo algunos de los listeners más conocidos en las pestañas y los botones.
Demo aquí mismo.

31598699.png


Salud2
 

Adjuntos

  • navigation.zip
    22,4 KB · Visitas: 61
  • slider.png
    slider.png
    16,4 KB · Visitas: 370
Arriba