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.
Excelente tutorial Diego se ve mejor a mi parece que el linktree del Bluez..
Muchas gracias, cumpliste tu promesa ::).