Comparte
Ir abajo
avatar
3769
0
4950
http://www.pokemon-ysiel.com/t201-dufaux-id
http://www.pokemon-ysiel.com/t230-dufaux-s-storage
http://www.pokemon-ysiel.com/t268-dufaux-s-timeline
3769
0
4950
Líder del Team Genesis

TIENE LOS SIGUIENTES OBJETOS:

3769
0
4950
Ver perfil de usuario
PERMANENT LINK FECHA DE POSTEO → 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 https://i.imgur.com/gMClr94.png
- La imagen de fondo es https://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 }
(?)
Volver arriba
Permisos de este foro:
No puedes responder a temas en este foro.