[Sistema | Tutorial] Rep Mail Bar

Nombre: Rep Mail Bar
Versión: 1.0
Tipo: Barra de navegación

Introducción

Este código permite al usuario tener una barra de navegación como en Foros Rep Mail en su propio foro o sitio web.

Mira más abajo para la instalación y demás.

Caracteristicas

Simple y no intrusiva
Fácil de personalizar y extender
No requiere más que solo CSS y una lista en HTML
Permite un link a una cuenta de Twitter con un ícono (Puede ser la cuenta de tu sitio o personal)
Niveles "infinitos" para las listas (Solo se han probado hasta 3 niveles)

Imágenes

Ampliar esta imagen.Reducir esta imagen Clic aquí para ver su tamaño original
[Sistema | Tutorial] Rep Mail Bar 11T8

Código

HTML:

Código:: <div id="rep-mail-bar"> <div class="padder"> <a href="#" id="rep-mail-bar-logo">Nombre de tu foro</a> <ul class="main-nav"> <li class="no-arrow"> <a href="#">Link corriente</a> </li> <li class="alt"> <a>Lista 1</a> <ul> <li class="alt, no-arrow"> <a href="#">Objeto 1.1</a> </li> <li class="alt, no-arrow"> <a href="#">Objeto 1.2</a> </li> <li class="alt, no-arrow"> <a href="#">Objeto 1.3</a> </li> <li class="alt, no-arrow"> <a href="#">Objeto 1.4</a> </li> </ul> </li> <li class="alt"> <a>Lista 2</a> <ul> <li class="alt, no-arrow"> <a href="#">Objeto 2.1</a> </li> <li class="alt, no-arrow"> <a href="#">Objeto 2.2</a> </li> <li class="alt"> <a href="#">Lista/Objeto 2.3</a> </li> <li class="alt, no-arrow"> <a href="#">Lista 2.3.1</a> </li> <li class="alt, no-arrow"> <a href="#">Lista 2.3.2</a> </li> </ul> </li> <li class="alt, no-arrow"> <a href="#">Objeto 2.4</a> </li> </ul> </li> <li class="search"> <form action="/search" id="search-field" method="get"><input type="text" id="rep-mail-bar-search" name="search_keywords" size="10" value="Buscar..." onfocus="if (value =='Buscar...'){value =''}" onblur="if (value ==''){value='Buscar...'}" title="Busca los temas que necesites aquí"> <input type="submit" style="display: none;"> </form> </li> </li> <a href="/feed/" class="rss" title="Mira los últimos temas del foro en RSS">Feed</a> <a href="#" class="twit">Twitter</a> </ul> </div> </div>

CSS (Añadir en Visualización - Colores - CSS Stylesheet) :

Código:: /* CSS del Header */ #rep-mail-bar { position: fixed; top: 0; left: 0; z-index: 99; height: 25px; font-size: 11px; width: 100%; z-index: 999; } #rep-mail-bar .padder { position: relative; padding: 0; width: 100%; margin: 0 auto; background: rgb(91,74,70); /* El fondo */ background: rgba(0, 0, 0, 0.4); height: 25px; } body#repmail-default #rep-mail-bar .padder { min-width: 960px; max-width: 1250px; } body#repmail-default.activity-permalink #rep-mail-bar .padder { min-width: 960px; max-width: 960px; } #rep-mail-bar * { z-index: 999; } #rep-mail-bar div#rep-mail-bar-logo { position: absolute; /* Hace "flotante" la bendita barra */ top: 5px; left: 10px; } #rep-mail-bar a img { border: none; } #rep-mail-bar li { list-style: none; margin: 0; padding: 0; line-height: 100%; text-align: left; } #rep-mail-bar li a { padding: 7px 13px 7px 13px; color: #eee; text-decoration: none; font-size: 11px; } #rep-mail-bar li.alt { border: none; } #rep-mail-bar li.no-arrow a { padding-right: 15px; } #rep-mail-bar ul li ul li a span { display: none; } #rep-mail-bar li:hover, #rep-mail-bar li.hover { position: static; } #rep-mail-bar-logo { float: left; font-weight: bold; font-size: 11px; padding: 5px 8px; margin: 0; text-decoration: none; color: #fff; } body#repmail-default #rep-mail-bar-logo { padding: 2px 8px; } /*******************/ #rep-mail-bar ul { /* Todas las listas */ margin: 0; list-style: none; line-height: 1; cursor: pointer; height: auto; padding: 0; } #rep-mail-bar ul li { /* Todos los objetos de las listas */ padding: 0; float: left; position: relative; background: url(http://i68.servimg.com/u/f68/15/78/66/50/admin-10.gif) 88% 53% no-repeat; padding-right: 9px; } #rep-mail-bar ul li.no-arrow { background: none; padding-right: 0; } #rep-mail-bar ul li ul li { padding: 0; float: left; position: relative; background: url(http://i78.servimg.com/u/f78/15/78/66/50/admin10.gif) 95% 53% no-repeat; padding-right: 11px; } #rep-mail-bar ul li ul li.no-arrow { background: none; padding-right: 11px; } #rep-mail-bar ul li.align-right { position: absolute; right: 0; } #rep-mail-bar ul li a { display: block; } #rep-mail-bar ul.main-nav li:hover, #rep-mail-bar ul.main-nav li.sfhover, #rep-mail-bar ul.main-nav li ul li.sfhover { background-color: #333; } /* Listas de segundo nivel */ #rep-mail-bar ul li ul { position: absolute; width: 185px; left: -999em; margin-left: 0; background: #333; border: 1px solid #222; -moz-border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius-topleft: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; } #rep-mail-bar ul li > ul { border-top: none; } #rep-mail-bar ul li ul a { color: #eee; } #rep-mail-bar ul li ul li { float: left; width: 174px; margin: 0; } #rep-mail-bar ul li ul li:hover a { color: #fff; } #rep-mail-bar ul li div.repmail-bar-clear { clear: both; } #rep-mail-bar ul.main-nav li ul li:hover, #rep-mail-bar ul.main-nav li ul li.sfhover, #rep-mail-bar ul.main-nav li ul li.sfhover { background-color: #222; } /* Listas de tercer y mayor nivel */ #rep-mail-bar ul li ul ul { margin: -25px 0 0 184px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } #rep-mail-bar ul li ul li:hover ul li a { color: #eee; } #rep-mail-bar ul li ul li ul li:hover a { color: #fff; } #rep-mail-bar ul li:hover ul, #rep-mail-bar ul li ul li:hover ul, #rep-mail-bar ul li.sfhover ul, #rep-mail-bar ul li ul li.sfhover ul { left: auto; } #rep-mail-bar ul li.align-right:hover ul { right: 0; } #rep-mail-bar ul li:hover ul ul, #rep-mail-bar li.sfhover ul li ul { left: -999em; } #rep-mail-bar ul li.search { background: none repeat scroll 0 0 transparent; margin-right: 110px; margin-top: 4px; position: absolute; right: 0; } /* Rep Mail Items */ #rep-mail-bar-search { background: none repeat scroll 0 0 #FAFAFA; border: 1px solid #666666; color: #666666; font-family: Arial,Helvetica,Sans-Serif; font-size: 12px; font-weight: bold; margin: 0; padding: 0; cursor:text; } #rep-mail-bar ul li.search:hover { background-color: transparent; } #rep-mail-bar a.rss { float:right; margin:6px 8px 0px 0px; color:#B4BFC0; padding:1px 0px 4px 16px; background: url(http://i68.servimg.com/u/f68/15/78/66/50/rss110.png) no-repeat top left; font-weight:bold; } #rep-mail-bar a:hover.rss { color:#fff; } #rep-mail-bar a.twit { float:right; margin:6px 8px 0px 0px; color:#B4BFC0; padding:1px 0px 4px 16px; background: url(http://i68.servimg.com/u/f68/15/78/66/50/twitte10.png) no-repeat top left; font-weight:bold; } #rep-mail-bar a:hover.twit { color:#fff; }

Instalación

Si usarás este código en tu sitio web, puedes ignorar lo siguiente.

----------------------------------------

Si tu foro usa Widgets tanto en el portal como en el foro en sí, inserta el código HTML en uno compartido de manera global. Solo que la barra no funciona al entrar a páginas que no muestren los Widgets, como los perfiles (Solo tengo confirmado su desaparición en el perfíl avanzado)

En caso de que no los uses, deberás hacer ediciones al HTML para que funcione con este tutorial: http://asistencia.foroactivo.com/t79138-colocar-aviso-textual-en-tu-foro-al-final-del-footer. Otra alternativa es editar las plantillas (Versiones phpBB2 y PunBB únicamente) en la sección de header y añadir el código HTML directamente ahí.

Añadir más secciones a la lista solo conlleva añadir más HTML miestras se respeten los atributos CSS de cada uno. Estos són los atributos que deben usarse a la hora de añadir las listas:

- no-arrow: Solo para links comunes y corrientes. El no añadir este atributo al link hará que sea confundido como una lista.
- alt: Usado dentro de las listas, ya sea link o no, puesto que no usarlo hace que se muestre un borde indeseable.

Ambos atributos pueden combinarse (Ejemplo: "no-arrow, alt")

--------------------------------------------------------------------------------

Notas del autor

Este código fue mi inspiración a aprender CSS para ForoActivo para la versión de phpBB3.

--------------------------------------------------------------------------------

Copyright

Este sistema fue hecho por Rep para el uso en sitios web en general. No hace falta un credito, pero no digas que el sistema es tuyo. Si quieres deja un link de regreso a este foro mencionandome como creador del sistema..

Autor: Rep