#bettytutorial

[bettyleg]

TUTORIAL: CAMBIO DE FONDOS.

Este tutorial es de nivel bajo "tirando a" intermedio, pero con paciencia y amor (?) se puede entender. Si no comprenden algo no duden en consultar ya sea por ask o por privado, últimamente ando ocupada con la universidad, pero encontraré espacio para responder <3.

Una solución más fácil es hacer ctr + F y buscar los #fff (o los #fafafa o los #ddd, #eee) en el código y reemplazarlos por el color básico de fondo que quieren ponerle, pero si el CSS no está en la tablilla (Sino en un link externo, por ejemplo), o es una tablilla de post, tendrán que aprender cómo hacerlo de esta forma.

Comenzaremos con: Call out my name, parte I.

INDICE.

Nos centraremos en el html la mayor parte del tiempo. Comencemos.

Primero hacemos click derecho a nuestra tablilla, buscamos abajo de todo que dice "Inspeccionar" y no saldrá como una pestaña lateral en la misma ventana. Ahí encontraremos el HTML y el CSS, nos saldrá información de muchas cosas pero nos tenemos que centrar únicamente en la tablilla que queramos editar. Para esto identificamos la primera etiqueta, en el caso de este paquete se llama ".bt5baul"

Vemos que en el CSS ya nos dice "border: 15px solid #fafafa;", "outline: 1px solid #ddd;" y "background: #fff;". Podemos cambiarlo en el CSS abajo del código como también cambiarlo desde el HTML (esta última sería la única opción para las tablillas de rol, por ejemplo). Nos centraremos en editarlo de la última forma.

Vamos al html, sin editar dice algo como:

<div class="bt5baul">...

Lo editaremos de esta forma:

<div class="bt5baul" style="background:#444; border-color:#555; outline-color:#666">..

Este es sólo un ejemplo. Con el "inspeccionar" podemos identificar los colores que debemos cambiar como también probarlo antes. Verán que la tablilla cambia de color pero recuerden que todas las modificaciones que se hagan en la pestaña "inspeccionar" no serán permanentes, sino que es una previsualización. Los colores se cambiaran editando el código.

Apretando en el cuadradito del color nos abrirá una paleta de colores y veremos como se va cambiando el color delante de nuestros ojos hasta conseguir el que queramos. Esto es muy útil para no tener que darle "previsualizar" al post para ver si nos gusta o no el color. Cuando por fin nos decidimos, lo editamos en el HTML.

Los siguientes pasos son repetitivos, cuando le tomen la mano verán que es lo mismo para todo.

Desde Inspeccionar iremos adentro de ese div apretándolo. Nos quedaría algo así:

Vemos que en "inspeccionar" de a poquito vamos entrando al código de una forma más fácil de ver (porque te lo va marcando con cuadraditos como parece del costado derecho)

Vamos a "b5b-portada" Y vemos que no tiene colores para editar.

Llegamos a "b5b-iconPrinc" y vemos que ya tiene un "style="background:#fafafa"" para editar en el HTML, así que lo cambiamos directamente de ahí por un #444 que va de acuerdo con la paleta que elegí para este tutorial.

Vemos que el icono del lobo esta en color blanco. Entramos por los divs hasta llegar al icono y vemos cómo esta hecho, en este caso tiene un "-webkit-text-stroke: 1.2px #fff;"

El icono sin editar en el HTML esta así: <span class="sf sf-wolf">

Lo cambio por: <span class="sf sf-wolf" style="-webkit-text-stroke-color:#444">

Como regla básica, al menos para mis códigos, si un ícono o letra está con color únicamente en sus bordes es porque usé "-webkit-text-stroke" y la forma de cambiarlo es agregarle un "-color" al final. Sino son colores de letras que se edita con "color" o fondos "background" o bordes "border-color" o outline "outline-color".

Seguimos, vamos directo al div de la imagen. Podemos ir abriendo los divs o poner el mouse sobre lo que queremos ver + click derecho + nuevamente "inspeccionar" y nos lleva a donde queremos ver.

Vemos que abajo, en el CSS, tenemos un "border:15px solid #fafafa", lo vamos a cambiar.

El HTML sin editar es: <div class="b5b-imagen">...

Editado: <div class="b5b-imagen" style="border-color:#555">...

Y ya estaría terminado. Para los créditos modifiquen el HTML así: <a class="bettycred" style="margin-top:-5px;width:430px;background: transparent;border-color: transparent;color: #ddd;" href="http://bettyleg.tumblr.com/">bettyleg</a>

Y se vería acorde a todo. CRONOLOGÍA:

Hacemos lo mismo, identificamos el mismo div y lo cambiamos:

Sin editar: <div class="bt5baul" style="width:550px;">

Editado: <div class="bt5baul" style="width:550px;border-color: #555;outline-color: #666;background: #444;">

Más abajo vemos que hay un div llamado "listaDeTemas" con un background en claro, lo cambiamos en el HTML y nos queda: <div class="b5b-listadoDeTemas" style="background:#444">

Haciendo lo mismo notamos que el div de arriba "b5b-titulo" tiene un border-bottom con color claro, entonces en el HTML agregamos un <div class="b5b-titulo" style="border-bottom-color:#666">...

Adentro del listado de temas vemos otros div más que edito de esta forma <div class="b5b-temas bt-temasAbiertos" style="background:#444; border-color:#666">...

Y el de al lado igual. Para las relaciones es lo mismo.

AHORA, HAY UNA FORMA MÁS FÁCIL: Sí. ESTA NUEVA FORMA ¿SIRVE PARA POST DE ROL?: No.

Si quieres cambiar los colores del post de rol la única forma es la de arriba. ¿Por qué?

Cuando posteamos una tablilla funciona así. Ejemplo, yo tengo una tablilla con mis colores, editado justo como yo lo quiero, posteo y en la misma página oh casualidad otra persona postea la misma tablilla pero con sus colores editados (ambos en el CSS). Voy a ver mi post y ¡Me cambió los colores! Lo cito con desconfianza pero veo que mi edición está en el tema... Entonces ¿por qué no lo veo? Sucede que la segunda persona que posteó pisó todos tus cambios al tener el mismo nombre de clases hay una "jerarquía" que se cumple. Para los post de rol, tengo un tutorial aquí: https://bettyleg.tumblr.com/post/615971389252435968/se-te-adelantaron-y-cambiaron-los-colores-en-el Volviendo a los baúles, también se puede cambiar en el css. Ver dónde están los colores #fff, #fafafa, #ddd, #ccc que normalmente uso en casi todo. Más que nada los últimos para los bordes. y cambiarlo de esta forma:

... background:#444!important ...

Agregarle el "!important" hará que se aplique a todos los del mismo tema.. De esta última forma NO se tendría que agregar los "style" en el html y afectaría a todas las tablillas que postee abajo con el mismo nombre de etiqueta. Claro esta NO es recomendable para los post de rol, solamente úsenlo para el baúl o tablillas que usan ustedes (búsquedas, etc). Es una forma, pero es más "delicada" de usar para mi.

Recomendación: Si quieren aprender, prueben cambiar los colores de ambas formas para el índice (que es el más sencillo). Cuando ya sepan como funcionan puedo enseñarles otras formas en las que también se podría realizar.

Hay muchísimas formas de editar una tablilla depende de cuánto saben de css y html, pero todo se aprende. Igualmente de ahora en más haré estos cambios más fáciles de hacer en las tablillas del futuro (?). Si no se entendió algo por favor háganmelo saber ¡Saludos!