Staff en línea

[html] Tablilla HTML para Cabecera
Tema iniciado por y Añadir a favoritos

[html] Tablilla HTML para Cabecera 
el Lun Abr 11, 2016 6:23 am
staff


Última edición por RinC el Lun Abr 11, 2016 10:24 am, editado 1 vez
[codebox]Una tablilla sencilla para poner información en la cabecera de tu foro. Totalmente editable en los colores y tipo de fuente. No alterar dimensiones. No es necesario dar créditos pero no permito difundirla sin mi permiso.
Preview: http://codepen.io/MrDesings/pen/RaQgNN [/codebox]

Primero: Crear el div en tu plantilla. Ve a: overall_header y coloca este div justo después:
[hidecode]
Código:
<div id="cont-regi"><div class="regiLat">Tabla Title</div><div id="RegisPoppy"><div style="font: 10.4px oswald;color: #FDFDFD;background: #2D959A;padding: 5px;text-align:center;text-transform:uppercase;">TÍTULO DE LA TABLA</div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div><div id="RegisPoppy"><div style="font: 10.4px oswald;color: #FDFDFD;background: #2D959A;padding: 5px;text-align:center;text-transform:uppercase;">TÍTULO DE LA TABLA</div><div style="height: 260px; overflow: auto;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="enlace1">ENLACE 1</a></div></div><div id="RegisPoppy"><div style="font: 10.4px oswald;color: #FDFDFD;background: #2D959A;padding: 5px;text-align:center;text-transform:uppercase;">Título Tabla</div><div style="height: 260px; overflow: auto;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="enlace2">ENLACE 2</a></div></div><div id="RegisPoppy"><div style="font: 10.4px oswald;color: #FDFDFD;background: #2D959A;padding: 5px;text-align:center;text-transform:uppercase;">TÍTULO DE LA TABLA</div><div style="height: 260px; overflow: auto;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div><div id="RegisPoppy"><div style="font: 10.4px oswald;color: #FDFDFD;background: #2D959A;padding: 5px;text-align:center;text-transform:uppercase;">Título Tabla</div><div style="height: 260px; overflow: auto;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="enlace3">ENLACE 3</a></div></div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<div style="font: 10px Kurale;color: #7B6E5A;    background: #C9E4EF;    padding: 5px;    text-align: center;    text-transform: uppercase;">Tablilla de Open Source. MR Designs.</div><div id="condio"><div id="di-o1"><a href="ENLACE1" title="Descripción del enlace" class="tooltip">Enlace 1</a></div><div id="di-o2"><a href="ENLACE2" title="Descripción del enlace" class="tooltip">Enlace 2</a></div><div id="di-o3"><a href="ENLACE3" title="Descripción del enlace" class="tooltip">Enlace 3</a></div><div id="di-o4"><a href="ENLACE4" title="Descripción del enlace" class="tooltip">Enlace 4</a></div></div></div>
[/hidecode]

CSS:
[hidecode]
Código:
#cont-regi {
   color: #847764;
   width: 364px;
   font-family: arial;
   padding: 10px 10px 2px 31px;
   font-size: 11px;
   top: 5em;
   margin-left: -20px;
   position: absolute;
   background: #3FD5DC;
   text-align: justify;
   height: auto;
   z-index: 1;
}
.regiLat {
  position: absolute;
   margin-left: 16px;
   color: #3FD5DC;
   font-size: 35px;
   MARGIN-top: -45px;
   font-family: impact;
   text-transform: uppercase;
}
div#cont-regi:before {
      border-color: rgba(174, 216, 178, 0) rgba(254, 236, 211, 0) #3FD5DC rgba(169, 152, 126, 0);
   border-style: solid;
   border-width: 0px 107px 242px 6px;
   content: "";
   height: 0;
   margin-left: 90.9%;
   position: absolute;
   top: 0;
}
#RegisPoppy:hover {
   height: 203px;
   overflow-y: none;
}

#RegisPoppy {
   transition: .5s;
   height: 25px;
   overflow: hidden;
}
div#condio {
   left: 36.2em;
   margin-top: -17.5em;
   position: absolute;
}
div#condio a {
   font-family: oswald;
   padding: 1px;
   text-align: center;
   color: #FEECD3;
}
div#cont-regi:hover #di-o1 {
   margin-left: -1px;
   margin-bottom: 10px;
   transition: all 0.5s cubic-bezier(0.36, 0.13, 0, 0.81);
}
#di-o1:hover, #di-o2:hover, #di-o3:hover, #di-o4:hover {
   transform: rotate(360deg) scale(0.76) skew(1deg) translate(0px);
   -webkit-transform: rotate(360deg) scale(0.76) skew(1deg) translate(0px);
   -moz-transform: rotate(360deg) scale(0.76) skew(1deg) translate(0px);
   -o-transform: rotate(360deg) scale(0.76) skew(1deg) translate(0px);
   -ms-transform: rotate(360deg) scale(0.76) skew(1deg) translate(0px);
   transition: all 0.9s cubic-bezier(0.36, 0.13, 0, 0.81);
   background-color: #AED8B2;
   color: #7F725E;
}
div#cont-regi:hover #di-o2 {
   margin-left: -1px;
   margin-bottom: 10px;
   transition: all 0.5s cubic-bezier(0.36, 0.13, 0, 0.81);
}
div#cont-regi:hover #di-o3 {
   margin-left: -1px;
   margin-bottom: 10px;
   transition: all 0.5s cubic-bezier(0.36, 0.13, 0, 0.81);
}
div#cont-regi:hover #di-o4 {
   margin-left: -1px;
   margin-bottom: 10px;
   transition: all 0.5s cubic-bezier(0.36, 0.13, 0, 0.81);
}
#di-o1 {
   margin-left: -16px;
}
#di-o2 {
   margin-left: 11px;
}
#di-o3 {
   margin-left: 41px;
}
#di-o4 {
   margin-left: 71px;
}
#di-o1, #di-o2, #di-o3, #di-o4 {
   background: #2D959A;
   border: 1px dashed #F7F7F7;
   border-radius: 100px;
   box-shadow: 0 0 0 4px #E5ECEC, 2px 1px 6px 4px rgba(10, 10, 0, 0.07);
   color: #FEECD3;
   font-size: 12px;
   height: 39px;
   margin-bottom: 4px;
   overflow: none;
   padding: 4px;
   text-align: center;
   transition: all .9s cubic-bezier(0.02, 0.62, 0.37, 0.32);
   width: 39px;
}
[/hidecode]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Tablilla HTML para Cabecera 
el Lun Abr 11, 2016 8:57 am
staff
gracias Pau
Chalo
avatar

¿Que estoy pensando? :

Soy leyenda 3.0 [table class=fecha_up][td]Se modifico:20/11/18 - 12:05 hrs. [/td][/table]


Banner en temas :

https://coverfiles.alphacoders.com/322/32281.jpg


Color de titulos :

#fff


Sombra titulo :

0 0 1px #000


Mensajes :

6863


Puntos :

8959


Me gusta :

1031


ingreso :

17/04/2014


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://www.opensourcephpbb3.com

Volver arriba Ir abajo

Re: [html] Tablilla HTML para Cabecera 
el Mar Jul 05, 2016 11:06 pm
Gracias lo probare, se ve interesante
kuke
avatar

¿Que estoy pensando? :

diseñar y hacer amigos[table class=fecha_up][td]Se modifico:14/8/15 - 1:07 hrs.[/td][/table]


Banner en temas :

https://cherieroedirksen.files.wordpress.com/2012/11/a-new-dawn-facebook-cover.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

120


Puntos :

208


Me gusta :

40


ingreso :

27/07/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Tablilla HTML para Cabecera 
el Lun Jul 25, 2016 12:40 am
gracias por el code man
Roger
avatar

¿Que estoy pensando? :

Probando el status del foro [table class=fecha_up][td]Se modifico:9/03/17 - 9:13 hrs.[/td][/table]


Banner en temas :

http://thedesigninspiration.com/wp-content/uploads/2012/06/Facebook-Covers-029.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

305


Puntos :

343


Me gusta :

30


ingreso :

30/03/2015


Sexo :

Masculino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html] Tablilla HTML para Cabecera 
el Lun Mayo 15, 2017 7:05 pm
me la llevo
kuke
avatar

¿Que estoy pensando? :

diseñar y hacer amigos[table class=fecha_up][td]Se modifico:14/8/15 - 1:07 hrs.[/td][/table]


Banner en temas :

https://cherieroedirksen.files.wordpress.com/2012/11/a-new-dawn-facebook-cover.jpg


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

120


Puntos :

208


Me gusta :

40


ingreso :

27/07/2015


Sexo :

Masculino

Plataforma :

punBB


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

 En la misma categoria


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