[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:

			<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: #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:

#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:

   <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:

<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:

#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:

   <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:

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