[Personalización] Breadcrumb SMF

[Dhayzon]

CSS Breadcrumb  SMF
"Comparto cosas que ami me gustan o creo conveniente hacerlo"

CATEGORÍA:
  Personalización
  Diseños

SECCIÓN: Breadcrumb 
  AUTOR:Dhayzon
  AUTORES ADICIONALES:
  css-tricks
  Anonimo

CAPTURAS:




echo para el thema por defecto
el código a modificar esta en el  archivo estyle css   justo debajo de la linea

Code Select Expand

/* The navigation list (i.e. linktree) */ 
todo lo que se encuentra dentro de este comentario hasta llegar a

Code Select Expand

/* The footer wih copyright links etc. */

le da estilos a nuestro linktree o también llamado Breadcrumb 
el estilo por defecto seria este

Code Select Expand

/* The navigation list (i.e. linktree) */
.navigate_section
{
padding: 0.5em;
margin: 0 0 0 0;
}
.navigate_section ul
{
display: block;
margin: 0;
font-size: 0.9em;
padding: 1em 0 0.5em 0;
border-top: 1px solid #ccc;
overflow: hidden;
list-style: none;
clear: both;
width: 100%;
}
.navigate_section ul li
{
float: left;
padding: 0 0.5em 0 0;
font-size: 0.95em;
}
.navigate_section ul li a
{
white-space: pre;
}

/* The footer wih copyright links etc. */

lo que tenemos que hacer  es simplemente remplazarlo por este otro

Code Select Expand

/* The navigation list (i.e. linktree) */
.navigate_section {
padding: 0.5em;
margin: 0;
}

.navigate_section ul {
display:block;
margin:0;
padding:0;
overflow:hidden;
list-style:none;
clear:both;
width:100%
}

.navigate_section ul li {
float:left;
font-size:11px
}

.navigate_section ul li a {
color:#fff
}

.navigate_section ul li {
color:#fff;
text-decoration:none;
padding:10px 0 10px 30px;
background:#1abc9c;
position:relative;
display:block;
float:left;
cursor:pointer
}

.navigate_section ul li:after {
content:" ";
display:block;
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:20px solid #1abc9c;
position:absolute;
top:50%;
margin-top:-50px;
left:100%;
z-index:2
}

.navigate_section ul li:before {
content:" ";
display:block;
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:20px solid #fff;
position:absolute;
top:50%;
margin-top:-50px;
margin-left:1px;
left:100%;
z-index:1
}

.navigate_section li:first-child {
padding-left:10px;
border-radius:2px 0 0 2px
}

.navigate_section ul li:hover {
background:#12273A
}

.navigate_section ul li:hover:after {
border-left-color:#12273A!important
}
/* The footer wih copyright links etc. */

el resultado seria




Actualización

para hacerlo de tu color favorito



cambiamos lo que esta en rojo por nuestro color favorito

.navigate_section ul li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 30px;
background: #1abc9c;
position: relative;
display: block;
float: left;
}{

el mismo color tendrá que llevar el borde que  esta en rojo

.navigate_section ul li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 20px solid #1abc9c;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}

uno color cambiado quedaría así



para cambiar  el color del hover al momento de pasar el mause

.navigate_section ul li a:hover {background: #12273A; }
.navigate_section ul li a:hover:after { border-left-color: #12273A !important; }

comenta si necesitas ayuda

[fapencio]

moderadores moviendo este tema a tutoriales o diseño en 3,2,1

[Diego Andrés]

moderadores moviendo este tema a tutoriales o diseño en 3,2,1

Sucede que los usuarios no pueden publicar directamente en la sección de tutoriales, entonces hay que moverlo 


Muy buen aporte, está bastante bueno el resultado, gracias por compartir.

[DSystem]

Realmente disfruté esta modificación.

Si es posible alguien me diera una pista cómo tomar esta línea que apareció justo por encima de la Breadcrump.

[Dhayzon]

mira  exactamente en

Code Select Expand


.navigate_section {
margin:5px 0
}


pon el margin:5px 0; en  0  o elimínalo..................  nada más

[DSystem]

Aquí fue así:

Code Select Expand

.navigate_section {
margin:5px 0
}

Cambió a:

Code Select Expand

.navigate_section
{
padding: 0.5em;
margin: 0 0 0 0;
}

Funcionó a la perfección. Muchas gracias 

[DSystem]

Una pregunta más.

¿Dónde puedo cambiar a hacer el Breadcrumb más fino ?

[Dhayzon]

en archivo index.template.php te tu tema  exactamente en la función linktree

Code Select Expand

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="navigate_section">
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
<li', ($link_num == count($context['linktree']) - 1) ? ' class="last"' : '', '>';

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] . '</span>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo ' »';

echo '
</li>';
}
echo '
</ul>
</div>';

$shown_linktree = true;
}


[DSystem]

No creo que entendiste culpa del traductor poo de mi pregunta. Más no podía hacer lo que quería.

Muchas gracias por su atención {dhayzon}. Terminado el ajuste de los esquemas de color.

Voy a dejar aquí los cambios que hice.

Code Select Expand

/* The navigation list (i.e. linktree) */
.navigate_section
{
padding: 0.5em;
margin: 0 0 0 0;
}

.navigate_section ul {
display:block;
margin:0;
padding:0;
overflow:hidden;
list-style:none;
clear:both;
width:100%
}

.navigate_section ul li {
float:left;
font-size:11px
}

.navigate_section ul li a {
color:#fff
}

.navigate_section ul li {
color:#fff;
text-decoration:none;
padding:5px 0 5px 30px;
background:#5a6c85;
position:relative;
display:block;
float:left;
cursor:pointer
}

.navigate_section ul li:after {
content:" ";
display:block;
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:20px solid #5a6c85;
position:absolute;
top:50%;
margin-top:-50px;
left:100%;
z-index:2
}

.navigate_section ul li:before {
content:" ";
display:block;
width:0;
height:0;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
border-left:20px solid #fff;
position:absolute;
top:50%;
margin-top:-50px;
margin-left:1px;
left:100%;
z-index:1
}

.navigate_section li:first-child {
padding-left:10px;
border-radius:2px 0 0 2px
}

.navigate_section ul li:hover {
background:#12273A
}

.navigate_section ul li:hover:after {
border-left-color:#12273A!important
}

/* The footer wih copyright links etc. */