Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


[TABLON DE ANUNCIOS] OUAT

Ver el tema anterior Ver el tema siguiente Ir abajo

[TABLON DE ANUNCIOS] OUAT

Mensaje por Mikae el Dom Mar 13, 2016 6:50 pm


Reglamento

♥ No se acepta el divulgar los códigos en otras partes, me refiero a copiar y pegar el código y hacerlo pasar como tuyo.
♥ Para obtener el código debes postear con el Link directo + Captura, totalmente obligatorio.
♥ Queda prohibido totalmente remover o hacer mas pequeño el link del crédito.
♥ No se puede utilizar esta tablilla como base para crear otras.
Información

Para ver la preview y el código pasar cursor sobre los enunciandos "Previsualización" "Código".
♥ Los colores se pueden modificar libremente, pero no el modelo.
♥ Contiene pestañas js (Awards, Ambientación, Tramas)
♥ Staff hover, últimos temas.

Previsualización
Click a la imagen para ver en tamaño real.





Código

Spoiler:
CSS
Código:
/*Hover imágenes*/#tabli:hover {
  opacity: 100;
  transition: .3s all ease-in-out;
  transition-delay: .3s;
  transition-duration: .3s;
}
#left { display:none; }
#tabli {
  color: #FFF;
  font-family: arial;
  font-size: 9px;
  height: 80px;
  letter-spacing: 2px;
  line-height: 145%;
  opacity: 0;
  overflow: hidden;
  padding: 15px;
  text-align: justify;
  transition: .3s all ease-in-out;
  transition-delay: .3s;
  transition-duration: .3s;
  width: 70px;
}
/*Cajas de js*/
.cnt1 {margin:5px;height: 100px;
    overflow: auto;
}.cnt2{
display:none;
    margin:5px;height: 100px;
    overflow: auto;
}
.cnt3{
display: none;margin:5px;height: 100px;
    overflow: auto;
}.pestañas li{
display: inline-block;
margin-left: 10px;
}
.pestañas, .credito {
  display: block;background:#542442;
}
.btn1, .btn2, .btn3 {
    display: block;
    border-bottom: 1px solid #fff;
    font-family: calibri;
    font-size: 10px;
    letter-spacing: 2px;
    padding: 3px;
    text-align: center;
    margin: 3px;
    text-transform: uppercase;
    color: #fff;
    width: 94px;
}
/*caja principal*/
#cajatab {
      width: 900px;
  height:300px;overflow:hidden;
background: -webkit-linear-gradient(#172C44, #542442) no-repeat fixed center center;
}
/*las otras cajitas*/
.tab1 {width:200px;
background:#fff;height:250px;margin:5px;padding:2px;}
.tabname {
  border-bottom: 70px solid #172C44;
  border-left: 60px solid transparent;
  height: 0;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 80px;
  text-transform: uppercase;
  width: 145px;margin-top:-75px;position:relative;display:block;    font-family: oswald;margin-left:5px;color:#fff;
}
.nom {
  width:650px; background:#172C44;padding:5px;margin:5px  -5px;display:block;text-align:center;font:12px oswald;text-transform:uppercase;letter-spacing:1px;line-height:10px;border-right:250px solid #542442;color:#fff;
}
.nom a {
    background: #542442;
    border-radius: 300px;
    font-family: oswald;
    font-size: 11px;
    padding: 5px;
    height: 10px;
    width: 10px;
    color: #FFF;
    display: inline-block;
}
#tabli a {
    background: #172C44;
    color: #FFF;
    display: block;
    font-family: oswald;
    font-size: 13px;
    margin: 2px;
    padding: 5px;
    width: 50px;
}
 
.tab2 {width:660px;
background:#fff;height:85px;margin:5px;padding:2px;}
.tab3 {width:660px;
background:#fff;height:150px;margin:5px;padding:2px;}
HTML
Código:
<center><div id="cajatab"><table><tbody><tr><td><div class="tab1"><div style="width:180px;height:220px;text-align:justify;margin:5px;padding:5px;font:12px arial;line-height:100%;overflow:auto;">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatm. </div></div><div class="tabname">Ambientación del foro</div></td><td><div class="tab2"><table><tbody><tr><td><div style="width:50px;height:80px;background:#542442;font-family:oswald; font-size:15px;text-align:center;color:#fff;text-transform:uppercase;line-height:80px;">Staff</div></td><td><div style="width:100px;height:80px;background: url(http://placehold.it/100x80);overflow:hidden;"><div id="tabli"><a href="/">MP</a> <a href="/">Perfil</a></div></div></td><td><div style="width:100px;height:80px;background: url(http://placehold.it/100x80);"><div id="tabli"><a href="/">MP</a> <a href="/">Perfil</a></div></div> </td><td><div style="width:100px;height:80px;background: url(http://placehold.it/100x80);"><div id="tabli"><a href="/">MP</a> <a href="/">Perfil</a></div></div></td><td><div style="width:100px;height:80px;background: url(http://placehold.it/100x80);"><div id="tabli"><a href="/">MP</a> <a href="/">Perfil</a></div></div></td><td><div style="width:185px;height:60px;background:#172C44;font-family:oswald; font-size:15px;text-align:center;color:#fff;text-transform:uppercase;"><br />Verano 23°<br /><span style="font-size:11px;letter-spacing:1px;">Epoca/Tiempo del foro</span></div><div style="background: #000; color: white;width: 179px;padding:3px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;"><a style="font: 10px calibri; text-transform: uppercase; letter-spacing: 2px; color: #fff;text-align: center;text-decoration: none;" href="http://sourcecode.foroactivo.com/u911">mikae for SC</a> <a style="font: 10px calibri; text-transform: uppercase; letter-spacing: 2px; color: #fff;text-align: center;text-decoration: none;" href="http://paradiseinhell.foroactivo.com/">and PH</a></div></td></tr></tbody></table></div><div class="tab3"><div style="width:180px;height:130px;text-align:justify;margin:5px;padding:5px;font:12px arial;line-height:100%;overflow:hidden;"><div id="tituloultimostemas"><div id="cajitatemas"></div><script>jQuery(document).ready(function(){
jQuery("#cajitatemas").replaceWith(jQuery("#comments_scroll_div"));});</script></div></div><div style="width:450px;height:120px;text-align:justify;margin:5px;padding:5px;font:12px arial;line-height:100%;overflow:hidden;margin-left:200px;margin-top:-145px;"><div class="pestañas"><ul> <li class="btn1">Tramas</li><li class="btn2">Ambientación</li><li class="btn3">Awards</li></ul></div><div class="cnt1">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat </div><div class="cnt2">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat i</div><div class="cnt3"><table><tbody><tr><td><div style="width: 100px; height: 80px; background-image:url(http://placehold.it/100x80);overflow: hidden;"><div id="tabli">Nombre del ganador</div></div><div style="background: #000; color: white;width: 100px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;"> PJ más caguaii </div></td><td><div style="width: 100px; height: 80px; background-image:url(http://placehold.it/100x80);overflow: hidden;"><div id="tabli">Nombre del ganador</div></div><div style="background: #000; color: white;width: 100px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;">PJ más sensual</div></td><td><div style="width: 100px; height: 80px; background-image:url(http://placehold.it/100x80);overflow: hidden;"><div id="tabli">Nombre de Personaje</div></div><div style="background: #000; color: white;width: 100px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;">Mejor roler</div></td><td><div style="width: 100px; height: 80px; background-image:url(http://placehold.it/100x90);overflow: hidden;"><div id="tabli">Nombre de Personaje</div></div><div style="background: #000; color: white;width: 100px;font: 11px calibri; tex-transform uppercase; text-transform: uppercase;text-align: center;">Mejor user</div></td></tr></tbody></table></div><div style="width:200px;padding:5px;">holi</div></div></div></td></tr></tbody></table><div class="nom"> Nombre del sensual foro  -    <a href="/">1</a> <a href="/">2</a>   <a href="/">3</a>   <a href="/">4</a> <a href="/">5</a>   <a href="/">6</a>   <a href="/">7</a> <a href="/">8</a></div></div><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:300" />
</center>
JS
Código:
$(document).ready(function(){
$('.btn1').click(function () {$('.cnt1').fadeIn(200);$('.cnt2, .cnt3').fadeOut(200)});
$('.btn2').click(function () {$('.cnt2').fadeIn(200);$('.cnt1, .cnt3').fadeOut(200)});
$('.btn3').click(function () {$('.cnt3').fadeIn(200);$('.cnt1, .cnt2').fadeOut(200)});
});


#tablondeanuncios


Última edición por Mikae el Miér Jun 29, 2016 9:35 pm, editado 6 veces
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLON DE ANUNCIOS] OUAT

Mensaje por Psycho el Vie Mar 25, 2016 12:38 pm

Me gustaría usarlo para este foro: http://crh.forumcommunity.net/
Cuando lo tenga listo edito esta publicación y añado la captura <3
Muchas graciasss Very Happy
avatar
Psycho

Mensajes : 3

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLON DE ANUNCIOS] OUAT

Mensaje por Mikae el Vie Mar 25, 2016 1:20 pm

Psycho escribió:Me gustaría usarlo para este foro: http://crh.forumcommunity.net/
Cuando lo tenga listo edito esta publicación y añado la captura <3
Muchas graciasss Very Happy

Lamento las molestías, ya añadí el código Very Happy
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLON DE ANUNCIOS] OUAT

Mensaje por Sarisha el Miér Mayo 25, 2016 6:10 am

Me gustaría usarlo en este foro: http://waroftime.foroactivo.com en seguida me pondré a trabajar en ello >w<

EDIT: Ya está puesto, pero hay alguna forma de cambiar el alto de el "cartelito" de ambientación del foro? pata que no se coma tantas lestras y no tener que abusar de los saltos de lineas digo xD
avatar
Sarisha

Mensajes : 15

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLON DE ANUNCIOS] OUAT

Mensaje por Mikae el Jue Mayo 26, 2016 7:59 pm

Sarisha escribió:Me gustaría usarlo en este foro: http://waroftime.foroactivo.com en seguida me pondré a trabajar en ello >w<

EDIT: Ya está puesto, pero  hay alguna forma de cambiar el alto de el "cartelito" de ambientación del foro? pata que no se coma tantas lestras y no tener que abusar de los saltos de lineas digo xD

Después de div "tab" puedes cambiar ese height:220px por height:160px
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLON DE ANUNCIOS] OUAT

Mensaje por Menma el Lun Jun 27, 2016 9:31 pm

Hola Mikae! estaba instalando este tablon en el foro donde se piensa usar (para ver si nos es funcional y eso) y bueno, el widget de ultimos temas, parece como entrecortarse, justo al llegar a la parte de arriba, y se reinicia, de casualidad sabes por que es?

(Si necesitas que abra el foro para que puedas ver el tablon ya puesto, pues avisame, por que esta cerrado mientras lo ponemos decente para el dia de su apertura.)


EDIT: Usaremos otro tablon.
avatar
Menma

Mensajes : 2

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLON DE ANUNCIOS] OUAT

Mensaje por Candy Landy el Vie Ago 19, 2016 12:58 pm

Foro: Esta en hide. Ya que esta siendo creado.

Captura:
Spoiler:

Tengo una consulta, como bien en la imagen se ve, en la parte de Tramas,ambientación y awards el scroll sale por abajo y no al costado. Quería saber como podía arreglar eso. También note que los últimos temas no salen.
avatar
Candy Landy

Mensajes : 1

Ver perfil de usuario

Volver arriba Ir abajo

Re: [TABLON DE ANUNCIOS] OUAT

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.