Últimos temas
Tablón: The Beatles
Página 1 de 1. • Comparte
Tablón: The Beatles
por Cherry Mar Jul 26, 2016 7:21 pm
Tablón: The Beatles
En honor a Paul, Ringo, George y John
Datos de la Tablón
★El tablón cuenta con tres apartados: Datos Importantes (Últimos Temas, Reglas, Links y Anuncios), Staff y Premios.
★Imagen de Staff: 198x90 px. Imágenes de los premios: 90x90px
★ El código está hecho para que se le agreguen más apartados
★Imagen de Staff: 198x90 px. Imágenes de los premios: 90x90px
★ El código está hecho para que se le agreguen más apartados
Reglas del tablón
★El tablón no tiene créditos, pero me gustaría que se colocaran en alguna parte del foro.
★ Los colores y formas son modificables, pero no al grado de deformar el tablón y dejarlo irreconocible.
★Se le pueden agregar más apartados. Si tienes problemas con eso, no dudes en mandarme un mensaje a mi tumblr.
★No se puede usar como base para hacer otras tablillas, ni se puede usar sólo pequeñas partes del tablón
★Si llego a descubrir un mal uso del tablón en tu foro, te ganarás una amistosa denuncia.
★ Los colores y formas son modificables, pero no al grado de deformar el tablón y dejarlo irreconocible.
★Se le pueden agregar más apartados. Si tienes problemas con eso, no dudes en mandarme un mensaje a mi tumblr.
★No se puede usar como base para hacer otras tablillas, ni se puede usar sólo pequeñas partes del tablón
★Si llego a descubrir un mal uso del tablón en tu foro, te ganarás una amistosa denuncia.
[Solamente los administradores pueden ver esta imagen]
- HTML:
- Código:
<div id="SSlider">
<div id="SCont">
<div id="Sc1" class="Sc" style="display:block;">
<div id="tablon-tit">
Últimos Temas
</div>
<div id="tablon-caja">
<div id="contenedor-UltimosTemas">
</div>
</div>
<div id="tablon-tit1">
Reglas Principales
</div>
<div id="tablon-caja1">
Aquí van las reglas
</div>
<div id="tablon-tit2">
Links Importantes
</div>
<div id="tablon-caja2">
<div class="link">
<a href="url">Link 1</a><a href="url">Link 2</a><a href="url">Link 3</a><a href="url">Link 4</a><a href="url">Link 5</a><a href="url">Link 6</a>
</div>
</div>
<div id="tablon-tit3">
Anuncios
</div>
<div id="tablon-caja3">
Aquí van los anuncios
</div>
</div>
<div id="Sc2" class="Sc" style="display:none;">
<div id="tablon-tit4">
Staff
</div>
<div id="tablon-caja4">
<img src="http://placehold.it/198x90" title="nombre del staff1" /> <img src="http://placehold.it/198x90" title="nombre del staff2" /> <img src="http://placehold.it/198x90" title="nombre del staff3" /> <img src="http://placehold.it/198x90" title="nombre del staff4" />
<div class="link2">
<a href="url">Staff1 / MP</a><a href="url">Staff2 / MP</a><a href="url">Staff3 / MP</a><a href="url">Staff4 / MP</a>
</div>
</div>
</div>
<div id="Sc3" class="Sc" style="display:none;">
<div id="tablon-tit4">
Premios
</div>
<div id="tablon-caja4">
<marquee onmouseover="this.stop();" onmouseout="this.start();">
<div id="premio-caja">
<div style="background: url('http://placehold.it/90x90')center" id="premio-img">
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div id="premio-img" style="background: url('http://placehold.it/90x90')center">
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div id="premio-img" style="background: url('http://placehold.it/90x90')center">
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div id="premio-img" style="background: url('http://placehold.it/90x90')center">
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div id="premio-img" style="background: url('http://placehold.it/90x90')center">
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div id="premio-img" style="background: url('http://placehold.it/90x90')center">
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div id="premio-img" style="background: url('http://placehold.it/90x90')center">
</div>
<div id="premio-cat">
categoria
</div>
</div>
</marquee>
</div>
</div>
<div id="botones">
<div id="Sb1" class="Sb selected">
Datos Importantes
</div>
<div id="Sb2" class="Sb">
Staff
</div>
<div id="Sb3" class="Sb">
Premios
</div>
</div>
</div><script>jQuery(function() { var a = jQuery("#comments_scroll_div").clone(); var c = []; jQuery('.module .h3:contains("Últimos temas")').closest('.inner').find('script').each(function() { if (!jQuery(this).attr('src')) c.push('<script>'+ jQuery(this).html() + '</' + 'script>');
});
jQuery("#contenedor-UltimosTemas").replaceWith('<div id="comments_scroll_div">' + a.html() + '</div>' + c.join(" "));
jQuery(".module .inner #comments_scroll_div ").remove()
});
</script>
</div>
- CSS:
- Código:
/*****Tablón******/
#SSlider {
width:850px;
height:220px;
background-image: url(http://i.imgur.com/957Xcsq.gif);
padding: 10px;
margin: auto;
position: relative;
right: 0px; /* A 50px de distancia desde la derecha. Ajústalo a tu conveniencia */
top: 0px; /* A 50px de distancia desde la parte superior. Ajústalo a tu conveniencia */
border: 10px solid #999999;
}
#botones {
text-align:center; /*CSS base*/
}
#botones div {
display: inline-block;/*CSS base*/
}
.Sb.selected {
background-color: $44432d; /*CSS base*/
}
.Sb {
background: #999999;
display: inline-block;
font-size: 11px;
margin-bottom: 3px;
color: #fff;
font-style: arial;
font-family: arial;
text-align:center;
width: 150px;
height:15px;
padding:3px;
}
#SCont {
margin-top: 13px;
}
#SCont > div {
}
.Sc{
height: 180px;
width: 800px;
margin-top: 10px;
margin-left: 10px;
}
#tablon-tit, #tablon-tit1, #tablon-tit2, #tablon-tit3, #tablon-tit4 {
width: 190px;
padding: 5px;
background: #999999;
margin-top: 10px;
margin-left: 0px;
margin-bottom: 10px;
line-height: 20px;
font-size: 12px;
letter-spacing: 2px;
color: #000;
font-family: 'Acme';
text-transform: uppercase;
text-align: center;
text-decoration: none;
font-weight: lighter;
}
#tablon-tit1 {
margin-left: 210px;
margin-top: -176px;
}
#tablon-tit2 {
margin-left: 420px;
margin-top: -176px;
}
#tablon-tit3 {
margin-left: 630px;
margin-top: -176px;
}
#tablon-tit4 {
width: 820px;
}
#tablon-caja, #tablon-caja1, #tablon-caja2, #tablon-caja3, #tablon-caja4 {
width: 180px;
height: 121px;
background: #000;
opacity: 0.9;
text-align: justify;
color: #fff;
overflow: auto;
padding: 10px;
margin-top: -5px;
}
#tablon-caja1 {
margin-left: 210px;
}
#tablon-caja2 {
margin-left: 420px;
}
#tablon-caja3 {
margin-left: 630px;
}
#tablon-caja4 {
width: 810px;
}
.link a {
display:inline-block;
width: 180px;
height: 8px;
margin-right: 10px;
margin-bottom: 2px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 8px;
line-height: 100%;
background: #999999;
color: #fff;
padding-top: 3px;
padding-bottom: 3px;
letter-spacing: 1px;
}
.link2 a {
display:inline-block;
width: 198px;
height: 8px;
margin-right: 4px;
margin-bottom: 2px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 8px;
line-height: 100%;
background: #999999;
color: #fff;
padding-top: 3px;
padding-bottom: 3px;
letter-spacing: 1px;
}
#premio-caja {
display: inline-block;
width: 95px;
height: 110px;
overflow: hidden;
}
#premio-img {
width: 90px;
height: 90px;
margin-top: 0px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#premio-cat {
width: 85px;
padding: 0px 5px;
line-height: 20px;
font-size: 8px;
font-family: 'Acme';
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
font-weight: lighter;
}
- JAVA:
- Código:
$(document).ready(function () {
$(".Sb").click(function () {
var mid = $(this).attr("id").replace(/\D/g, '');
$(".Sb").removeClass("selected");
$(".Sc:not(#c" + mid + ")").hide();
$("#Sc" + mid).fadeIn();
$("#Sb" + mid).addClass("selected");
});
});
Cherry
Mensajes :
58
Fecha de inscripción :
15/07/2016
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.
» Tablilla Naturaleza
» Tablilla de Relaciones
» Tablilla para Galería
» Tablón: The Beatles
» Monster | Tablón
» Tablón de Anuncios: Star