Crear forocounting ★ starsCrear foroCódigo para storage (!) 40Código para storage (!) JPoNL3GEl secreto de Gambrinus
directorios y recursos
PokeCueva
brothersites + af. élite
Loving PetsCódigo para storage (!) NTqlxc7
Síguenos

Ir abajo
Dufaux
Código para storage (!) G3xttrtZ_o
4451
0
19850
http://www.pokemon-ysiel.com/t201-dufaux-id
http://www.pokemon-ysiel.com/t230-dufaux-s-storage
http://www.pokemon-ysiel.com/t268-dufaux-s-timeline
Código para storage (!) G3xttrtZ_o
4451
0
19850
Líder del Team Genesis

TIENE LOS SIGUIENTES OBJETOS:

Código para storage (!) G3xttrtZ_o
4451
0
19850
Ver perfil de usuario
PERMANENT LINK FECHA DE POSTEO → el Dom Sep 04, 2016 5:12 pm
Por alguna razón se volvió necesario esto¿¿¿ como todo el mundo lo pedía puessss here it is, para ahorrarnos el tiempo a todos (?)
preview:
Código para storage (!) 73bd5f2061423fe0a049b38fff802d13
Había hecho esta tablilla pensando un poco en reducir un poco el tamaño del código para maximizar la cantidad de pokemon en un solo tema, al mismo tiempo que hacía más visible los pokes. Así que salió esta tablilla semibásica que por alguna razón se volvió famosa a pesar de ser heavy as shit (?) pero teniendo alrededor de 80 pokes puesss it has proved its worth i think!
So here it is, el post del saber (?)

Disclaimer escribió:* Se permite el uso del siguiente código en cualquier lugar del Internet, ya sea en su forma íntegra como con todas las modificaciones que el usuario realice sobre él. PERO Queda prohibida su distribución en sitios de resources de códigos y gráficos suplantando mi identidad como autor. (no sé por qué alguien haría algo como eso but just in case)

* Se recomienda que el usuario use su propio hosting de imágenes y/o fuentes para los recursos usados, ya que los usados aquí pueden desaparecer sin previo aviso.

* Se agradece el no retirar los créditos.

el código completo está al final!

LOS ESTILOS

Código:
#tablafull{
 background:url(http://i.imgur.com/1CEE5vy.png);
 width:100%;
 padding-bottom:15px;
}
#tablatopi{
 background: url(http://i.imgur.com/IustDF8.png),
 url(http://i.imgur.com/s7pSJ1K.png);
 width:100%;
 height:150px;
 border-top:solid #426e67 7px;
}
#tablafull #tablatopt{
 background-color:#426e67;
 width:100%;
 box-sizing:border-box;
 color:white;
 text-align:center;
 padding:2px;
 font-family:Oswald;
 text-transform:uppercase;
 font-size:20px;
}
#tablafull header{
 text-align:center;
 font-family:Yesteryear;
 font-size:30px;
 margin-top:-4%;
}
#tablafull .tablabox{
 margin:5px 30px;
 background-color:#c3d3d0;
 box-sizing:border-box;
 padding:7px;
 opacity:0.8;
}
#tablafull .tablabox table{
 width:100%;
 text-align:center;
 border-collapse: collapse;
}
#tablafull .tablabox td{
 text-align:center;
 font-family:georgia;
 vertical-align:bottom;
 background-image: radial-gradient(#fff, #c3d3d0),
 radial-gradient(#fff, #c3d3d0);
 background-size:2px 90%;
 background-position:0 5%;
 background-repeat:no-repeat;
 border-collapse: collapse;
}
#tablafull .tablabox tr td:first-child{
 background:transparent;
}
#tablafull .tablabox td.trade {
 background-color: rgba(66,110,103,0.2) !important;
}
#tablafull .tablabox a{
 color:#426e67;
 font-family:BenchNine;
}


  • https://i.imgur.com/1CEE5vy.png fondo de cuadros transparentes de atrás de toda la tabla
  • El banner del top tiene actually dos imágenes (!) pero puede ser una si gustan, o más, no problem; la primera en poner es la que va al frente
     Las imágenes son https://i.imgur.com/IustDF8.png la del frente, https://i.imgur.com/s7pSJ1K.png la del fondo
  • #426e67 color oscuro (bordes del top, fondo del texto del top, links)
    rgba(66,110,103,0.2) es la representación RGBA de ese mismo color, sólo que así se la usa para darle transparencia a los cuadritos de trade.
    Aquí hay un conversor para sus colores~
  • #c3d3d0 color claro de fondo y al que se funde los "bordes" de cada celda
  • fuente Oswald para el texto bajo el banner, Yesteryear para los títulos de las cajas, BenchNine para los links, y el resto Georgia just because (?)


CAJAS BÁSICAS
La tablilla trabaja básicamente con divs que contienen tablas (que es actually la peor forma de maquetar cosas pero saca del aprieto (?)). So, desglosaré una de las tablas > filas para que esté más claro cómo funciona. Dentro de los tags < table > ...

Código:
<div class="tablabox"><header>party</header>
<table><tr>
 <td>
  {pokeball especial}
  [img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/luxray.gif[/img]
  nickpoke (poke [color=#0000FF]♂[/color] [color=#FF0000]♀[/color])
  Inicial // [url=URL]EVO I[/url] // [url=URL]EVO II[/url]
  {tipopoke}
 </td>
 <td>
  {pokeball especial}
  [img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/metagross.gif[/img]
  nickpoke (poke [color=#0000FF]♂[/color] [color=#FF0000]♀[/color])
  [url=URL]HATCH[/url] // [url=url]EVO I[/url] // [url=url]EVO II[/url]
  {tipopoke1} {tipopoke2}
 </td>
 <td>
  {pokeball especial}
  [img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/swampert.gif[/img]
  {item hold}
  nickpoke (poke [color=#0000FF]♂[/color] [color=#FF0000]♀[/color])
  [url=URL]CATCH[/url]
  {tipopoke1} {tipopoke2}
 </td>
</tr>
</table></div>

< tr > corresponde a una fila (row) de la tabla, y en este caso, como es para el party uso tres celdas. Pero para el storage uso cuatro celdas en una fila (a menos que sean pokemon volador y ocupen mucho espacio :/ )
Entonces, sería tabla > fila > celda celda celda > cierre de fila > etc > cierre tabla
Y con los tags, table > tr > td/td td/td td/td > /tr > etc > /table

También recuerdo que había hecho esta tabla (e inclusive la cambié de bbcode a html normal) porque quería indicar qué pokes tenía para intercambio. So, hice una clase llamada trade la cual se puede agregar a cualquier td para indicar que ese está en intercambio. Se lo agregaría like < td class=trade" >

CÓDIGO COMPLETO
Live preview del código y shameless promotion de mi storage (?)
I guess this is the end (?) no sé qué más se me puede estar pasando así que pueden postear aquí con sus dudas o mandarme mps, no problem~
Ah, btw, si quieren usar dos tablillas distintas en un mismo tema, para que funcione, deben reemplazar todos los #tablafull del código nuevo por algún otro nombre, para que los estilos no se pierdan!
En fin, eso! Úsenlo con sabiduría (?)

Código:
<style>#tablafull{background:url(http://i.imgur.com/1CEE5vy.png); width:100%;padding-bottom:15px;}#tablafull #tablatopi{background: url(http://i.imgur.com/IustDF8.png),url(http://i.imgur.com/s7pSJ1K.png); width:100%; height:150px;border-top:solid #426e67 7px;}#tablafull #tablatopt{background-color:#426e67; width:100%; box-sizing:border-box; color:white; text-align:center; padding:2px;font-family:Oswald;text-transform:uppercase;font-size:20px;}#tablafull header{text-align:center;font-family:Yesteryear;font-size:30px;margin-top:-4%;}#tablafull .tablabox{margin:5px 30px;background-color:#c3d3d0;box-sizing:border-box;padding:7px;opacity:0.8;}#tablafull .tablabox table{width:100%; text-align:center;border-collapse: collapse;}#tablafull .tablabox td{text-align:center;font-family:georgia;vertical-align:bottom;background-image: radial-gradient(#fff, #c3d3d0), radial-gradient(#fff, #c3d3d0);background-size:2px 90%;background-position:0 5%;background-repeat:no-repeat;border-collapse: collapse;}#tablafull .tablabox tr td:first-child{background:transparent;}#tablafull .tablabox td.trade {background-color: rgba(66,110,103,0.2) !important;}#tablafull .tablabox a{color:#426e67;font-family:BenchNine;}</style>
<div id="tablafull"><div id="tablatopi"></div><div id="tablatopt">dufaux || 21 yrs || team genesis </div>
<div class="tablabox"><header>party</header>
<table><tr><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/luxray.gif[/img]
Zeon (Luxray [color=#0000FF]♂[/color])
Inicial // [url=http://www.pokemon-ysiel.com/t333p60-intermezzo#7303]EVO I[/url] // [url=http://www.pokemon-ysiel.com/t591p105-luck#14827]EVO II[/url]
[img]http://cdn.bulbagarden.net/upload/f/f7/ElectricIC.gif[/img]</td><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/metagross.gif[/img]
Jiker (Metagross)
[url=http://www.pokemon-ysiel.com/t205p15-high#3214]CATCH[/url] // [url=http://www.pokemon-ysiel.com/t205p75-high#3625]EVO I[/url] // [url=http://www.pokemon-ysiel.com/t333p120-intermezzo#10088]EVO II[/url]
[img]http://cdn.bulbagarden.net/upload/6/69/SteelIC.gif[/img] [img]http://cdn.bulbagarden.net/upload/2/23/PsychicIC.gif[/img]</td><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/swampert.gif[/img]
[img]http://i.imgur.com/34FYOOs.png[/img]
Uri (Swampert [color=#0000FF]♂[/color])
[url=http://www.pokemon-ysiel.com/t591p30-luck#14500]CATCH[/url]
[img]http://cdn.bulbagarden.net/upload/c/cc/WaterIC.gif[/img] [img]http://cdn.bulbagarden.net/upload/d/d9/GroundIC.gif[/img]</td></tr><tr><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/golurk.gif[/img]
Faudo (Golurk)
[url=http://www.pokemon-ysiel.com/t747p60-returning#18077]CATCH[/url] // [url=http://www.pokemon-ysiel.com/t832p90-pit#20332]EVO[/url]
[img]http://cdn.bulbagarden.net/upload/d/d9/GroundIC.gif[/img] [img]http://cdn.bulbagarden.net/upload/4/48/GhostIC.gif[/img]</td><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/pawniard.gif[/img]
Kalura (Pawniard [color=#FF0000]♀[/color])
[url=http://www.pokemon-ysiel.com/t205p15-high#3202]CATCH[/url]
[img]http://cdn.bulbagarden.net/upload/e/e9/DarkIC.gif[/img] [img]http://cdn.bulbagarden.net/upload/6/69/SteelIC.gif[/img]</td><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/altaria.gif[/img]
[img]http://i.imgur.com/WaKORo6.png[/img]
Fein (Altaria [color=#0000FF]♂[/color])
[url=http://www.pokemon-ysiel.com/t591p75-luck#14602]HATCH[/url] // [url=http://www.pokemon-ysiel.com/t747p90-returning#19093]EVO[/url]
[img]http://cdn.bulbagarden.net/upload/5/57/DragonIC.gif[/img] [img]http://cdn.bulbagarden.net/upload/7/73/FlyingIC.gif[/img]</td></tr></table></div>
<div class="tablabox"><header>stored</header><table><tr><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/armaldo.gif[/img]
Gorm (Armaldo [color=#0000FF]♂[/color])
[url=http://www.pokemon-ysiel.com/t205p30-high#3485]CATCH[/url]
[img]http://cdn.bulbagarden.net/upload/1/15/RockIC.gif[/img] [img]http://cdn.bulbagarden.net/upload/2/2a/BugIC.gif[/img]</td><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/glalie.gif[/img]
Gerhart (Glalie [color=#0000FF]♂[/color])
[url=http://www.pokemon-ysiel.com/t333p45-intermezzo#7293]CATCH[/url]
[img]http://cdn.bulbagarden.net/upload/7/70/IceIC.gif[/img]</td><td>[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados-shiny/vanillish.gif[/img]
Vaari (Vanillish ★ [color=#FF0000]♀[/color])
[url=http://www.pokemon-ysiel.com/t333p60-intermezzo#8257]CATCH[/url] // [url=http://www.pokemon-ysiel.com/t754p90-pasado#18437]EVO I[/url]
[img]http://cdn.bulbagarden.net/upload/7/70/IceIC.gif[/img]</td><td class="trade">[img]http://www.pkparaiso.com/imagenes/xy/sprites/animados/frogadier.gif[/img]
Frogadier [color=#0000FF]♂[/color]
[url=http://www.pokemon-ysiel.com/t591p45-luck#14520]CATCH[/url]
[img]http://cdn.bulbagarden.net/upload/c/cc/WaterIC.gif[/img]</td></tr></table></div></div>
[right]<a href="http://cherryflan.tumblr.com" style="font-size:10px;font-family:georgia;font-style:italic;color:#426e67;">cherryflan.</a>[/right]
[size=10][color=#426e67]▣[/color] up for trade[/size]
<link href='http://fonts.googleapis.com/css?family=Yesteryear|Roboto+Condensed:300' rel='stylesheet' type='text/css'>


Código para storage (!) JL07zgf4_o
◈ by Kurusu
Código para storage (!) KqnzSnqt_oCódigo para storage (!) DdGPCYM4_o
{ #426e67fichastoragecronología }
(?)
Ayano Aishi
Código para storage (!) QnKq1iew_o
863
0
2900
http://www.pokemon-ysiel.com/t352-locura-o-ternura-ayano-aishi-i-d#7815
http://www.pokemon-ysiel.com/t9949-you-don-t-know-me-ayano-s-relationships#370119
http://www.pokemon-ysiel.com/t373-killer-team-ayano-s-storage-system#8341
http://www.pokemon-ysiel.com/t416-el-diario-de-una-yandere-ayano-s-chronology#9221
Código para storage (!) QnKq1iew_o
863
0
2900
Entrenador Pokémon

TIENE LOS SIGUIENTES OBJETOS:

Código para storage (!) QnKq1iew_o
863
0
2900
Ver perfil de usuario
PERMANENT LINK FECHA DE POSTEO → el Dom Sep 18, 2016 10:46 am
Wow! :O
¡Es precioso!  Código para storage (!) 800676906  -enamorada hardo de la tablilla- (?) gracias Dufaux por compartir esta maravilla con todos nosotros, me encanta demasiado, y ya me la puse xD


Clickéame (ºuo)

Thankie! ~ -huye a seguir contemplando su nuevo storage- (?)
Volver arriba
Permisos de este foro:
No puedes responder a temas en este foro.