News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[Personalización] Breadcrumb SMF

Started by Dhayzon, July 05, 2014, 02:10:00 PM

Previous topic - Next topic

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

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

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í



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 ;)

fapencio

moderadores moviendo este tema a tutoriales o diseño en 3,2,1
My smf forum is 2.0.10 version
my theme is default
language spanish es utf8

Diego Andrés

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.

SMF Tricks - Free & Premium Responsive Themes for SMF.

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

#4
mira  exactamente en


.navigate_section {
margin:5px 0
}


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

DSystem

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:

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



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

Advertisement: