Publicidad

Autor Tema: Elementos de navegación estilo breadcrumb  (Leído 168 veces)

Desconectado marcatsol

  • Jr. Member
  • **
  • Mensajes: 81
  • Power: 19
  • Sexo: Masculino
  • Vamos con todo spirate 2.4
    • Ver Perfil
    • Spirate 2.4 Muy Pronto!!!
    • Email
Elementos de navegación estilo breadcrumb
« en: Enero 13, 2012, 10:20:22 pm »
bueno amigos spirateros aqui les dejo una orientacion para sus usarios (al estilo breadcrum), una barra de navegacion donde muestra sesion donde se encuentran actualmente el user.

Un ejemplo:
Un modelo de breadcrum podría ser:
Página principal > Sección 1 > Subsección A > Página de productos > Ficha de Producto

Buscan esto del index.template.php
Código: [Seleccionar]
ssi_categorias(); echo'</span></div></div>';

luego abajo agregan esto:

Código: [Seleccionar]
echo'

<div id="mainbody" style="margin-top:3px;">
<div class="container">
<div id="body_structure">
<table cellpadding=0 CELLSPACING=0>
<tbody><tr>
<td id="templantecontainer" valign="top" style="margin-top:-1px">
<div class="acciones" style="margin-top: 0px;"><ul>

<li class="first home">
<a href="'.$url.'" title="'.$context['forum_name'].'"><img alt="" src="',$settings['images_url'],'/home.png" style="margin-top:8px"></a></li>
<li><a href="'.$url.'" title="'.$context['forum_name'].'"><font size="3px"font color="#00aaff">&raquo;</font> '.$context['forum_name'].'</a></li>
                <li><a href="'.$context['page_url'].'"> <font size="3px"font color="#00aaff">&raquo;</font> '.$context['page_title'].'</a></li>

<li class="last"></li>
';


Este code lo dejan al final de su css, estilo-spirate.css (este archivo lo encuentran al theme que esten usando)
Código: [Seleccionar]

/* Barra de navegacion */
.acciones{height:31px;float:left;width:100%;margin:0 0 2px 0;}
.acciones ul,.acciones ul li,.acciones ul li.first,.acciones ul li.last,.acciones ul li a.home{font-family:Arial,Verdana,sans-serif;background-image:url('images/nav_post.gif');background-repeat:no-repeat;list-style-type:none;}
.acciones ul{margin:0 0 15px 0;width:100%;height:31px;float:left;padding:0;background-position:left -62px;background-repeat:repeat-x;text-shadow:0 1px 0 #fff;overflow:hidden;}
.acciones ul li{font-size:8.5pt;float:left;overflow:hidden;white-space:nowrap;line-height:31px;padding:0 0 0 18px;height:31px;background-position:left 0;color:#7e8fb0;}
.acciones ul li a.home{float:left;height:31px;width:16px;background-position:left -124px;}
.acciones ul li a.home:hover{background-position:left -155px;}
.acciones ul li.first{padding:0 0 0 8px;height:31px;background-position:left -31px;}
.acciones ul li.last{float:right;padding:0 3px 0 3px;background-position:left -93px;}
.acciones ul li a{font-weight:bold;color:#333;height:31px;display:inline-block;}
.acciones ul li a:hover{color:#000000;}
/* Fin Barra Navegacion */


aclaro esto:
estaba posteado uno pero para el display.template.php y esto va dentro del index.template.php.

Espero y les guste!  @.@
Saludos
« última modificación: Enero 13, 2012, 10:29:38 pm por marcatsol »

Desconectado anferro

  • SPmaniaco
  • *******
  • Mensajes: 2691
  • Power: 70
  • Sexo: Masculino
    • Ver Perfil
    • Email
Re:Elementos de navegación estilo breadcrumb
« Respuesta #1 en: Enero 13, 2012, 11:11:21 pm »
Buen aporte men!
Made in colombia papa!
Gana Dinero Rapido Facil y Efectivo!
@anferro007
Gana $ Con tus Tweet's

Se supone que aquí debo poner algo interesante xdgdfgdgljgdlfgjdff

Desconectado Cuartetero1

  • Hero Member
  • *****
  • Mensajes: 838
  • Power: 243
  • Sexo: Masculino
    • Ver Perfil
    • Cuarte Themes
    • Email
Re:Elementos de navegación estilo breadcrumb
« Respuesta #2 en: Enero 13, 2012, 11:53:10 pm »
Muy buen aporte! Gracias!


Desconectado kakashisensei6

  • Jr. Member
  • **
  • Mensajes: 51
  • Power: 1
  • Sexo: Masculino
    • Ver Perfil
    • Titan Post
    • Email
Re:Elementos de navegación estilo breadcrumb
« Respuesta #3 en: Enero 14, 2012, 02:45:41 am »
Buenisimo  aporte men gracias por compartirlo

Espero y les Gusten mis Aportaciones :D al 100 Compas