Linktree tipo LGF (SMF Hispano V5) [Nuevo]

Started by Diego Andrés, November 03, 2013, 02:46:37 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Diego Andrés

Hace un tiempo que pidieron este tutorial, aquí se los dejo  ;D
Recuerden que el tutorial como siempre, está basado en el theme default.



Index.template.php:

Buscar:
// 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"' : '', '>';


Reemplazar con:
// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
', ($link_num == count($context['linktree']) - 1) ? '<li class="last"><div class="lt_wrapper"><div class="lt_last"></div><div class="lt_midle">' : '<li><div class="lt_wrapper"><div class="lt_last"></div><div class="lt_midle">', '';


Buscar:
// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo ' »';

echo '
</li>';

Reemplazar con:
// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo '';

echo '
</div><div class="lt_first"></div></div></li>';





Index.css

Buscar:
/* 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;
}

Reemplazar con:
/* The navigation list (i.e. linktree) */
.lt_wrapper
{
    float: left;
    margin-left: -12px;
}
.lt_first
{
    background: url("../images/theme/linktree.png") no-repeat scroll right -66px transparent;
    float: left;
    height: 25px;
    margin: 0;
    width: 18px;
    margin: 0;
}
.lt_midle
{
    background: url("../images/theme/linktree.png") repeat-x scroll 0 -4px transparent;
    float: left;
    height: 25px;
    margin: 0;
    margin: 0;
    padding-left: 7px;
    padding-right: 4px;
    line-height: 24px;
    color: #bbb;
}
.lt_last
{
    background: url("../images/theme/linktree.png") no-repeat scroll left -66px transparent;
    height: 25px;
    margin: 0;
    padding-left: 0px;
    width: 15px;
    float: left;
    }
.navigate_section li.last .lt_first
{
    background: url("../images/theme/linktree.png") no-repeat scroll right -98px transparent;
}
.navigate_section li.last .lt_midle
{
    background: url("../images/theme/linktree.png") repeat-x scroll 0 -35px transparent;
    color: #222;

}
.navigate_section li.last .lt_last
{
    background: url("../images/theme/linktree.png") no-repeat scroll left -98px transparent;   
}
.navigate_section li:hover a:hover span, .navigate_section li:hover
{
    color: #fd9;
}
.navigate_section ul li:hover a
{
    color: #fd9;
text-decoration: none;
}
.folder_linktree
{
margin-right: 4px;
}
.navigate_section
{
padding: 0 0 0 0;
margin: 0 1px;
    background: none;
    border-top: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.navigate_section ul
{
display: block;
margin: 0 -1px -1px;
font-size: 0.9em;
padding: 0;
overflow: hidden;
list-style: none;
clear: both;
width: auto;
border: 1px solid #2e2e2e;
background: rgba(32, 32, 32, 0.5);
    border-radius: 0 3px 0 0;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}
.navigate_section ul li
{
font-size: 0.9em;
font-weight: bold;
    display: inline;
}
.navigate_section ul li.last
{
    display: inline;
    font-size: 0.9em;
font-weight: normal;
}
.navigate_section ul li a
{
white-space: normal;
    color: #aaa;
}
.navigate_section ul li span
{
white-space: normal;
    color: #aaa;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4);
}
.navigate_section ul li a span
{
white-space: normal;
    color: #aaa;
}





Imagen

Solo ocupamos una imagen, la cual es linktree.png, la pueden encontrar en el archivo zip adjunto.
Hay que colocar la imagen linktree.png en Themes/{theme_actual}/images/theme/.

PSD incluído por si quieren modificar la imagen más fácilmente.




Espero que les haya gustado el tutorial.
Last Edit: August 20, 2019, 09:32:50 PM by Diego Andrés

Arnau

Excelente tutorial Diego se ve mejor a mi parece que el linktree del Bluez..

Muchas gracias, cumpliste tu promesa  ::).
Last Edit: November 04, 2013, 12:13:18 PM by Silver