Inicio
Anuncios
Mapa
Gimnasio
Élite 4
Awards
❝ Foros Hermanos ❞
Loving Pets
❝ Afiliaciones Élite ❞
Determination (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
» Cierre de Temas (iii)
Hoy a las 8:09 pm por Leyla

» Boku no Hero One for World - Afiliación elite
Hoy a las 6:25 pm por Invitado

» Pregunta: ¿Extranjero?
Hoy a las 12:50 pm por Dufaux

» Besarías al de arriba (?)
Hoy a las 10:12 am por Lia Lestrange

» [Juego Random (?)] ¿Qué harías si despertaras junto al personaje de arriba?
Hoy a las 10:09 am por Lia Lestrange

» Primer saludo y un regreso
Miér Ago 15, 2018 4:47 pm por Azathoth

» Buscando hasta encontrar
Miér Ago 15, 2018 4:30 pm por Matires

» Registro de Huevos (II)
Miér Ago 15, 2018 5:44 am por Kagamine Twins

» Sugerencia para las misiones de rango & Zonas
Mar Ago 14, 2018 3:20 pm por Dufaux

» ¿Qué estás escuchando? | Juego |
Lun Ago 13, 2018 6:43 pm por Yuki Kobayashi

7 JulLos Deseos de Jirachi - Ruleta y Boosts
Una vez más Jirachi vierte sus bendiciones sobre Ysiel, otorgando la oportunidad de obtener grandes premios en la Ruleta, así como hacer ciertas lanzadas de dados con más oportunidades de acierto. Más información aquí.
29 Jun17° Concurso Pokémon: Wrestlemania!
Nuevas atracciones y costumbres están llegando a la región Ysiel desde otras regiones, así que, mientras se están preparando, un nuevo Concurso Pokémon dará inicio en el pueblo de Tiamant. ¡Las múltiples categorías del Concurso se presentan ante todos! Y, como novedad del evento, una categoría especial permite la participación de todo tipo de entrenador pokémon aunque no se dedique a ser Coordinador. Información aquí
02 May¿Torneo Elemental y de Líderes?
Sucesos extraños ocurrieron en la Gran Final de los Torneos de Líderes y Elemental: ¡un misterioso ente vio la luz en Ysiel! ¿Será este el preámbulo de algo mayor?
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 :
3603

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.