Inicio
Anuncios
Mapa
Gimnasio
Élite 4
Awards
❝ Foros Hermanos ❞
Loving Pets
❝ Afiliaciones Élite ❞
Crear foroDetermination (Undertale)counting ★ starsFINAL FANTASY: ZeroBoku no Hero ROLDevil Within +18Sailor Moon SacrificeLittle FearsBoruto ROLWithout Place
❝ Directorios y Recursos ❞
¡Agradecimientos especiales por el Skin obtenido a The Captain Knows Best, bajo la creación de Neeve, y basado en el theme The Walking Dead Theme creado por Hardrock. Gracias a los aportes y tutoriales de Hardrock, Glintz y Asistencia Foroactivo. Skin modificado por ADMIN YSIEL. Agradecimientos también por el contenido gráfico basado en imagenes de Tumblr y Zerochan, ¡Muchas gracias a sus respectivos autores! Foro basado en el juego/anime/manga de la saga Pokémon de Satoshi Tajiri, Nintendo y Game Freak.

Todo contenido de edición gráfica, fichas, trama y demás es propiedad de Pokémon Ysiel. Recuerda pedir los permisos respectivos al respectivo autor antes de tomar su obra, ¡evitemos el plagio!
Últimos temas
» Registro de Huevos (II)
Hoy a las 4:07 pm por Sasha & Kaien

» Cierre de Temas (iii)
Hoy a las 2:46 am por Digony Stone

» Registro de Físicos (ii)
Ayer a las 12:34 am por Digony Stone

» La Senda entre la Tinieblas. - Fic +20
Miér Feb 14, 2018 10:39 am por Job

» Otra sugerencia pa los profes
Mar Feb 13, 2018 3:33 pm por Raziel Lewach

» Kairaku no Kizuna [+18] | Afiliación Élite |
Mar Feb 13, 2018 8:03 am por Dufaux

» One Piece Generation [Afiliacion Elite]
Mar Feb 13, 2018 8:03 am por Dufaux

» Chrysantheme Circus [Afiliación Elite]
Mar Feb 13, 2018 8:02 am por Dufaux

» Fate Singularity - Afiliación Élite
Mar Feb 13, 2018 8:02 am por Dufaux

» Dragon Ball Alternative Universe (Afiliación élite)
Mar Feb 13, 2018 8:02 am por Dufaux

26 EneTorneo Elemental y de Líderes
Por el aniversario de Ysiel torneos han empezado. ¡Con grandiosos premios! Hay un torneo especial para líderes (aquí) y otro para el resto de oficios (aquí) ¡Defiendan a su tipo predilecto!
10 EneEl Cazarrecompensas - Reroll de Megapiedras
Un misterioso hombre viajero llegó a Ysiel dispuesto a intercambiar sus rarezas por las tuyas. Si tienes megapiedras repetidas y quieres arriesgarte a ganar algo posiblemente nuevo, deberías intentarlo. Más aquí.
28 Ago{Concurso Pokémon} Double Trouble!
De vuelta en las playas de Seaside Port donde muchos pasan sus vacaciones de verano, unas más extrañas que otras... ¡y todas a punto de terminar! Para eso, como cierre con broche de oro, una magnífica presentación a manos de nuestros brillantes Coordinadores está preparada para esta hermosa noche. ¿La temática? No está tan lejos de ser sobre dobles malignos... ¡Es sobre contrapartes pokémon! Más aquí.
Navegación
Últimos temas
Primavera
Día: 10° - 20° / Noche: 5° - 20°
staff
¿Sabías que...?
Datos curiosos del foro

Código para storage (!)

Ver el tema anterior Ver el tema siguiente Ir abajo

Código para storage (!)

Mensaje por Dufaux 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:
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;
}


  • http://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 http://i.imgur.com/IustDF8.png la del frente, http://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'>



◈ by Kurusu

{ #426e67fichastoragecronología }
(?)
Líder del Team Genesis
avatar
Ver perfil de usuario http://cherryflan.tumblr.com/
Mensajes :
3294

Fecha de inscripción :
24/01/2015


✔ Online
✘ Offline

Volver arriba Ir abajo

Re: Código para storage (!)

Mensaje por Ayano Aishi el Dom Sep 18, 2016 10:46 am

Wow! :O
¡Es precioso!    -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- (?)
Entrenador Pokémon
avatar
Ver perfil de usuario
Mensajes :
758

Fecha de inscripción :
07/02/2015

Localización :
Donde se encuentre mi amado Raziel ❤


✔ Online
✘ Offline

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.