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)
Lun Oct 15, 2018 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

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 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 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 }
(?)
Líder del Team Genesis
avatar
Ver perfil de usuario http://cherryflan.tumblr.com/
Mensajes :
3661

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.