Simple Machines Community Forum

(http://3.bp.blogspot.com/-_2BZnw28Pq0/UMpTiOtPzKI/AAAAAAAAMlo/eixTUQ0Ngfk/s1600/dot7.png)CATEGORÍA:
  (http://3.bp.blogspot.com/-GdpDRiy2jmw/UMpTdQo93LI/AAAAAAAAMk4/eZpM9Rvhph8/s1600/dot1_2.png)Personalización
  (http://4.bp.blogspot.com/-jpfbRVFmy24/UMpTd4TQyoI/AAAAAAAAMlA/KijymcD7Shc/s1600/dot2_2.png)Diseños

(http://3.bp.blogspot.com/-_2BZnw28Pq0/UMpTiOtPzKI/AAAAAAAAMlo/eixTUQ0Ngfk/s1600/dot7.png)SECCIÓN: Breadcrumb 
  (http://3.bp.blogspot.com/-_2BZnw28Pq0/UMpTiOtPzKI/AAAAAAAAMlo/eixTUQ0Ngfk/s1600/dot7.png)AUTOR:Dhayzon
  (http://3.bp.blogspot.com/-_2BZnw28Pq0/UMpTiOtPzKI/AAAAAAAAMlo/eixTUQ0Ngfk/s1600/dot7.png)AUTORES ADICIONALES:
  (http://3.bp.blogspot.com/-GdpDRiy2jmw/UMpTdQo93LI/AAAAAAAAMk4/eZpM9Rvhph8/s1600/dot1_2.png) css-tricks
  (http://4.bp.blogspot.com/-jpfbRVFmy24/UMpTd4TQyoI/AAAAAAAAMlA/KijymcD7Shc/s1600/dot2_2.png)Anonimo

(http://4.bp.blogspot.com/-G2jedjDNbzs/UMpTfaaoZuI/AAAAAAAAMlQ/Z2cHAHqad0g/s1600/dot4.png)CAPTURAS:

(http://i.imgur.com/Prwxs9H.png)


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

(http://i.imgur.com/InVnp2f.png)


Actualización

para hacerlo de tu color favorito



cambiamos lo que esta en rojo por nuestro color favorito

Quote.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

Quote.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í

(http://i.imgur.com/1Nv8rFw.png)

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

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

comenta si necesitas ayuda ;)

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

Quote from: fapencio on July 05, 2014, 02:33:39 PM
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  :P

---

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

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.

(http://eletronicabr.com/images/dsystem/Breadcrumb.png)

mira  exactamente en


.navigate_section {
margin:5px 0
}


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

Aquí fue así:
.navigate_section {
margin:5px 0
}

Cambió a:
.navigate_section
{
padding: 0.5em;
margin: 0 0 0 0;
}

Funcionó a la perfección. Muchas gracias  :laugh:

Una pregunta más.

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

en archivo index.template.php te tu tema  exactamente en la función linktree
// 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;
}


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.

(http://eletronicabr.com/images/dsystem/Breadcrumb2.png)

/* 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. */