[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: Survivor21.
Usare como ejemplo el estilo y plantillas que vienen por default.
En la plantilla header encontramos:
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:
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:
Resultado final:
![[Image: previaelementoactivo.png]](http://img862.imageshack.us/img862/3632/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.
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:
<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:
<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:
#search .search, #memberlist .memberlist, #calendar .calendar, #help .help {
color: #000000;
}Resultado final:
(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.
Seria bueno que pusieras una demo 
o una foto.
PD: Cuacha.
o una foto.PD: Cuacha.
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.
Pero para los que usan el plugin de condiciones, hay formas mas simples.
Envía un DM o MP si te interesa patrocinar alguna actualización o complemento a alguno de mis plugins.
![[Image: signature.png]](https://omarg.me/cache/images/signature.png)
Discord
Discord
omar.gonzalez (Omar G.#6117); Telegram at @omarugc;
NO entiendo qué hace esto, alguna explicación para tontos?¿
Muchas gracias.
Muchas gracias.