Inicio
Anuncios
Mapa
Gimnasio
Élite 4
Awards
❝ Foros Hermanos ❞
Loving Pets
❝ Afiliaciones Élite ❞
Determination (Undertale)counting ★ starsFINAL FANTASY: ZeroBoku no Hero ROLDevil Within +18VelmegunLittle Fears
❝ 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
» Cambio de Nombre
Ayer a las 12:27 pm por Dufaux

» Astherya Foro Rol [Yaoi +18] [Afiliación Élite]
Mar Dic 11, 2018 4:12 pm por Invitado

» Registro de Huevos (II)
Mar Dic 11, 2018 5:11 am por Kagamine Twins

» Registro de Físicos (ii)
Lun Dic 10, 2018 4:22 pm por Liam Mars

» Reactivación de cuenta inactiva
Lun Dic 10, 2018 3:54 pm por Dufaux

» Registro de Cintas de Concurso
Miér Nov 28, 2018 12:33 pm por Narcisse Blanchard

» El Elegido te busca...(?
Miér Nov 28, 2018 11:47 am por Taichi Yagami

» Odissey [Dream Walker] - Afiliación Elite
Mar Nov 27, 2018 9:42 am por Invitado

» 【coronaborealis】— Élite [Cambio de botón]
Lun Nov 26, 2018 4:46 pm por Invitado

» Cierre de Temas (iii)
Dom Nov 25, 2018 2:39 pm por Meiyo

6 Oct¡Evento de Halloween! Spooky Scary Pokémon
Energías místicas inundan la región desde tiempos inmemoriables, pero en este mes se manifiestan aún más fuerte para ciertos pokémon. Sucesos extraños ocurren en toda Ysiel a manos de pokémon de tipo Fantasma, Psíquico, y Siniestro, sus poderes y habilidades manifestándose en desmedida. ¿Será un simple juego de Halloween? ¿O acaso alguien más estará detrás de todo esto? Más información aquí.
6 Oct18° Concurso Pokémon: Spooky Scary Pokémon
Acompañado del evento de todo el mes, un nuevo concurso da inicio, protagonizado por los pokémon tipo Psíquico, Fantasma, y Siniestro. Si eres Coordinador, ¡demuestra las particularidades de estos pokémon! 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 :
3699

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

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.