Inicio
Anuncios
Mapa
Gimnasio
Élite 4
Awards
❝ Foros Hermanos ❞
Loving Pets
❝ Afiliaciones Élite ❞
Determination (Undertale)counting ★ starsFINAL FANTASY: ZeroBoku no Hero ROLDevil Within +18Velmegun
❝ 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
» Cierre de Temas (iii)
Hoy a las 1:05 am por Misaki Walker

» ¿Qué estás escuchando? | Juego |
Sáb Oct 13, 2018 6:34 pm por Ayano Aishi

» One Piece Definitive | Afiliación Élite
Sáb Oct 13, 2018 12:21 pm por Invitado

» Registro de Huevos (II)
Sáb Oct 13, 2018 5:49 am por Kagamine Twins

» [Ausencia] Tiempo fuera
Vie Oct 12, 2018 6:24 pm por Ayano Aishi

» Segunda Edición Revista Ysiel (No Oficial): Edición Piñufle
Vie Oct 12, 2018 12:32 am por H Uchiha

» AYR·Anime y Render | Afiliacion Elite
Jue Oct 11, 2018 6:11 pm por Invitado

» Shingeki no Kyojin RolePlay /Afiliación Élite
Jue Oct 11, 2018 5:29 pm por Invitado

» Dibujos random
Miér Oct 10, 2018 6:54 pm por Ayano Aishi

» Registro de Físicos (ii)
Mar Oct 09, 2018 3:10 pm por Skylar & Astrid

27 Ago¡Battle Royale y Torneo Inaugural!
¡No sólo los Pokémon evolucionan! Ysiel también crece y se desarrolla constantemente; y una prueba de ello es su propia versión del apasionante Coliseo Royale de Alola. ¿No sabes cómo funciona o jamás habías oído de él? ¡Nada como un torneo inaugural con increíbles premios para conocerlo! Más información aquí.
14 AgoNuevas secciones de rol: Extranjero y Multiverso
Si quieres contar la historia de tu personaje antes de llegar a Ysiel, puedes hacer roles en el Extranjero. Por otro lado, si quieres explorar a tu personaje en escenarios que nunca sucederían en el canon, puedes aventurarte en el Multiverso
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;
}


  • 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'>




◈ by Kurusu

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

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 :
840

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.