Advertisement:

Author Topic: [Personalización] Breadcrumb SMF  (Read 5610 times)

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,167
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
[Personalización] Breadcrumb SMF
« on: July 05, 2014, 02:10:00 PM »
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]
/* The navigation list (i.e. linktree) */ 
 todo lo que se encuentra dentro de este comentario hasta llegar a

Code: [Select]
/* 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]
/* 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]
/* 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 ;)
« Last Edit: July 06, 2014, 11:04:50 PM by {dhayzon} »

Offline fapencio

  • Jr. Member
  • **
  • Posts: 141
  • Gender: Male
    • medilibros
Re: [Personalización] Breadcrumb SMF
« Reply #1 on: July 05, 2014, 02:33:39 PM »
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

Offline Diego Andrés

  • On Hiatus
  • SMF Hero
  • *
  • Posts: 3,361
  • Gender: Male
    • DiegoSetroc on GitHub
    • @bihgetter on Twitter
    • SMF Tricks - Free & Premium Themes
Re: [Personalización] Breadcrumb SMF
« Reply #2 on: July 06, 2014, 12:28:18 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.

Offline DSystem

  • Jr. Member
  • **
  • Posts: 238
  • Gender: Male
  • EletronicaBR - Admin
    • eletronicaBR.com
Re: [Personalización] Breadcrumb SMF
« Reply #3 on: July 06, 2014, 06:27:56 PM »
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.


Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,167
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: [Personalización] Breadcrumb SMF
« Reply #4 on: July 06, 2014, 06:51:24 PM »
mira  exactamente en

Code: [Select]
.navigate_section {
margin:5px 0
}

pon el margin:5px 0; en  0  o elimínalo..................  nada más
« Last Edit: July 06, 2014, 07:05:31 PM by {dhayzon} »

Offline DSystem

  • Jr. Member
  • **
  • Posts: 238
  • Gender: Male
  • EletronicaBR - Admin
    • eletronicaBR.com
Re: [Personalización] Breadcrumb SMF
« Reply #5 on: July 06, 2014, 07:04:23 PM »
Aquí fue así:
Code: [Select]
.navigate_section {
margin:5px 0
}

Cambió a:
Code: [Select]
.navigate_section
{
padding: 0.5em;
margin: 0 0 0 0;
}

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

Offline DSystem

  • Jr. Member
  • **
  • Posts: 238
  • Gender: Male
  • EletronicaBR - Admin
    • eletronicaBR.com
Re: [Personalización] Breadcrumb SMF
« Reply #6 on: July 06, 2014, 07:39:38 PM »
Una pregunta más.

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

Offline Dhayzon

  • Sophist Member
  • *****
  • Posts: 1,167
  • Gender: Male
  • DhayZone RevolutioN
    • Dhayzon on GitHub
    • @dhayzon on Twitter
    • http://dhayzon.com/
Re: [Personalización] Breadcrumb SMF
« Reply #7 on: July 06, 2014, 07:42:14 PM »
en archivo index.template.php te tu tema  exactamente en la función linktree
Code: [Select]
// 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;
}

Offline DSystem

  • Jr. Member
  • **
  • Posts: 238
  • Gender: Male
  • EletronicaBR - Admin
    • eletronicaBR.com
Re: [Personalización] Breadcrumb SMF
« Reply #8 on: July 06, 2014, 10:55:26 PM »
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]
/* 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. */