Últimos temas
Tablón de Anuncios: Star
Página 1 de 1. • Comparte
Tablón de Anuncios: Star
por Cherry Vie Jul 15, 2016 4:59 pm
[
Tablón: Star
Los gatos y las estrellas dan de qué hablar
Datos de la Tablón
★El tablón cuenta con tres apartados: (Datos Importantes, censo/líderes y premiados). Queda para un foro universitario.
★Staff: 230x80px | ¿Sabías que…?: 230x120px | Clima: 185x140px | Líderes: 223x90px | Premios: 200x200px
★El código está hecho para que se le agreguen más apartados
★Staff: 230x80px | ¿Sabías que…?: 230x120px | Clima: 185x140px | Líderes: 223x90px | Premios: 200x200px
★El código está hecho para que se le agreguen más apartados
Reglas del tablón
★Está de más decir que no se puede quitar el crédito. Es pequeño y no afecta en nada.
★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="Sc2" class="Sc" style="display:block;">
<div id="tablon-tit">
Staff
</div>
<div id="tablon-caja">
<img title="nombre del staff" src="http://placehold.it/230x80" /> <br /> <img title="nombre del staff" src="http://placehold.it/230x80" /> <br /> <img src="http://placehold.it/230x80" title="nombre del staff" /> <br /> <img src="http://placehold.it/230x80" title="nombre del staff" />
</div>
<div id="tablon-tit1">
Últimos Temas
</div>
<div id="tablon-caja1">
<div id="contenedor-UltimosTemas">
</div>
</div>
<div id="tablon-t">
Links Rápidos
</div>
<div id="tablon-c">
<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> <a href="url">Link 7</a> <a href="url">Link 8</a> <a href="url">Link 9</a>
</div>
</div>
<div id="tablon-tit3">
¿Sabías que...?
</div>
<div id="tablon-caja3">
<div style="text-align: center;">
<center>
<script language="javascript">
function VecImagenes()
{
n=0;
this[n++]="http://placehold.it/230x120";
this[n++]="http://placehold.it/230x120";
this[n++]="http://placehold.it/230x120";
this[n++]="http://placehold.it/230x120";
this[n++]="http://placehold.it/230x120";
this.N=n;
}
var Imagenes=new VecImagenes();
src= Imagenes[ Math.floor(Math.random() * Imagenes.N) ] ;
document.write("<img src="+src+" align=center>");
</script>
</center>
</div>
</div>
<div id="tablon-tit4">
Clima
</div>
<div id="tablon-caja4">
<img src="http://placehold.it/185x140" />
</div>
<div id="tablon-tit5">
Reglas Generales
</div>
<div id="tablon-caja5">
Aquí van las reglas
</div>
</div>
<div id="Sc3" class="Sc" style="display:none;">
<div id="tablon-tita">
Censo
</div>
<div id="tablon-cajaa">
<div id="gr1">
Grupo: 00
</div>
<div id="gr2">
Grupo: 00
</div>
<div id="gr3">
Grupo: 00
</div>
<div id="gr4">
Grupo: 00
</div>
<div id="gr5">
Grupo: 00
</div><br />
<div id="gr6">
Grupo: 00
</div>
<div id="gr7">
Grupo: 00
</div>
<div id="gr8">
Grupo: 00
</div>
<div id="gr9">
Grupo: 00
</div>
<div id="gr10">
Grupo: 00
</div>
</div>
<div id="tablon-titb">
Líderes
</div>
<div id="tablon-cajab">
<img src="http://placehold.it/223x90" /> <img src="http://placehold.it/223x90" /> <img src="http://placehold.it/223x90" /> <img src="http://placehold.it/223x90" /> <br /><br /><img src="http://placehold.it/223x90" /> <img src="http://placehold.it/223x90" /> <img src="http://placehold.it/223x90" /> <img src="http://placehold.it/223x90" />
</div>
</div>
<div id="Sc4" class="Sc" style="display:none;">
<div id="tablon-tita">
Premiados
</div>
<div id="tablon-color">
<div id="tablon-cajaz">
<marquee onmouseout="this.start();" onmouseover="this.stop();">
<div id="premio-caja">
<div id="premio-img" style="background: url('http://placehold.it/200x200')center">
</div>
<div id="premio-nom">
nombre del pj
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div style="background: url('http://placehold.it/200x200')center" id="premio-img">
</div>
<div id="premio-nom">
nombre del pj
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div style="background: url('http://placehold.it/200x200')center" id="premio-img">
</div>
<div id="premio-nom">
nombre del pj
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div style="background: url('http://placehold.it/200x200')center" id="premio-img">
</div>
<div id="premio-nom">
nombre del pj
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div style="background: url('http://placehold.it/200x200')center" id="premio-img">
</div>
<div id="premio-nom">
nombre del pj
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div style="background: url('http://placehold.it/200x200')center" id="premio-img">
</div>
<div id="premio-nom">
nombre del pj
</div>
<div id="premio-cat">
categoria
</div>
</div>
<div id="premio-caja">
<div style="background: url('http://placehold.it/200x200')center" id="premio-img">
</div>
<div id="premio-nom">
nombre del pj
</div>
<div id="premio-cat">
categoria
</div>
</div>
</marquee>
</div>
</div>
</div>
</div>
<div id="botones">
<div id="Sb2" class="Sb">
</div>
<div id="Sb3" class="Sb">
</div>
<div id="Sb4" class="Sb">
</div>
</div><br />
<div align="center">
<a href="http://foropetalhoney.foroactivo.mx/">♣</a>
</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 {
height:390px;
background: #ECE9F2;
padding: 10px;
margin: auto;
position: relative;
right: 10px; /* 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 */
}
#botones {
text-align:center; /*CSS base*/
width: 950px;
height: 20px;
margin-left: 8px;
}
#botones div {
display: inline-block;/*CSS base*/
opacity: 0.9;
}
.Sb.selected {
background-color: white; /*CSS base*/
opacity: 1;
}
.Sb {
background: none repeat scroll 0 0 #666666;/*CSS base*/
border: 4px solid #666666;/*CSS base*/
border-radius: 50% 50% 50% 50%;/*CSS base*/
margin-top: 10px;
padding: 3px;/*CSS base*/
}
#SCont {
margin-left: 20px;
margin-top: -10px;
border: 10px solid #1C163C;
}
#SCont > div {
background-image: url(http://i.imgur.com/VKgOVoh.gif);
width: 920px;
height: 360px;
padding: 0px;
margin-left: 0px
background: #D9C5AC;
}
.Sc{
height: 400px;
margin-top: -10px;
}
#tablon-tit, #tablon-t, #tablon-tit1, #tablon-tit3, #tablon-tit4, #tablon-tit5 {
width: 230px;
padding: 5px;
background: #1C163C;
margin-top: 10px;
margin-left: 0px;
margin-bottom: 10px;
line-height: 20px;
font-size: 12px;
letter-spacing: 2px;
color: #F3F2ED;
font-family: 'Unica One';
text-transform: uppercase;
text-align: center;
text-decoration: none;
font-weight: lighter;
}
#tablon-t {
margin-top: -360px;
margin-left: 480px;
}
#tablon-tit1 {
margin-top: -360px;
margin-left: 240px;
}
#tablon-tit3 {
margin-top: 0px;
margin-left: 480px;
}
#tablon-tit4 {
width: 190px;
margin-top: -360px;
margin-left: 720px;
}
#tablon-tit5 {
width: 190px;
margin-top: 0px;
margin-left: 720px;
}
#tablon-caja, #tablon-c, #tablon-caja1, #tablon-caja3,#tablon-caja4,#tablon-caja5 {
width: 230px;
height: 320px;
overflow: auto;
padding: 5px;
background: #ECE9F2;
opacity: 0.9;
line-height: 13px;
font-size: 12px;
font-family: 'arial';
text-align: justify;
display: inline-block;
margin: 0px;
margin-top: -10px;
}
#tablon-caja1 {
margin-left: 240px;
margin-top: -10px;
}
#tablon-c {
height:155px;
margin-left: 480px;
margin-top: -10px;
}
#tablon-caja3 {
height:125px;
margin-left: 480px;
margin-top: -10px;
}
#tablon-caja4 {
width: 190px;
height:155px;
margin-left: 720px;
margin-top: -10px;
}
#tablon-caja5 {
width: 190px;
height:125px;
margin-left: 720px;
margin-top: -10px;
}
.link a {
display:inline-block;
width: 225px;
height: 8px;
margin-right: 10px;
margin-bottom: 2px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 8px;
line-height: 100%;
background: #564847;
color: #fff;
padding-top: 3px;
padding-bottom: 3px;
letter-spacing: 1px;
}
/******Parte 2 del tablón********/
#tablon-tita, #tablon-titb {
width: 910px;
padding: 5px;
background: #1C163C;
margin-top: 10px;
margin-left: 0px;
margin-bottom: 10px;
line-height: 20px;
font-size: 12px;
letter-spacing: 2px;
color: #F3F2ED;
font-family: 'Unica One';
text-transform: uppercase;
text-align: center;
text-decoration: none;
font-weight: lighter;
}
#tablon-titb {
margin-top: 0px;
}
#tablon-cajaa, #tablon-cajab {
width: 910px;
height: 80px;
overflow: auto;
padding: 5px;
background: #ECE9F2;
opacity: 0.9;
line-height: 13px;
font-size: 12px;
font-family: 'arial';
text-align: justify;
display: inline-block;
margin: 0px;
margin-top: -10px;
}
#tablon-cajab {
height: 200px;
margin-top: -10px;
}
#gr1, #gr2, #gr3, #gr4, #gr5, #gr6, #gr7, #gr8, #gr9, #gr10 {
width: 168px;
height: 25px;
margin: 1px 0px;
padding: 5px;
display: inline-block;
font-family: 'Arial';
font-size: 12px;
line-height: 26px;
color: #fff;
text-align: center;
}
#gr1 {background: #CE27A3;}
#gr2 {background: #BD1A1A;}
#gr3 {background: #9249AD;}
#gr4 {background: #3434DB;}
#gr5 {background: #268016;}
#gr6 {background: #D67703;}
#gr7 {background: #16807B;}
#gr8 {background: #10ADC9;}
#gr9 {background: #806037;}
#gr10 {background: #CFC72C;}
/*****Tablon parte 3******/
#caja-color {
width: 910px;
height: 320px;
}
#tablon-cajaz {
width: 910px;
height: 320px;
overflow: auto;
padding: 5px;
background: #ECE9F2;
opacity: 0.9;
line-height: 13px;
font-size: 12px;
font-family: 'arial';
text-align: justify;
display: inline-block;
margin: 0px;
margin-top: -10px;
}
#premio-caja {
display: inline-block;
width: 200px;
height: 310px;
overflow: hidden;
}
#premio-img {
width: 200px;
height: 200px;
margin-top: 35px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#premio-nom, #premio-cat {
width: 200px;
padding: 0px 5px;
line-height: 20px;
font-size: 15px;
font-family: 'verdana';
color: #000;
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");
});
});
jQuery(function () {
jQuery(".headerbar .inner").append(jQuery("#tablon-header"));
});
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