#cherryflavouredcodes

a rose by any other name... — tablilla de rol

Con Scroll: Pastebin Sin Scroll: Pastebin

¡El primer código nuevo en este blog! Este código nació en un code challenge en @dixinmortal, el cual daba una base clara u oscura, y uno tenía que decorarla a su gusto. Y terminé ganando el pequeño challenge :3 Eventualmente lo ajusté un poco a una versión que no esté tan contenida en un espacio reducido, por lo que hay dos versiones! Una versión con scroll e imagen más pequeña, y la otra con alto que se ajusta al contenido e imagen más alta. El nombre de la tablilla es similar a la de un tema de rol donde usé esta tablilla, hehe.

Ahora, algunas indicaciones. Ambas versiones usan las mismas variables CSS para los colores e imagen. Aquí, qué significa cada uno:

--wbgcol: Es el color del fondo en valores RGB, para poder usarse con transparencias (para el efecto degradado)

--wacccol: El color principal de acento, el de la letra inicial y desplazador

--wacccol2: El segundo color de acento, para la línea de fondo del desplazador

--wbgimg: La URL de la imagen de fondo. Debe ir entre url(). Para la versión scroll el tamaño de la imagen es 450x150 pixels. Para la versión sin scroll el tamaño es 500x350 pixels.

--wtxtcol: El color del texto (título y contenido)

Además de esto, la tablilla tiene un par de clases para colocar imágenes flotantes a la izquierda o derecha. Las clases son whiteimg-left y whiteimg-right. En el código se tiene un ejemplo de las imágenes.

Disclaimers y demás:

from dusk to dawn — tablilla de rol

Light mode: Pastebin Dark mode: Pastebin

Después de algún tiempo, un par de tablillas nuevas. Hechas en un rato de ocio en stream con amigos, estas tablillas simples puede que sean versátiles. Subí ambos modos claro y oscuro, pero al final depende de cada uno los colores e imágenes que quieran usar.

¡El título no tiene que ser muy largo! Pero si quieren pueden reducirle el tamaño a este para que quepa.

Disclaimers y demás:

dark castle — tablilla de rol

Pastebin

Esta tablilla fue inspirada por una idea de tablilla que una amiga tenía: una imagen como fondo, con título, contenido del post con scroll, y una parte para poner los detalles de con quién se está roleando. ¡Y aquí el resultado que salió! Traté de agregar más detalles en la parte de título (que es la que me pareció que faltaba), y así, con doble título.

¡Entonces! Sobre las variables...

--drkbg: es la imagen de fondo de la tablilla. Debe mantenerse entre "url()"

--drkacc: es el color de acento de la tablilla: el color de los enlaces, del texto del subtítulo, y del slider.

--drkline: es el fondo de la línea de subtítulo, de la información de los rolers, y de la barra de scroll. En el primer ejemplo se está usando una imagen (entre "url()"), y en la segunda se está usando un color. ¡Se pueden usar gradientes también!

--drksubtitle: Aquí es donde se cambia el subtítulo que está de color. Debe estar entre comillas simples '', y si se quiere eliminar por completo (como en el 2do ejemplo), se debe mantener el campo pero se debe eliminar el contenido incluidas las comillas simples, de esta forma: --drksubtitle:;

Para el título, lo máximo que alcanza sin dañar la integridad del code son tres líneas de título. Además, las imágenes que tengan la clase drc-full y estén dentro del contenido de la tablilla se mostrarán un poco fuera de los márgenes (a menos que haya algún estilo que lo sobreescriba)!

Disclaimers y demás:

cassiopeia — firma

Pastebin

Esta es una firma que había empezado para el reto de Codember 2023 de @elalmacen-rp, que al final no pude entregar a tiempo u.u pero me pareció muy bonito el código como para dejarlo olvidado por ahí.

Como el nombre lo indica, se dibuja la constelación de Casiopea con elementos enlaces. Imagino que se podrían hacer variantes similares para otras constelaciones, aunque esta me pareció conveniente por lo sencilla y pequeña que era. Hacer de todo para que quepa bien en el espacio de firma de foroactivo es una labor en sí misma.

También tiene una ligera animación de brillo en las estrellitas uvu

El texto bajo la imagen recomiendo que no sean más de 4 palabras, y la imagen debería ser de tamaño cuadrado. Aquí también las variables que pueden cambiar en la firma; no están todas en el código para mantenerlo al mínimo y esté bajo los mil caracteres.

--casacc1: El color dorado principal

--casacc2: El color de acento en el texto

--casava: La URL de la imagen avatar. Deberá ser cuadrada. Debe estar entre "url()"

Y aquí están los estilos extras que se pueden cambiar. ¡No es necesario usarlos! Pero eso, para que exista la posibilidad de variación~:

--casg1: Primer color del gradiente, en este caso el azul más oscuro

--casg2: Color final del gradiente, en este caso un azul más claro

--casstars: La URL de la textura de estrellas de fondo. Recomiendo una imagen transparente. Debe estar entre "url()"

--casimgw: Color blanco usado en el cuadro de la imagen, para textos y sombras. En RGB para usarlo con opacidad.

--casstarlw: Color blanco usado en las estrellas (texto, líneas, brillo). En RGB para usarlo con opacidad.

Disclaimers y demás:

the real me — firma

Esta fue otra firma inspirada en el prompt de "Fama" del reto de Codember 2023 de @elalmacen-rp. Leí el prompt y a mi mente llegó "ah, la protagonista de Perfect Blue?" (que no he visto la película, pero algo sé de la premisa). Quería darle un efecto de personalidad dividida/espejo roto, y creo que algo se pudo.

Arte por James Turner@twitter

Hola hola a todos~ Estuve un poco desaparecida y todavía ando algo así (?) Pero ahora que puedo pasar y dejar unas cositas en el blog, aprovecharé también para anunciar la apertura de esta comunidad para coders para foros rpg!

@@tablillas-foros-rpg @@tablillas-foros-rpg @@tablillas-foros-rpg

Era una idea que tenía hace algún tiempo, y aunque no sé muy bien todavía cómo funciona una comunidad en Tumblr, creo que puede ser un lugar para que coders y no-coders y futuros coders puedan compartir sus recursos, ideas, y trabajos terminados. ¿Qué les parece?

Si son coders o no lo son, pueden rebloguear los codes que gusten en la comunidad para mantener este archivo un poco más cerca para todos, y no sé, quizás se puedan organizar otras cositas a futuro, mucho potencial!

En cuanto a este blog, iré posteando algunas cositas que he logrado hacer, terminar unas cosas que tengo pendientes (eeeyyy pasamos los 100 seguidores, gracias!!), y continuar así!

three hopes — búsqueda / tracker

Pastebin

Originalmente había hecho esta tablilla de búsqueda para otro reto de códigos en @dixinmortal, en concreto para el reto de los colores primarios. Es que con mis lords bonitos del FE3H cómo no inspirarse uvu

Y pues bien! En el ejemplo tengo tres cajitas de personajes, pero se le puede aumentar/disminuir las que uno necesite, repitiendo la caja con clase pj-contain, así:

Las cajas tienen imágenes de fondo de 450*150. Yo recomiendo que tengan algo de color llano en el fondo, para que se pueda usar el mismo color para el resto de contenido de la cajita. Que, para eso, yo por defecto hice clases para los tres colores, pero ustedes pueden editar esas clases y/o los colores, o crear nuevas clases de necesitarlo. Aquí las que usé yo, pero lo importante es que usen la variable correspondiente:

.w3h-blue{--w3hacc:#5757d3;} .w3h-red{--w3hacc:#d35757;} .w3h-yel{--w3hacc:#d2b356;}

Ahora, para la caja inicial, uso una imagen de fondo de 250*215, y recomiendo que la mayor parte del contenido esté en la parte superior, porque será tapado el resto por los botones. Aquí también hay un par de variables que corresponden a los colores normal (--w3hm1) y hover (--w3hm2) de los botones.

Para los iconos, usé los Material Icons de Google.

Como último punto, existe una clase found que se le puede agregar junto a la clase pj-contain, que pondrá un overlay que indicará que dicho personaje ha sido Encontrado. En el código hay un ejemplo de cómo se usa también.

Disclaimers y demás:

Hola, hola, gentecita de internet! Creo que la vez anterior no hice una introducción como se debe, así que acá intentémoslo de nuevo.

¡Hola a todos! Soy CherryFlan (Cherry, Flan, Flandre, etc, etc...), y soy un flan (¡de cereza!) que ocasionalmente hace tablillas y códigos para rol.

Anteriormente estuve en @cherryflavouredcodes, pero (vergonzosamente) perdí el acceso a esa cuenta. ¡Pero bueno, que a veces los nuevos comienzos son mejor! Así que eso, iré rebloqueando postitos de allá (que son codiguitos a los que les tengo cariño), e iré eventualmente posteando cositas nuevas por acá también uvu.

Aprovecharé también para dejar un recordatorio general de las reglitas/disclaimers de los códigos (que eventualmente dejaré en el resto de posts, but still), so here it goes!

* Se permite el uso de los códigos de mi autoría 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 aprecia enormemente si rebloguean los codes si les gustaron o si los llegaron a usar ♥ * De existir, se agradece el no retirar los créditos.