phpBB España Oficial

Publicado: **13 Oct 2014, 21:04**

¿Deseas añadir un nuevo enlace a la barra de navegación con su propia imagen junto a el enlace?
En este tutorial se mostrará cómo hacerlo.

Instrucciones para Prosilver
Tener en cuenta que algunos estilos basados en Prosilver son diferentes a la hora de añadir nuevos enlaces. Si fuera vuestro caso, pedir Soporte en el foro adecuado.

Lo primero para añadir el enlace:
Abrir: styles/tu_estilo/template/overall_header.html

Buscar:

Código: Seleccionar todo

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

Añadir antes o después: Depende de si quieres el nuevo enlace antes o después del enlace de FAQ.

Código: Seleccionar todo

<li class="icon-faq"><a href="TU ENLACE" title="TÍTULO DEL ENLACE CUANDO EL RATÓN PASE POR ENCIMA">TÍTULO</a></li>

Con el icon-faq indica el estilo ("class") del icono que vas a usar. Hay otros que ya están instalados de serie con phpBB 3. Simplemente cambia icon-faq por el que quieras usar. Puedes elegir uno de estos:

Spoiler

icon-bookmark
icon-bump
icon-faq
icon-fontsize
icon-home
icon-logout
icon-members
icon-print
icon-register
icon-search
icon-subscribe
icon-ucp
icon-unsubscribe

Para añadir otra imagen, se recomienda que sea de 16 x 16 px. como máximo.
Aquí se explica como añadir la imagen:
Subir la nueva imagen a styles/tu_estilo/theme/images
Abrir: styles/tu_estilo/theme/buttons.css
Buscar:

Código: Seleccionar todo

.icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search

Añadir después:

Código: Seleccionar todo

.icon-tu-icono

Cambiar tu-icono por el nombre del icono.

Abrir: styles/tu_estilo/theme/colours.css
Buscar:

Código: Seleccionar todo

 .icon-search					{ background-image: url("{T_THEME_PATH}/images/icon_search.gif"); }

Añadir después:

Código: Seleccionar todo

.icon-tu-icono					{ background-image: url("{T_THEME_PATH}/images/icon_tu_icono.gif"); }

Se recomienda que la imagen sea un GIF, y que el nombre sea de tipo icon_nombredelicono

Después hay que refrescar el la plantilla y el estilo. Identificate como Administrador, ACP -> Estilos -> Plantilla/Estilos y haz clic en Refrescar.

Nota. Se recomienda editar el archivo bajándolo, y posteriormente editarlo con un editor en condiciones, y no hacerlo desde el ACP

Instrucciones para Subsilver2

Con su Subsilver2 es mucho más fácil que Prosilver. De nuevo, si tu estilo es diferente y se basa en Subsilver2 y no estás seguro o no saben qué hacer, pedir Soporte en el foro adecuado.

Abrir: styles/tu_estilo/template/overall_header.html
Buscar:

Código: Seleccionar todo

<a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="*" /> {L_FAQ}</a>

Añadir antes o después: (Depende de donde lo quieras)

Código: Seleccionar todo

<a href="TU ENLACE"><img src="{T_THEME_PATH}/images/TU NOMBRE DE IMAGEN.gif" width="12" height="13" alt="*" /> TÍTULO</a>

Cambia lo que quieras en esta línea. Vincular la imagen del icono es más fácil en subSilver2 ya que acabas de enlazar a la imagen con su nombre y extensión. Tienes que poner tu imagen en la carpeta de su tema Subsilver2, por ejemplo:
Si la imagen a vincular se llama chat.gif el archivo chat.gif debes subirlo a la carpeta:
styles/tu_estilo/theme/chat.gif
Puede ser cualquier tamaño, ya que se puede configurar el tamaño de la misma en el código HTML que está en la línea. Por ejemplo, sigamos con la imagen chat.gif si la imagen fuera de 16 x 16 px. la linea seria así:

Código: Seleccionar todo

<a href="TU ENLACE"><img src="{T_THEME_PATH}/images/chat.gif" width="16" height="16" alt="*" /> TÍTULO</a>

Fuente: Jaymie

phpBB España Oficial

Añadir enlaces a la barra de navegación (encabezado)

Añadir enlaces a la barra de navegación (encabezado) Tema Solucionado