[Tutorial] Elemento activo en la barra de navegación.

nocktis21 12 Mar, 2011, 2:10 pm

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]

royct 12 Mar, 2011, 2:19 pm

Gracias, justo esto queria

Gypaete 12 Mar, 2011, 2:29 pm

Exactamente como lo tengo yo ,al final le heché cabeza y lo puse así ,pensamos igual Ero

Night~ 12 Mar, 2011, 3:05 pm

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

nentab 12 Mar, 2011, 3:10 pm

Muy buen tutorial, me gusto.

+Rep

Poizonus 12 Mar, 2011, 4:32 pm

Porfavor podrias subir la imagen a photobucket o a otro
En imageshack no se muestra.

nocktis21 12 Mar, 2011, 4:38 pm

[Imagen: thump_6101565previa-elemento-acti.png]

Última modificación: 12 Mar, 2011, 4:39 pm por Azagthoth.

Gmaster_mybb_import8349 6 Aug, 2011, 4:48 pm

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?

nentab 7 Aug, 2011, 6:09 am

(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.

Gmaster_mybb_import8349 7 Aug, 2011, 10:03 am

#10

(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.

Novedad [Tutorial] Elemento activo en la barra de navegación.