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
/* The navigation list (i.e. linktree) */
todo lo que se encuentra dentro de este comentario hasta llegar a
/* The footer wih copyright links etc. */
le da estilos a nuestro linktree o también llamado Breadcrumb
el estilo por defecto seria este
/* 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
/* 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
