#bettystutorials

[bettyleg]

TUTORIAL: Cómo postear codes largos (y que no se rompa todo)

Tutorial nivel básico.

¿Recuerdas las veces que posteaste una cronología/relaciones/cualquier tablilla larga y por un div mal cerrado todo se rompió. Si la tablilla era de verdad muy larga la búsqueda de los div rotos se hacía interminable. DIGA NUNCA MÁS (?) Hoy les enseñaré un pequeño truco. 

Haré este tutorial con la cronología de Call Out My Name. Por si no lo recuerdan, es esta:

El código es largo, si tengo muchos temas abiertos se vuelve un dolor de cabeza tener que postear todo justo después del último div del modulo. ¡Ah! Demasiado. 

Verán, cuando yo posteo el código tal y cómo está en pastebin, foroactivo lo toma y lo coloca de esta forma:

Todo normal, un código HTML super bonito, ahí se ve mejor las dependencias, cuál caja encierra cual caja. ¿Ven que la clase “b5b-temas” esta repetido tanto en “temasAbiertos” como en “temasCerrados”? Adentro tengo un subtitulo y también modulos. ¡Perfecto!  A la hora de postear ese código interminable es un dolor de cabeza. Lo voy a intentar separar, es decir hacer esto:

Se ve mucho mejor, tengo un salto de línea para cada “b5b-modulT”. Es difícil olvidarse de cerrar algún div o, por lo menos, se verá más fácil en el caso que suceda (que claramente puede pasar).

Lo previsualizo y Foroactivo me dice, no mi ciela, no es lo mismo y obtengo esto:

Y es realmente el mejor de los casos porque hay veces en donde todo es demasiado horrible JAJA Como ven, hay mucha separación entre los módulos de los temas, no se ve igual que antes.  Cuando voy a ver el código me doy cuenta de esto:

A cada salto de línea Foroactivo me lo tradujo como un “br” 

¿Qué es un br? “El elemento br inserta un quiebre de línea, causando que el texto continúe en una línea nueva.”

Esa es la razón por la que nuestro código se ve tan extraño y separado. Aquí es donde entra el truco.

Sabiendo de antemano que “b5b-temas” es la caja contenedora de todos los “b5b-modulT” (Se puede ver en esta imagen, esta super bien identado)  Voy a agregarle al CSS este simple código:

  .b5b-temas > br{display:none}

Esto quiere decir que todos los br que sean “el primer hijo” dentro de “b5b-temas” no harán el salto de línea, no funcionarán.   Esto de que tienen que ser “el primer hijo” se debe al símbolo “>”. Es decir si yo hago más saltos de líneas pero dentro de “b5b-modulT” NO van a verse afectados a esta anulación, sino que seguirán haciendo un salto de línea.

Aquí esta muy bien explicado el funcionamiento de este, como de otros símbolos de CSS.

Y LISTO. Podemos editar nuestro código de esta forma

Y nada se romperá en el camino. 

[bettyleg]

Siempre me olvido de comentar esto. Tuve bastantes consultas de algunos códigos que se deforman, ejemplo: Por alguna razón las medidas salen mal, la foto redonda sale ovalada, no esta centrada. En resumen: al código algo le pasó y no se ven las medidas bien sin razón alguna.

Habitualmente (Si efectivamente las medidas están bien, se ve bien en codepen, se ve bien en otros foros y plataformas) esto se debe a que en el skin tienen un "box-sizing:border-box" aplicado para todo el foro. Se soluciona de una forma sencilla.

Ejemplo, tengo un código que comienza:

<div class="betty"><div class="betty1">....</div>

Van a tomar el nombre de la primera clase, en este caso "betty" y agregarán en el css:

.betty * {box-sizing:content-box}

y con eso se solucionaría.

Si tu código se ve mal porque las medidas se volvieron un poco locas, tal vez se pueda tratar de esto.

¡Saludos!

[bettyleg]

Tutorial: Analizando un código paso a paso.

Vamos a observar la tablilla que subí ayer BURNING UP comenzaremos con el post de rol que es más sencillo.

IMPORTANTE: Esta es una forma de hacer una tablilla, hay muchas más. Algunas más optimas, otras no tanto. Por ejemplo, haciendo esto noté que podía haberlo diseñado de otra forma mejor ¡¡¡Y esta perfecto!!! Todo lo que tenga que ver con códigos nunca es perfecto, siempre puede mejorarse. 

Vamos a ver un poquito de la estructura. Como siempre, recomiendo cualquier editor que les resulte cómodo ( hacerlo en Foroactivo no es de mi agrado pero para gustos colores (?) )

Obviamente tienen otros nombres las clases, pero para no hacerlo hiper largo JAJA ¡El tema de los nombres es muy importante! Hay que poner tales que no choquen con los del foro en sí o con otras tablillas. NO puedo hacer una tablilla con una clase que se llame “post” porque foroactivo ya tiene su clase post en un template. 

.bsqt es mi caja principal. Ahí dentro voy a colocar las otras cajas que conforman mi tablilla. Le doy los atributos que quiero, la medida, los bordes, el fondo. No más en este caso. Más o menos quedaría  <div class=“bsqt”>             <div class=“titulo”></div>             <div class=“descripcion”></div>             <div class=“post”></div> </div>

NOTA: Esta es la forma correcta de escribir el html. Recomiendo que para post de rol le quiten los saltos de líneas y los espacios porque foroactivo a cada salto de linea le pone un /br y a cada espacio su correspondiente código. Ejemplo: <div class=“bsqt”><div class=“titulo”></div><div class=“descripcion”></div><div class=“post”></div></div>

O sea, las cajitas del mismo color están en el mismo nivel. Ahora con ese esquema me voy centrando en cada cajita en particular (los “div” son las cajitas)

En post para esta tablilla sencilla solamente le pongo el ancho (o los margin) y atributos para el texto (font-family, font-size, color, line-height, text-align...)

En titulo se pueden hacer varias cosas. Lo más simple sería ponerle solamente texto, en ese caso pueden ponerle un ancho o margins. Si le fijan un ancho pueden centrar la cajita con “margin:0 auto” el cero es para los márgenes de arriba y de abajo (puede ser margin: 20px auto sin problemas) y el auto para los laterales. Un text-align:center; si quieren que todo se vea en mayúscula pueden poner un “text-transform:uppercase”.

Si tienen un diseño particular de título en mente, hay muchas maneras de realizarlo. Pueden centrarse en esa porción de código y dibujarla con cajitas para visualizarlo mejor. Ejemplo con el emoji al costado izquierdo y el titulo en el costado derecho al mismo nivel, o como está en este ejemplo arriba, o por debajo ¡Hay muchas formas! Dividan en problema en varios problemas menores.

En descripción también se aplica lo mismo de lo de arriba.

Si tienen dudas en los atributos que pueden usar para hacerlo ¡Mándenme un privado con el dibujo! y trataré de guiarlos. Pregunta del millón: ¿Puede hacerse otra estructura y llegar a un mejor o igual resultado! SI. --------------------------------------------------------------------------------------------------------

PARTE DOS: ¿Ya tienen su código y no saben cómo pasarlo a foroactivo?

Yo hago esto. Sí, hay una forma correcta de hacerlo que es poniendo el CSS arriba del HTML, peroooo a mi no me gusta toparme primero con un montón de códigos y después marearme hasta por fin llegar a donde tengo que escribir. Yo opté esto, ¿Esta mal? sí, ¿se ve mal si lo hago? No. Muchas veces haciendo códigos pasa eso, no podes tener lo mejor de dos mundos todo el tiempo (comodidad vs buenas prácticas). Si ustedes ponen el CSS arriba del HTML esta súper y sino, vengan al lado oscuro (?) 

ACLARACIÓN: esta invitación (?) solo es para tablillas comunes. Post, baúl... Para el diseño de un skin es otra historia. En este caso optimiza la carga y visualización, ¡Es mejor poner el css y los scripts en los lugares correspondientes!

Pondré como ejemplo el incompleto de más arriba. En el espacio del post yo hago esto: <div class=“bsqt”><div class=“titulo”></div><div class=“descripcion”></div><div class=“post”></div></div> <*style*>.post{width:400px; margin:10px auto; border:15px solid #fafafa; outline:1px solid #ddd; outline-offset:-15px;}<*/*style> Los style sin los *. Dentro de allí voy a poner todo el CSS. Y listo. --------------------------------------------------------------------------------------------------------

Lo importante es ser constante codeando. Ir de a poco, todos los días se aprenden cosas nuevas y buenas. La imaginación a veces es demasiada y otros días no tanto, pero hay que tenernos paciencia. Mis primeras tablillas no se veían así ni por asomo, eran más... raras JAJA Todo es cuestión de práctica, de hacer sus codes, de leer, de investigar y también de disfrutar haciéndolo!! Tenía amigos que me diseñaban el código en photoshop y después yo lo “pasaba a código”. Para mi lo importante es saber hacer esto, el esquema, y después es todo imaginación (que básicamente creo que es lo más importante JAJA). Actualmente no hago ningún dibujo, ya me salen natural algunas cosas. Y nunca se sabe completamente (así, perfecto, todito. O tal vez sí, pero en mi caso no(?) ) sobre algo, menos en estas cosas que se van actualizando y agregando. Yo aprendí a hacer algo de una forma y también estar abierta a que pueden haber mil más formas mejores, más optimas, más sencillas para usar y para codear y también aprender a cambiar la forma en la que pienso. No se tienen que cerrar, esto es de constante redescubrimiento <3. Espero que sea más o menos un tutorial que les ayude, si no entienden cosas o quieren que explique más otras mándenme un mensajito. Hice pocos tutoriales en la vida, pero me gusta un montóoooon hablar de códigos y pensar nuevas cosas ¡Así que cualquier crítica constructiva me sirve! Énfasis en constructiva.

¡Saludos! 

[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!