¡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)
![[Imagen: 80x15.png]](http://i.creativecommons.org/l/by-nc-nd/3.0/80x15.png)
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.
(25 Mar, 2011, 6:14 pm)Solstice escribió: ^^ muy bueno
PD: XD lso secretos mas grandes de abdon profin revelados O.o
Me alegro de que te haya gustado Solstice.
Y bueno, ahora ya no es que sean secretos... Bour y alguno más ya lo riperaron en varias webs, así que deja de ser "diferente", por lo que prefiero compartirlo públicamente después de tantas peticiones.
si te refieres ami, ya que yo lo tengo en mi web. tas equivocado u.u
cuando tenia gx con sqkin black evo le habia echo esa modificacioon y la descubri por dreamweaver hace 2 años}
pero ya despues cree mi codigo, aunque es bastante facil
cuando tenia gx con sqkin black evo le habia echo esa modificacioon y la descubri por dreamweaver hace 2 años}
pero ya despues cree mi codigo, aunque es bastante facil
Wow, es curioso, hace unos dias visité el foro para ver si encontraba como hacerlo, pero no lo encontré , hoy me puse a buscar como hacer las pestañas, y vaya sorpresa, me encuentro con este genial tuto en google. Muchas gracias! 
_______________
_______________
Última modificación: 26 Mar, 2011, 12:46 pm por Blink.
(26 Mar, 2011, 12:41 pm)Maurusky escribió: Wow, es curioso, hace unos dias visité el foro para ver si encontraba como hacerlo, pero no lo encontré , hoy me puse a buscar como hacer las pestañas, y vaya sorpresa, me encuentro con este genial tuto en google. Muchas gracias!
Me alegro de te sirva!
PD: Encontraste este tema buscando en Google?
(26 Mar, 2011, 12:44 pm)abdonroda escribió:(26 Mar, 2011, 12:41 pm)Maurusky escribió: Wow, es curioso, hace unos dias visité el foro para ver si encontraba como hacerlo, pero no lo encontré , hoy me puse a buscar como hacer las pestañas, y vaya sorpresa, me encuentro con este genial tuto en google. Muchas gracias!
Me alegro de te sirva!
PD: Encontraste este tema buscando en Google?
Asi es!
Una duda, uso proportal... ¿como haria para usar el block de ultimos temas en una de las pestañas?
(26 Mar, 2011, 12:46 pm)Maurusky escribió:(26 Mar, 2011, 12:44 pm)abdonroda escribió:(26 Mar, 2011, 12:41 pm)Maurusky escribió: Wow, es curioso, hace unos dias visité el foro para ver si encontraba como hacerlo, pero no lo encontré , hoy me puse a buscar como hacer las pestañas, y vaya sorpresa, me encuentro con este genial tuto en google. Muchas gracias!
Me alegro de te sirva!
PD: Encontraste este tema buscando en Google?
Asi es!
Una duda, uso proportal... ¿como haria para usar el block de ultimos temas en una de las pestañas?
Interesante.
Pues para ello tendrías que poner el siguiente código en el contenido de la pestaña que quieras:
Código:
<? include("portal_ultimostemas.php"); ?>Y entonces la raíz de tu foro añade un portal_ultimostemas.php que contenga el código del bloque del que hablas. Y recuerda que tienes que tener activado el plugin de PHP en plantillas.
Última modificación: 26 Mar, 2011, 12:50 pm por Cluster.