Cargando...
Notificaciones Password  Username

Regresar CPortada - Mas que un foro, tu Comunidad.  » Recursos para Forumotion - Foroactivo » PHPBB3 » CSS Stylesheet
Actualizar esta página [Sistema | Tutorial] Rep Mail Bar
Nombre de Usuario:
Contraseña:
   

Responder al tema
 
Herramientas Modos de visualización

(#1)
Old  Hacha de Plata doble
">
avatar
Hacha de Plata doble
Ketan
2516011501/09/2010España
 
icon1 [Sistema | Tutorial] Rep Mail Bar el 23/2/2011, 5:48 pm

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











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

(#2)
Old  Colaborador
">
avatar
Colaborador
genau
2441322/10/2011Bolivia
 
icon1 Re: [Sistema | Tutorial] Rep Mail Bar el 2/11/2011, 10:10 am

y como puedo poner esta barra como el menu de un foro por yo creo q estos codigos solo funciona donde acepta codigos html pero es posible ponerlo en la cabezera de un foro osea donde se encuentra el menu?

Comentar con facebook:
 
Permisos de este foro:
No puedes responder a temas en este foro.

 Los Códigos BB están Activado
 Los Emoticonos están Activado
 Código [IMG] está Activado
 Código HTML está Activado