Buenas! vengo a traer este tutorial que en realidad lo único que hice fue extraer los datos de las plantillas del theme MyBBGamer de Aron Clifford créditos para él, el tutorial sirve para darle un efecto mas lindo a la navegación.

[attachment=1288]

En fin, vamos con el tutorial:

Dificultad: 2
Duración: 5-Minutos (creo)
Usabilidad: Dar un poco más estilo al theme de tú foro.*

• Lo que esta en ROJO o diga TUTHEME es donde tienes que cambiar/dirigirte dependiendo de tu Theme
  

Plantillas a Editar:
Plantillas de Navegación (ACP > Estilos y Plantillas > Plantillas > TUTHEME > Navegación > 1/2/3/4/5 )

1. nav
   
2. nav_bit
   
3. nav_bit_active
   
4. nav_sep
   
5. nav_sep_active
   

Editar en la plantilla > nav :
Dentro de la plantilla borrar todo lo que contiene, colocar lo siguiente y guardar:

<center><ul id="breadcrumb">
<li><a href="index.php" title="Inicio"><img src="images/TUTHEME/home_bread.png" alt="Inicio" class="home" /></a></li>
{$nav}{$activebit}
</ul>
</center>

Editar en la plantilla > nav_bit :
Dentro de la plantilla borrar todo lo que contiene, colocar lo siguiente y guardar:

<li><a href="{$navbit['url']}">{$navbit['name']}</a></li>

Editar en la plantilla > nav_bit_active :
Dentro de la plantilla borrar todo lo que contiene, colocar lo siguiente y guardar:

<li>{$navbit['name']}</li>

Editar en la plantilla > nav_sep :
Dentro de la plantilla borrar todo lo que contiene, colocar lo siguiente y guardar:

/ 

Editar en la plantilla > nav_sep_active :
Dentro de la plantilla borrar todo lo que contiene, colocar lo siguiente y guardar:

/ 

Ahora a editar el CSS
Estilos a Editar:
Global.css (ACP > Estilos y Plantillas > Estilos > TUTHEME > global.css > Editar hoja de estilo: modo avanzado )
Al final de la hoja colocas lo siguiente:

/* Breadcrumb - Editar Valores para TUTHEME */
#breadcrumb {
	width: 906px;
	color: #000;
	font: 11px Arial, Helvetica, sans-serif;
	background-image: url(images/TUTHEME/bc_bg.png);
	background-repeat: repeat-x;
	height: 30px;
	line-height: 30px;
	border: solid 1px #cacaca;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}

#breadcrumb li {
    list-style-type:none;
    float:left;
    padding-left:10px;
}

#breadcrumb a {
    height:30px;
    display:block;
    background-image:url(images/TUTHEME/bc_separator.png); 
    background-repeat:no-repeat; 
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}

.home {
    border:none;
    margin: 8px 0px;
}

#breadcrumb a:hover {
	color:#35acc5;
}

Ahora solo queda subir las imágenes:
Subir las imagenes a:
Directorio de Tu Foro > images > TUTHEME > 1/2/3/4

1. bc_bg.png
   
2. bc_separator.png
   
3. bg-breadcrumb.png
   
4. home_bread.png
   

Pack de imágenes que contiene el MyBBGamer (Estilos Blancos):
[attachment=1286]

EXTRA
Yo tengo un foro oscuro y no me vinieron mal las de MyBBGamer pero no me gustaba como quedaban, así que las cambie y también las comparto.

[attachment=1289]

Pack de imágenes que cree yo para mi foro (Estilos Oscuros):
[attachment=1287]

Si subiste todas las imágenes queda todo terminado!

* Este tutorial como está solo sirve para plantillas "fixed" si tienes algún theme que sea fluido ("fluid") necesitarás cambiar algunos valores en el CSS además de editar los mismos para que queden bien con tu estilo.

Saludos y espero que les guste!

Buen tutorial compañero

Me alegro que te halla gustado

¿Y si lo probaste, te parecio facil de hacer?

Gracias por tu respuesta y Saludos

Gracias por el tutorial

31 Oct, 2011, 6:04 pm RKen wrote:
Me alegro que te halla gustado

¿Y si lo probaste, te parecio facil de hacer?

Gracias por tu respuesta y Saludos

Para el si es fácil xd y para mí también o.o
Hay varias versiones de esa barra de navegación aunque esta está buena.
Añadir el "/" al nav_sep y nav_sep_active no lo veo necesario.
Saludos!

31 Oct, 2011, 6:18 pm Ryuuseiken wrote:
Gracias por el tutorial
Para el si es fácil xd y para mí también o.o
Hay varias versiones de esa barra de navegación aunque esta está buena.
Añadir el "/" al nav_sep y nav_sep_active no lo veo necesario.
Saludos!

De nada :thumbsup:

Jajaja si creo que la pregunta era innecesaria tratandose de alguien de tanto nivel en el foro de Soporte de MyBB-Es

Si no hace falta, pero para que no se queden en nada los que leen el tutorial, creo que si pones, "Borrar todo el contenido", se asustarian :vueltas:

Saludos!

Lindo tutorial amigo, voy a utilizarlo

31 Oct, 2011, 11:39 pm [L]eazO wrote:
Lindo tutorial amigo, voy a utilizarlo

Me alegro que te haya gustado, y espero que te sirva. Lo único que acordate de que vas a tener que cambiar los valores del CSS para que se ajuste a la navegación de tu foro.

#breadcrumb {
    width: 906px; /* Precisamente Este */
    color: #000;
    font: 11px Arial, Helvetica, sans-serif;
    background-image: url(images/TUTHEME/bc_bg.png);
    background-repeat: repeat-x;
    height: 30px;
    line-height: 30px;
    border: solid 1px #cacaca;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

Le podés poner "width: 100%" para que se ajuste a todo el ancho del container de tu foro.

Saludos.

Rken seguí tu tutorial y me salio hermoso , pero me queda feo donde lo tengo, hay una forma de ubicarlo en el recuadro rojo que recuadré?

^Quizas si intentas mover el <navigation> de la plantilla header/header_welcomeblock_member/header_welcomeblock_guest

1 Nov, 2011, 1:46 pm Sama34 wrote:
^Quizas si intentas mover el <navigation> de la plantilla header/header_welcomeblock_member/header_welcomeblock_guest

Gracias!