[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: #000000;
}

Resultado final:
[Imagen: previaelementoactivo.png]
(En la imagen se muestran 3 diferentes colores en los enlaces, el de color negro es a:link, el de color azul es a:hover y el de color naranja es el elemento activo)



Creo que este tema ya lo había creado... pero no lo encuentro, así que lo vuelvo a crear. Smile
Seria bueno que pusieras una demo Tongue o una foto.

PD: Cuacha.
(18 Dec, 2011, 10:47 am)XzX GAC escribió: Seria bueno que pusieras una demo Tongue o una foto.

PD: Cuacha.

No quiero '.'

Ya tenía captura "cuacha" Big Grin
Creo que tendre que usar mis lentes cuando navegue por internet ;.;
Esta es la forma simple sin plugins o modificaciones, solo html y css.

Pero para los que usan el plugin de condiciones, hay formas mas simples.
{SIGNATURE_IMAGE}
NO entiendo qué hace esto, alguna explicación para tontos?¿

Muchas gracias.