¡Hola a todos!
Veamos, pues esta vez vengo a traeros un tutorial con el que aprenderéis a poner pestañas en la parte del foro que querais (portal, perfiles, etc). Para ello usaré unas simples pestañas con HTML/CSS y jQuery. Gracias al jQuery conseguiremos un efecto de desvanicimiento al cambiar de pestaña.
Como ejemplo pondré cómo poner las pestañas en el portal, pero podrán ser puestas en cualquier otra parte del foro. Para conseguir esto seguid estos supersencillos pasos y lo lograréis:
1) Vas a la pestaña de "Estilos y plantillas" dentro del panel de administración. En la opción de "Estilos" escojes el tema en el que quieres poner las pestañas. Una vez seleccionado el estilo, haz click en "Agregar hoja de estilo". En "Nombre del archivo" pondrás pestanas.css y en "Adjunto a" tendrás dos opciones:
- Marcarás la opción de "Globalmente". (Si sabes, dale un mejor uso con los archivos específicos.)
- Marcarás la opción de "Escribir mi propio código", donde pondrás el siguiente código:
2) Como en este ejemplo queremos poner las pestañas en el portal, vas a la plantilla llamada portal y añades este código. Prerentemente justo antes del {$headerinclude}.
3) Ahora ya solo queda añadir las pestañas donde quieres que salgan. En este caso reemplazaremos el {$announcements} de la plantilla portal por el siguiente código:
[spoiler=Código simplificado (para tomar como base)][/spoiler]
El resultado será el siguiente:
[attachment=1937] [attachment=1938] [attachment=1939]
Bueno, pues con esto ya está, tutorial terminado. Espero que quedase todo claro.
Licencia (CC BY-NC-ND 3.0)
Este tutorial se encuentra bajo una licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported.
Autor de esta guía: nentab de SoporteMyBB.
Si deseas publicarlo en otros sitios tendrás que publicar la licencia y la autoría.
Veamos, pues esta vez vengo a traeros un tutorial con el que aprenderéis a poner pestañas en la parte del foro que querais (portal, perfiles, etc). Para ello usaré unas simples pestañas con HTML/CSS y jQuery. Gracias al jQuery conseguiremos un efecto de desvanicimiento al cambiar de pestaña.
Como ejemplo pondré cómo poner las pestañas en el portal, pero podrán ser puestas en cualquier otra parte del foro. Para conseguir esto seguid estos supersencillos pasos y lo lograréis:
1) Vas a la pestaña de "Estilos y plantillas" dentro del panel de administración. En la opción de "Estilos" escojes el tema en el que quieres poner las pestañas. Una vez seleccionado el estilo, haz click en "Agregar hoja de estilo". En "Nombre del archivo" pondrás pestanas.css y en "Adjunto a" tendrás dos opciones:
- Marcarás la opción de "Globalmente". (Si sabes, dale un mejor uso con los archivos específicos.)
- Marcarás la opción de "Escribir mi propio código", donde pondrás el siguiente código:
Código:
ul.pestanas {
margin-top: 13px;
margin-bottom: 10px;
width: 100%;
padding: 0;
margin: 0;
height: 26px;
list-style: none;
}
ul.pestanas li {
float: left;
padding-right: 5px;
margin-top: -2px;
}
ul.pestanas li a {
float: left;
display: block;
height: 20px;
font-family: Lucida Grande, Segoe UI, Trebuchet MS, Verdana, Sans-Serif;
letter-spacing: -1px;
font-size: 15px;
color: #AAA;
margin-top: 2px;
padding: 3px 8px 2px 8px;
background: #f7f7f7;
border: 1px solid #CCC;
border-bottom: 0;
}
ul.pestanas li a:hover {
background: #f1f1f1;
text-decoration: none;
}
ul.pestanas li.activa {
margin-top: -8px;
position: relative;
z-index: 2;
}
ul.pestanas li.activa a {
color: #666;
font-weight: bold;
font-size: 17px;
padding-top: 6px;
border-bottom: 0;
background: #efefef;
height: 24px;
}
.pestana_contenedor {
background: #efefef;
padding: 8px 10px 8px;
font-size: 95%;
border: 1px solid #CCC;
}
.pestana_contenido {
padding: 10px;
font-size: 1.2em;
}
2) Como en este ejemplo queremos poner las pestañas en el portal, vas a la plantilla llamada portal y añades este código. Prerentemente justo antes del {$headerinclude}.
Código:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(".pestana_contenido").hide();
jQuery("ul.pestanas li:first").addClass("activa").show();
jQuery(".pestana_contenido:first").show();
jQuery("ul.pestanas li").click(function() {
jQuery("ul.pestanas li").removeClass("activa");
jQuery(this).addClass("activa");
jQuery(".pestana_contenido").hide();
var pestanaactiva = jQuery(this).find("a").attr("href");
jQuery(pestanaactiva).fadeIn();
return false;
});
});
</script>
3) Ahora ya solo queda añadir las pestañas donde quieres que salgan. En este caso reemplazaremos el {$announcements} de la plantilla portal por el siguiente código:
Código:
<ul class="pestanas">
<li><a href="#pestana_announcements">Anuncios</a></li>
<li><a href="#pestana_latestthreads">Últimos temas</a></li>
<li><a href="#pestana_3">Pestaña 3</a></li>
</ul>
<div class="pestana_contenedor">
<div id="pestana_announcements" class="pestana_contenido">
{$announcements}
</div>
<div id="pestana_latestthreads" class="pestana_contenido">
{$latestthreads}
</div>
<div id="pestana_3" class="pestana_contenido">
Contenido 3
</div>
</div>
[spoiler=Código simplificado (para tomar como base)]
Código:
<ul class="pestanas">
<li><a href="#pestana_1">Pestaña 1</a></li>
<li><a href="#pestana_2">Pestaña 2</a></li>
<li><a href="#pestana_3">Pestaña 3</a></li>
</ul>
<div class="pestana_contenedor">
<div id="pestana_1" class="pestana_contenido">
Contenido de la pestaña 1
</div>
<div id="pestana_2" class="pestana_contenido">
Contenido de la pestaña 2
</div>
<div id="pestana_3" class="pestana_contenido">
Contenido de la pestaña 3
</div>
</div>
El resultado será el siguiente:
[attachment=1937] [attachment=1938] [attachment=1939]
Bueno, pues con esto ya está, tutorial terminado. Espero que quedase todo claro.
Licencia (CC BY-NC-ND 3.0)
Este tutorial se encuentra bajo una licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported.
Autor de esta guía: nentab de SoporteMyBB.
Si deseas publicarlo en otros sitios tendrás que publicar la licencia y la autoría.
Última modificación: 1 Aug, 2011, 5:35 am por Cluster.