A veces uno cuando tiene falta de conocimientos se arregla como puede, ¿no? Aprender es algo que requiere disciplina y dedicación, en lo personal creo que es bastante difícil hacer las cosas por cuenta propia en este aspecto, y por eso se agradece cuando se tiene ayuda desinteresada. Creo que @necromancercoding es eso para muchos de nosotros! Él y Ross son las personas que más me han ayudado a aprender y mejorar, la cuestión es que Ross ya lo sabe (????).
Así que Necro, acá te va un gracias de nuestra parte, de verdad, gracias por tu dedicación y buena onda. Hablo por muchos cuando digo que es algo que apreciamos de corazón. Esta es la única forma que se me ocurrió de hacerte alguna clase de atención, Todavía está en wip, pero bueno, va quedando (?).
La próxima que lo veas estará terminado y esperemos que se vea decente (????).
La calidad es una garcha pero in qualité tumblr se me freseaba y no dejaba subir la imagen :(
Y he de decir que el fondo gris que rodea la tablilla en realidad corresponde al foro en que la publiqué, porque ese espacio es transparente. Tanto los círculos de arriba como el “Peace & War” están sobre fondo transparente.
¿Recuerdan el code de Templanza? Ese que dije que “maybe le agregaba una frase por algún lado”. Minga, se convirtió en un código completamente nuevo y diferente JAJAJA.
La verdad no sabría por dónde empezar para decir todo lo que apliqué para hacerlo, así que empezaré por decir que aprendí una banda de cosas sobre la marcha: necromancer’s codes tu patrón. Recomendadísimo que vayan a ver sus tutoriales, a mí me ayudaron un montón para hacer esto. Específicamente, los de pestañas (aunque también mirujeé el de alinear verticalmente el texto y me ayudó una baaanda). También seguí un tutorial (de magicalcore) para agregarle los reproductores de música a la tablilla.
Pestañas: Parte 1 — Parte 2.
Alinear texto verticalmente: Here.
Reproductor de música: Here.
También con esta tablilla fui aprendiendo a hacer clipping mask en imágenes (con el mask-image, gg, que en mi caso era con el -webkit porque uso chrome), y aplicar modos de fusión en las mismas (background-blend-mode y mix-blend-mode). Se me liaron un poco los hovers en un punto por esto, pero una vez le vas agarrando la mano es como un “aaah, eso es lo que estaba mal”.
Empecé a usar clip-path para recortar el área que el mouse detecta de las imágenes: yo quería que sólo se activara el hover cuando se apoyara el mouse sobre la imagen recortada, y no en todo el espacio rectangular vacío, así que usé el clip-path. También lo hice con los círculos. Y esta vendría siendo la principal razón por la que no creo que pueda compartir el code y hacerlo intercambiable (?). Eso y las máscaras de recorte que mencioné antes, aunque en mi cora eso sí resulta sencillo de intercambiar, sólo es un url ¿?
Para generar el código del clip-path usé esta página. No sé si hay gente que lo haga manual but ahí les dejo el dato jsjs.
Le agarré la mano a esto de ubicar imágenes grandes en un espacio pequeño (como en los circulitos) en el área que quiero que se vea poniéndolas como background-image, y dicho sea de paso, es mi primera tablilla usando el position absolute en tantas cosas. Suelo evitarlo como la peste porque el foro en que participo está mal codeado y rompe casi todas las tablillas con algo en absolute PERO logré arreglármelas para no romper nada y ahora me pregunto qué hice toda mi vida sin usar esta cosa, es mágica. Ahora el relative sólo es mi putita para cuando necesito un padre para mis bebitos en absolute (???).
Mi intención era usar iconos de honeybee pero terminé cediendo a la tentación y metiendo imágenes png (las nubes, la espada y la balanza). Sólo quería sus siluetas así que les bajé la opacidad al 0% y las pinté completamente de un color con el mask-image (también les metí clip-path para que no me impidan seleccionar texto).
Y nada, man. Creo dije todo lo que tenía que decir ¿? estoy muy muy contenta con el resultado, y creo es mi mejor code hasta ahora :( por eso lo publico asies, que no he publicado ninguno antes.
¡Hola! Primero que nada quería decirte que me encantan las tablillas y firmas que has hecho, ¡muchas gracias por dejarnos usarlas! Segundo, quería saber si me podías ayudar en una duda bastante estúpida que tengo, verás, estoy en proceso de aprender a crear un skin para un foro que quiero abrir y vi el tutorial de las variables CSS y me preguntaba: ¿dónde coloco eso? ._. Es lo de :root, Lo siento por la pregunta xd pero me da miedo meterlo en un lado que no sea y arruinar todo unu
¡Hola!
En primer lugar, ¡muchas gracias! Me alegro mucho de que os gusten las cositas que subo, aunque sean pocas y a estas alturas de la vida estén medio desfasadas del todo ya <3
Ahora, en cuanto a las variables, pues, a ver, yo en su día me guié por el tutorial que dejó @necromancercoding en su tumblr, que es el que yo reblogueé hace mil millones de años. ¿Puede ser ese el que has visto tú y que sea Necro al que hayas creído enviarle la duda?
En cualquier caso, sea así o no, te recomiendo que te pases por allí para ver todas las cositas que sube, porque son super útiles. Además, siempre tiene muy buena disposición a echar una mano cuando hay dudas como esta, así que recomiendo a cualquiera que lea esto y a ti, anon, en especial, echarle una visita a su blog, porque es mi go to cuando estoy más perdida que un pulpo en una cacharrería.
De todas formas, como yo me atasqué mucho al principio, intentaré resolver tu duda desde mi experiencia con las variables, aunque siempre recalcando el crédito a Necro y aprovechando para darle las gracias por enésima vez por el trabajazo que se marca compartiendo recursos para la comunidad <3
Antes de empezar, diré también que solo he utilizado variables para los colores del skin actual de @thechemtrailsrpg y estoy super contenta por lo mucho que nos han facilitado mucho las cosas a mi compi @accioblack y a mí, evitándonos tener que apuntar colores o que copiar y pegar cada hex una y otra vez. Las variables se pueden usar para más cosas, pero nosotras las hemos centrado en eso, el color y ya.
Para que sea más sencillo, voy a tirar de capturas de pantalla, porque en lo personal me facilita mucho la tarea ver dónde y cómo van colocadas las cosas para entenderlas bien y, como ejemplo, pongamos que queremos crear el set de tablillas de ambientación/administración de nuestro foro.
Paso one
Lo primero de todo sería crear una variable. Aquí puedes ir añadiéndolas según avances con el diseño, así que no tienes que preocuparte por tenerlas todas antes de empezar.
Para eso, solo tienes que ir al CSS de tu foro PA - Visualización - Colores - CSS Stylesheet. No hay mucha ciencia en este paso, aunque a mí me gusta ponerlas al principio del todo porque así es más fácil localizarlas, sobre todo si eres como yo y a veces se te olvida hasta cómo te llamas.
Entonces, poniendo que queremos que el fondo de nuestras tablillas sea de un color gris claro, que lleve un borde verde, que su texto general sea de un gris más oscuro y el título azul, añadiríamos estas líneas al CSS.
:root {
--fondotabadmn: #dedede;}
--bordetabadmn: #96b572;
--txtabadmn: #1f1f1f;
--txtabadmnacen: #729bb5;
}
El :root no se toca, los guiones tampoco, solo tendrías que darle un nombre a tu variable (como fondotabadmn (fondo de la tablilla), bordertabadmn (borde de la tablilla), txtabadmn (texto general de la tablilla) y txtabadmnacen (título) y aplicarles un valor que, en este caso, es el color. Quedaría así:
Paso two
Aquí vendríamos a crear lo que es la tablilla en sí, con su HTML y su CSS correspondiente.
HTML
Como quiero una estructura sencilla, voy a crear dos divs distintos. Uno que llevará la clase de la tablilla en sí y que englobará tanto el título como el contenido de la misma y otro para el título como tal. Es decir:
<div class="tabadminbase">
<div class="tabadmintitu">Título de la tablilla</div>
Contenido de la tablilla.
</div>
Este HTML, en cuanto lo pase a ForoActivo, irá todo seguido, sin saltos de línea, pero así, con ellos, se ve mejor qué va dentro de qué. Como ya digo, en el foro quedaría así:
<div class="tabadminbase"><div class="tabadmintitu">Título de la tablilla</div>Contenido de la tablilla.</div>
CSS
Una vez tengamos nuestro HTML, podemos toquetear al gusto las clases hasta que obtengamos un aspecto que nos agrade. Mi resultado, sin utilizar las variables que hemos creado antes, ha sido este:
CSS del cuerpo de la tablilla:
.tabadminbase {
border: solid 1px;
text-align: justify;
font: 14px calibri;
width: 360px;
padding: 60px;
}
CSS del título de la tablilla:
.tabadmintitu {
text-align: right;
text-transform: uppercase;
font: 16px roboto;
letter-spacing: 2px;
}
Ahora, ¿cómo quedaría esto, que ya de por sí es soso, usando las variables? Pues igual, pero con más vidilla. La que es basic es basic. El CSS, ya con variables, sería el siguiente:
CSS del cuerpo de la tablilla:
.tabadminbase {
background: var(--fondotabadmn);
color: var(--txtabadmn);
border: solid 1px var(--bordetabadmn);
text-align: justify;
font: 14px calibri;
width: 360px;
padding: 60px;
margin: auto;
}
CSS del título de la tablilla:
.tabadmintitu {
color: var(--txtabadmnacen);
text-align: right;
text-transform: uppercase;
font: 16px roboto;
letter-spacing: 2px;
}
Con esto, habríamos obtenido la misma tablilla, pero con los colores que marca la variable:
El CSS, ya implementado en el foro, tendría esta pinta:
Como ves, es simple. En vez de usar color: #1f1f1f o border: solid 1px #96b572, empleamos la variable en sustitución del hex. En un principio puede parecer una tontería, pero si, como nosotras, según vas haciendo el skin, dices: joder, no me gusta cómo queda esto en este color, en vez de tener que buscar el hex las tropecientas veces que aparece en el código cuando ya has avanzado, basta con recurrir a la variable, cambiarlo allí y ya estaría. Guardas y a vivir la vida, porque te habrás ahorrado el ir línea por línea (por más que uses el control/cmd+f/replace) y podrás usar ese rato en tomarte una cerve, tocarte la barriga o comerte la cabeza con otro código, que eso siempre gusta.
Caso aplicado a foro
Para terminar con un ejemplo más cercano a la realidad, porque una tablilla como que se me queda un poco corto, te diré que el skin de The Chem, tiene como veinte variables en total, más o menos. En este ejemplo, no le hagáis mucho caso a que haya una línea de root por cada variable, sino que pueden estar todas dentro de la misma, como en el ejemplo del primer paso (gracias a Necro y @dustydispatch por el aviso <3).
Como ves, tenemos unos cuantos fondos definidos (categorías, tablillas...), un borde principal, otro oscuro, el texto general, un text-shadow, dos acentos principales, varios grupos y alguna cosilla más que nos fue surgiendo por el camino. De ahí, si quisiésemos hacer un cambio drástico a la paleta, podríamos cambiar las variables y al estar todos los colores regidos por ellas, no necesitaríamos editar ninguna otra parte del código.
Ahora sí que sí, ¡ya está todo!
Creo que no me he saltado nada, pero básicamente eso es lo que hago yo a partir del tutorial de Necro. Es muy posible que haya explicado, nombrado o loqueseado mal ciento setenta mil cosas porque todo mi background, tanto teórico como práctico y de momento, proviene de tutoriales y otras muchas maravillas que hay en el fantástico mundo de la internete.
Por eso, si alguien aprecia alguna irregularidad, carencia lo que sea que se podría mejorar (será mucho, no vengáis a destruir pls, que esto lo hago con todo el amor del mundo dentro de mis conocimientos), se me avisa y edito con los arreglos pertinentes.
Gracias, anon, por la pregunta, gracias a @necromancercoding mil veces por tanto y a quien sea que lea esto por llegar hasta el final.
Me agrada lo que ha dicho Flerex, porque eso quiere decir que todos los skins que ha realizado Necromancer, Gitano y cía son un plagio de los skins que han sido realizados en JCINK puesto que visualmente son lo mismo pese a que sus códigos son diferentes.
Hace poco, entré en un foro dónde ya directamente en la ficha ponía: Masc, Fem, No binario... // Como dice el otro anon, los que se ofenden no será la gente LGBT, a menos que, justo como dices, no te tomes el tiempo para hacerlo "bien". Como dice Orfeo, los estereotipos per se no son malos a la hora de usarlos, mientras que no sean basados en LGBTfobia (ej. que la gente bi es una viciosa). Aunque sí te recomiendo leer experiencias de personas del colectivo que quieras representar, ya que (sigue)
(cont.) te costará menos entender cómo reaccionaría un personaje a ciertas cosas si ves ejemplos de la vida real (vamos, como se haría con una persona con una enfermedad X). Hay mucha gente que cuenta vivencias desde su punto de vista y no hay dos vivencias iguales. Cerrarse a no llevar personajes LGBT por miedo a no llevarlo bien te hace perderte tramas muy interesantes, así que animo a todos aquellos a los que les pica el gusanillo <3 (Y no se olviden de la T, ¡que existe!)
