Seleccionar idioma:
Realizar Donación - Mods Premium - Portfolio



Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.
* [TUTORIAL]Linktree estilo vbulletin
  Leído 2728 veces
* Viendo el foro
 0 Usuarios y 1 Visitante están viendo este foro.


*
Autor: uge
Ene 22 2013
Créditos a zutzu que es el autor del tema de donde saqué el código

*


Index.template.php de nuestro tema

Buscamos

Código: [Seleccionar]
// 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 ' &#38;#187;';

echo '
</li>';
}
echo '
</ul>
</div>';

$shown_linktree = true;
}

Reemplazamos

Código: [Seleccionar]
// 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, $scripturl, $link_num;

// 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>
<li class="link_home">', ($link_num == count($context['linktree']) < 1) ? '
<a href="'.$scripturl.'" title="Home"><img class="link_home" src="'.$settings['images_url'].'/theme/home.png" alt="*" /></a>' : '', '</li>';

// 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'] . '">' . $tree['name'] . '</a>' : '' . $tree['name'] . '';

// 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;
}

index.css de nuestro tema:

buscamos

Código: [Seleccionar]
/* 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:

Código: [Seleccionar]
/* The navigation list (i.e. linktree) */
.navigate_section
{
margin: 0 auto;
margin-bottom: 10px;
}
.navigate_section ul
{
display: block;
margin: 0;
padding: 3px 0 0 0;
overflow: hidden;
list-style: none;
height: 29px;
}
.navigate_section ul li
{
background: url(../images/theme/arrow.png) no-repeat 100% 50%;
float: left;
color: #737373;
padding: 0 10px 0 3px;
font-size: 12px;
margin-top: 3px;
}
.navigate_section ul li a
{
padding: 2px 4px;
text-decoration: none;
background: transparent;
    color: #737373;
border: 1px solid transparent;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.navigate_section ul li a:hover
{
background: #F6F8F9;
border: 1px solid #CEDFEB;
}
.navigate_section ul li.link_home a, .navigate_section ul li.link_home
{
padding: 0;
background: none;
border: none;
    margin-top: -2px;
}
.navigate_section ul li.link_home img
{
margin-top: 5px;
}
.navigate_section ul li.last a
{
color: #3E3E3E;
background: none;
border: 1px solid transparent;
}
.navigate_section ul li.last
{
background: none;
}

Pasamos las imágenes a tu tema/images/theme

Imágenes: http://www.smfpersonal.net/downloads.html;sa=view;down=381

Donde dice:
.navigate_section ul li.last a
{
   color: #3E3E3E;
   background: none;
   border: 1px solid transparent;

en color cambiamos el color de las letras del sitio donde nos encontramos. Es decir en el caso de la imágen que he puesto arriba se cambiarían las letras de ¡Bienvenido a SMF!

Donde dice:
.navigate_section ul li a:hover
{
   background: #F6F8F9;
   border: 1px solid #CEDFEB;
}

Podemos cambiar background al color que queramos y alteraremos el color de fondo que sale cuando tengo el ratón encima de una de las direcciones del linktree. En border: podemos cambiar #CEDFEB por el color que queramos para cambiar el color del contorno del cuadro que sale cuando tenemos el ratón encima de una de las direcciones.

En
.navigate_section ul li a

donde dice color podemos cambiar el color de las letras de fondo.

Vamos que este linktree es totalmente modificable. Mirad como lo he dejado yo al final:

*


« Última Modificación: Febrero 14, 2013, 06:43:04 am por uge »



Exelente aporte, espero que este linktree este reparado del bug que tenia ya que si mal no recuerdo cuando algun area tiene moderadores los muestra mal.

Esperemos que no sea el caso.

Saludos enik...



uge

OOPs pues no sabía nada de ese bug ya que lo hice en default y no tenía moderadores puestos. Lo miro en mi localhost dentro de un rato.




Si si checalo por favor.

Saludos enik...



uge

Efectivamente existía ese error que comentabas Enik. Ya lo he arreglado y he sustituído el arreglo en el código del post principal.

*




Excelente uge!!

Felicitaciones por el trabajo y gracias por compartirlo +10




Super xevere gracias por compartir

Saludos enik...




Me gusto mucho......  Lo encontre por casualidad, pero lo necesitaba.




muy bueno  quedo de lujo mucheas graciasss




Otros temas de su interes




Usuario:
Contraseña:
Sesión:
hermes bracelet replica, christian louboutin replica, van cleef and arpels replica, red bottoms replica, cartier love bracelet replica christian louboutin replica, christian louboutin replica, hermes bracelet replica,