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
» Edición de Expedientes
Hoy a las 12:48 pm por Arthur Attaway

» Cierre de Temas (iii)
Hoy a las 12:24 am por Damaris Alaya

» Registro de Huevos (II)
Ayer a las 7:19 pm por Mario Ibushi

» Reactivación de cuenta inactiva
Mar Mayo 22, 2018 3:19 pm por Dufaux

» Registro de Físicos (ii)
Lun Mayo 21, 2018 8:32 pm por Christopher Sidibé

» Sailor Moon Crystal - Afiliación élite, cambio de dirección-
Vie Mayo 18, 2018 12:08 pm por Invitado

» Registro de Pokémon Legendarios
Vie Mayo 18, 2018 7:24 am por Kagamine Twins

» UNIVERZITA ASGARD +18 [Élite] Cambio de botón.
Jue Mayo 17, 2018 10:06 am por Invitado

» Los pikas se van~
Jue Mayo 17, 2018 8:45 am por Sasha & Kaien

» "Queja": Reportando un error y/o buscando una solución
Mar Mayo 15, 2018 12:43 pm 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 ii (!!)

Ver el tema anterior Ver el tema siguiente Ir abajo

Código para Storage ii (!!)

Mensaje por Dufaux el Mar Dic 26, 2017 4:27 pm


Heya~ aquí yo con otra tablilla de storage (?) but first lemme take a selfie el preview
preview:

Este storage lo había hecho para que lo use Logan sob, y ps sólo había quedado en nuestro circulito pero luego me decidí a publicarlo, ya que(?) así que lo arreglé un poco y aquí está o/ Si el otro storage era la versión normal, esta es la versión slim (?) y no usa tablas qué bueno sob

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:
.loganss {
    max-width: 500px;
    font-family: Benchnine;
    text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
    color: white;
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 98%;
}

.loganss .lsstop {
    height: 100px;
    background: url(http://i.imgur.com/gMClr94.png) center;
    position: relative;
}

.loganss .lssdata {
    text-align: left;
    position: absolute;
    margin-top: 17px;
    right: 50px;
    background: url(http://i.imgur.com/N6LmZTI.png);
    padding: 15px;
    box-sizing: border-box;
    max-height: 65px;
    max-width: 200px;
    overflow: hidden;
}

.loganss .lssbody {
    background: url(http://i.imgur.com/N6LmZTI.png);
    height: 300px;
    padding: 0 5px 0 15px;
    overflow: auto;
    font-size: 11px;
}

.lssbody::-webkit-scrollbar {
    border: none;
    background-color: transparent;
    height: 10px;
    width: 10px;
}

.lssbody::-webkit-scrollbar-thumb {
    background: rgba(20, 20, 20, 0.5);
    border: none;
    height: 8px;
    width: 8px;
}

.loganss .lsscont {
    background: rgba(255, 255, 255, 0.3);
    padding: 5px 15px;
    text-align: center;
}

.lsscont header {
    padding: 10px 20px;
    display: inline-block;
}

.lsscont .lssitemcont {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.lssitemcont .lssitem {
    width: 25%;
    border-radius: 20px;
    border: 2px white ridge;
    box-sizing: border-box;
    padding: 5px;
    margin: 3px 0;
}

.lssitem:hover {
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.lsscred {
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    padding: 7px;
    position: absolute;
    color: white;
    right: -34px;
    bottom: 0;
    background: #202020;
}

.lsscred a {
    color: white;
    text-decoration: none;
}

.lss-add {
    height: auto!important;
}

.lss-add .lsscont {
    background: transparent;
    text-align: left;
}

.lsstradebox {
    display: inline-block;
    padding: 5px 15px;
    width: auto;
    height: auto;
    box-sizing: border-box;
    overflow: none;
}

.lsstradebox span {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    text-decoration: underline;
}

.lsstradebox:first-child {
    border-right: 1px solid white;
    width: 55%;
}

- La imagen de top es esta http://i.imgur.com/gMClr94.png
- La imagen de fondo es http://i.imgur.com/N6LmZTI.png Nótese que la imagen está en dos lados para cambiar
- El ancho setteado es 500px mientras que el alto es un poco más de 400px, dependiendo de la última parte de trade
- El scrollbar es transparente
- La letra es de color blanco con sombra negra, fuente BenchNine (sólo esa!)
- Si quieren cambiar el número de cajitas que se muestra en cada fila tienen que buscar la clase .lssitemcont .lssitem y editarle el width: 25%; por algún otro divisor de 100(?). Eso si, si le cambian ahí cambiará a todos los de su caja.
- Los colores de los headers de cada 'caja' se cambian uno a uno, no en la parte del style.

CAJAS BÁSICAS

Código:
<header style="background-color:orchid;">Category Is:</header>
<div class="lssitemcont">
    <div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
     imagen
     atrapado
     cosas
    </div>
    <div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
     imagen
     atrapado
     cosas
    </div>
    <div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
     imagen
     atrapado
     cosas
     otra línea más</div>
    <div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
     imagen
     atrapado
     cosas
    </div>
    <div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
     imagen
     atrapado
     cosas
    </div>
    <div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
     imagen
     atrapado
     cosas
    </div>
</div>

Dentro de los divs llamados lssbody > lsscont están las Categorías, cada una teniendo su < header > al que le pueden cambiar el texto y el color de fondo, y luego un lssitemcont donde pondrán los lssitem (que son cada uno de los pokes de dicha categoría)
Básicamente lo importante es el lssitemcont y el lssitem, el header es como un separador visible(?)

También, hace poco le agregué otra caja, un lssbody lss-add > lsscont > lsstradebox x2, para que la gente anote qué pokes quiere y tiene para intercambiar(?)

CÓDIGO COMPLETO
preview del storage de Logan (versión antigua(?) con sprites pequeños) | preview del storage de komaru (versión nueva(?) con sprites grandes)
como siempre, los sprites de pokes voladores dañan la vida pero bueno (?)
IMPORTANTE NO LE PONGAN MUCHAS COSAS EN LA INFO DE ARRIBA MÁXIMO 4 LÍNEAS PEQUEÑAS TENKS
no sé qué más decir, las clases las puse bc logan /,: y idk, no expliqué más a fondo ni puse eso del id para que hayan distintas tablas en un mismo tema bc pajita (?)
úsenlo cuando quieran y eso o/

Código:
[center]<link href="https://fonts.googleapis.com/css?family=BenchNine" rel="stylesheet"><div class="loganss"><div class="lsstop"><div class="lssdata">nombres
cosas etc (?)
no sé qué más tuturuturu
tuturuturu</div><div class="lsscred"><a href="http://cherryflan.tumblr.com">✦</a></div></div><div class="lssbody"> <div class="lsscont"> <header style="background-color:orchid;">Category Is:</header> <div class="lssitemcont"> <div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas</div><div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas</div><div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas
otra línea más</div><div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas</div><div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas</div><div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas</div></div>

<header style="background-color:blue;">Category Is:</header> <div class="lssitemcont"> <div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas</div><div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas</div><div class="lssitem">[img]http://serebii.net/pokedex-sm/icon/440.png[/img]
imagen
atrapado
cosas</div></div></div></div><div class="lssbody lss-add"><div class="lsscont"><div class="lsstradebox"><span>Busco</span>
pokémon pokémon pokémon
pokémon</div><div class="lsstradebox"><span>Cambio</span>
pokémon</div></div></div></div>
<style>.loganss{max-width:500px; font-family: Benchnine; text-shadow: 1px 1px 1px black; text-transform: uppercase; color:white; font-size: 10px; letter-spacing: 1px; line-height:98%;}.loganss .lsstop{height:100px; background:url(http://i.imgur.com/gMClr94.png) center; position:relative;}.loganss .lssdata{text-align:left;position:absolute; margin-top:17px; right:50px; background:url(http://i.imgur.com/N6LmZTI.png); padding:15px; box-sizing:border-box; max-height:65px; max-width:200px; overflow:hidden;}.loganss .lssbody{background:url(http://i.imgur.com/N6LmZTI.png); height:300px; padding:0 5px 0 15px; overflow:auto; font-size:11px;}.lssbody::-webkit-scrollbar{border:none; background-color: transparent; height: 10px; width:10px;}.lssbody::-webkit-scrollbar-thumb{background: rgba(20,20,20,0.5); border:none; height: 8px; width: 8px;}.loganss .lsscont{background:rgba(255,255,255,0.3); padding:5px 15px; text-align:center;}.lsscont header{padding:10px 20px; display: inline-block;}.lsscont .lssitemcont{display: flex; flex-wrap: wrap; position: relative; overflow: hidden;}.lssitemcont .lssitem{width:25%; border-radius:20px; border:2px white ridge; box-sizing:border-box; padding:5px; margin:3px 0;}.lssitem:hover{background-color:rgba(255,255,255,0.3); cursor:pointer;}.lsscred{border-top-right-radius:50px;border-bottom-right-radius:50px;padding:7px;position:absolute;color:white;right:-24px;bottom:0;background:#202020;}.lsscred a{color:white;text-decoration:none;}.lss-add{height:auto!important;}.lss-add .lsscont{background:transparent;text-align:left;}.lsstradebox{display:inline-block;padding:5px 15px;width:auto;height:auto;box-sizing:border-box;overflow:none;}.lsstradebox span{display:block;margin-bottom:7px;font-size:13px;text-decoration:underline;}.lsstradebox:first-child{border-right:1px solid white;width:55%;}</style>[/center]



◈ by Kurusu

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

Fecha de inscripción :
24/01/2015


✔ 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.