Cambiando el estilo de nuestro Link Tree (Breadcrumbs) - Estilo SMF Hispano

Started by Diego Andrés, August 06, 2013, 02:42:14 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Diego Andrés

Preguntaban por esto en algún tema de soporte...
Bueno pues es algo muy sencillo en realidad, así que empecemos...
Nota: Cambios solo para el link tree por defecto.




Index.template.php
Buscamos:
echo '
<div class="navigate_section">
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.


Reemplazamos por:
echo '
<div class="Hispano_breadcrumb">
<ul>
<li class="iconhome"><a href="'. $scripturl .'">&nbsp;&nbsp;&nbsp;&nbsp;</a></li>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.


Buscamos:
// 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>';


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

echo '
</li>';


Index.css
Buscamos:
/* 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;
}


Reemplazamos por:
/* 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;
}
/* Linktree SMF Hispano Style */
.Hispano_breadcrumb
{
height: 21px;
overflow: hidden;
width: auto;
padding:5px;
background: #fff;
border: solid 1px #dedede;
clear: both;
margin: 10px 0;
}
.Hispano_breadcrumb ul
{
margin: 0;
padding: 0;
height: 21px;

}
.Hispano_breadcrumb ul li
{
display: block;
float: left;
height: 21px;
overflow: hidden;
line-height: 21px;
margin: 0px 6px 0px 0;
padding: 0px 10px 0px 0;
font-size: .9167em;
background: url(../images/Chevron.gif) no-repeat 100% 100%;
}
.Hispano_breadcrumb ul li a
{
    color: #444;
text-decoration: none;
font-size: inherit;
font-weight: inherit;
height: 21px;
line-height: 21px;
overflow: hidden;
}
.Hispano_breadcrumb ul li a:hover
{
text-decoration: underline;
}
.Hispano_breadcrumb ul li.last
{
background: none;
margin-right: 0;
padding-right: 0;
}
.Hispano_breadcrumb ul li.last a
{
    color: #444;
text-decoration: none;
font-size: inherit;
font-weight: inherit;
}
.Hispano_breadcrumb ul li.last a:hover
{
text-decoration: none;
}
.Hispano_breadcrumb ul li.iconhome a
{
height: 16px !important;
text-indent:-1000em;
width:16px;
padding: 0;
margin-top: 2px;
overflow: hidden;
background:url(../images/IconHome.gif) no-repeat 0 0;
}
.Hispano_breadcrumb ul li.iconhome a:hover
{
background-position: 0 -16px;
text-decoration: none;
}


Y por último, subimos las imágenes adjuntas a
Themes/nuestrotheme/images/

Resultado:


Saludos!
Last Edit: August 20, 2019, 09:32:43 PM by Diego Andrés

Superior


Diego Andrés



Diego Andrés

Este es el viejo linktree, luego pondré otro tutorial con este que hemos venido usando que ya incluso lo solicitaron.