[Tutorial] Barra de navegación con Breadcrumbs

RKen 31 Oct, 2011, 10:45 am

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 )

nav
nav_bit
nav_bit_active
nav_sep
nav_sep_active

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

Código:
<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:

Código:
<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:

Código:
<li>{$navbit['name']}</li>

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

Código:
/

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

Código:
/

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:

Código:
/* 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

bc_bg.png
bc_separator.png
bg-breadcrumb.png
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! Smile

DARKNESSDH 31 Oct, 2011, 4:59 pm

Buen tutorial compañero

RKen 31 Oct, 2011, 6:04 pm

Me alegro que te halla gustado Smile

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

Gracias por tu respuesta y Saludos

Ryuuseiken 31 Oct, 2011, 6:18 pm

Gracias por el tutorial Smile

(31 Oct, 2011, 6:04 pm)RKen escribió: 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!

RKen 31 Oct, 2011, 9:39 pm

(31 Oct, 2011, 6:18 pm)Ryuuseiken escribió: 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 Tongue

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!

Leandro M. 31 Oct, 2011, 11:39 pm

Lindo tutorial amigo, voy a utilizarlo Wink

RKen 1 Nov, 2011, 9:51 am

(31 Oct, 2011, 11:39 pm)[L]eazO escribió: 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.

Código:
#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.

Leandro M. 1 Nov, 2011, 1:42 pm

Rken seguí tu tutorial y me salio hermoso Wink

, pero me queda feo donde lo tengo, hay una forma de ubicarlo en el recuadro rojo que recuadré?

[Imagen: 7d6b9b2567.png]

Omar G. 1 Nov, 2011, 1:46 pm

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

{SIGNATURE_IMAGE}

Leandro M. 1 Nov, 2011, 2:31 pm

#10

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

Gracias!