Novedad  [Tutorial] Elemento activo en la barra de navegación.
Nivel: Basico. Tiempo: 3mn (Como maximo) Función: Al dar clic en un enlace de la barra de navegación se quedara el elemento activo. Creditos: Surv...

Nivel: Basico.
Tiempo: 3mn (Como maximo)
Función: Al dar clic en un enlace de la barra de navegación se quedara el elemento activo.
Creditos: Survivor21.

Usare como ejemplo el estilo y plantillas que vienen por default.

En la plantilla header encontramos:
Código:
            <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
                </ul>

En cada enlace agregaremos class="dependiendo de lo que sea".
Ejemplo: <a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a>

En la plantilla misc_help veeremos esto:
Código:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->help_docs}</title>
{$headerinclude}
</head>
<body>
{$header}
{$sections}
{$footer}
</body>
</html>

Solo modificaremos <body> dejandolo así: <body id="help">.

Haremos lo mismo con las plantillas:
Search: Búsqueda - Plantillas/search
Memberlist: Lista de miembros - Plantillas/memberlist
Calendar: Calendario - Plantillas/calendar
Help: Misceláneos - Plantillas/misc_help

Por ultimo agregan esto en global.css:
Código:
#search .search, #memberlist .memberlist, #calendar .calendar, #help .help {
    color: #ffffff;
}

Resultado final:
[Imagen: previaelementoactivo.png]
Gracias, justo esto queria
Exactamente como lo tengo yo ,al final le heché cabeza y lo puse así ,pensamos igual Ero
En realidad, alguien pensó igual que ustedes antes haha ese tuto ya estaba hecho por la internet pero me gusta la buena adaptación de mi amigo Survivor, la usaré =D.
+Rep
Muy buen tutorial, me gusto.

+Rep
Porfavor podrias subir la imagen a photobucket o a otro
En imageshack no se muestra.
[Imagen: thump_6101565previa-elemento-acti.png]
Última modificación: 12 Mar, 2011, 4:39 pm por Azagthoth.
En mi theme no me funciona...

Agregue al global.css esto:
Código:
#search .search, #memberlist .memberlist, #calendar .calendar, #help .help #portal .portal {
    background: #65a8d6;
        color: #f0f7fc;
    float: left;
    padding: 4px 10px 4px 10px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    text-decoration: none;
}

Mi header contiene esto:
Código:
<div class="menu">
      <ul>
      <li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><img src="{$mybb->settings['bburl']}/images/theme/2.png" HEIGHT="15 "ALIGN="LEFT">Portal</a></li>
      <li><a href="{$mybb->settings['bburl']}/index.php" class="active"><img src="{$mybb->settings['bburl']}/images/theme/3.png" HEIGHT="15 ALIGN="LEFT">Foros</a></li>
      <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><img src="{$mybb->settings['bburl']}/images/theme/5.png" HEIGHT="15 ALIGN="LEFT">{$lang->toplinks_help}</a></li>
      </ul>                        
   </div>

La plantilla misc_help contiene:
Código:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->help_docs}</title>
{$headerinclude}
</head>
<body id="help">
{$header}
{$sections}
{$footer}
</body>
</html>

Y como podran ver en mi foro no cambia absolutamente nada xD

Que hago mal?
(6 Aug, 2011, 4:48 pm)Gmaster escribió: En mi theme no me funciona...

Agregue al global.css esto:
Código:
#search .search, #memberlist .memberlist, #calendar .calendar, #help .help #portal .portal {
    background: #65a8d6;
        color: #f0f7fc;
    float: left;
    padding: 4px 10px 4px 10px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
    -webkit-border-top-right-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    text-decoration: none;
}

Mi header contiene esto:
Código:
<div class="menu">
      <ul>
      <li><a href="{$mybb->settings['bburl']}/portal.php" class="portal"><img src="{$mybb->settings['bburl']}/images/theme/2.png" HEIGHT="15 "ALIGN="LEFT">Portal</a></li>
      <li><a href="{$mybb->settings['bburl']}/index.php" class="active"><img src="{$mybb->settings['bburl']}/images/theme/3.png" HEIGHT="15 ALIGN="LEFT">Foros</a></li>
      <li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><img src="{$mybb->settings['bburl']}/images/theme/5.png" HEIGHT="15 ALIGN="LEFT">{$lang->toplinks_help}</a></li>
      </ul>                        
   </div>

La plantilla misc_help contiene:
Código:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->help_docs}</title>
{$headerinclude}
</head>
<body id="help">
{$header}
{$sections}
{$footer}
</body>
</html>

Y como podran ver en mi foro no cambia absolutamente nada xD

Que hago mal?

El CSS lo pusiste mal, te falta una coma después de #help .help.
(7 Aug, 2011, 6:09 am)nentab escribió: El CSS lo pusiste mal, te falta una coma después de #help .help.

Le puse la coma pero tampoco funcionaba... asi que separe cada cosa, y repeti todo para cada ID y asi si funciona.

Gracias! Big Grin

Edit: la opcion "Foro" la puse en la plantilla "index", pero al ingresar a un post la seleccion de la pestaña foro desaparece.
Que otra plantilla debo ponerle la ID para que al ver un tema se visualice activo la pestaña "foro" ?
Última modificación: 7 Aug, 2011, 10:47 am por YondaimeKuba.