Lo que aprendí de css el año pasado

Como he estado tan acontecida siento que estoy un año atrasada en el blog, así que primero les contaré todo lo que aprendí de CSS el año pasado desde que compré el Plan Premium de WordPress.

Hacer esta compra es buenísimo porque se le pueden hacer muchas mejoras al blog (sobre todo si ya has revisado y re-re-re-revisado todos los temas sin encontrar el que realmente te gusta) como cambiar todos los colores, las fuentes o letras, quitar esto o aquello, etc., además de darte un montón de espacio 13 GB, y varias posibilidades más que yo no he utilizado aún como correo electrónico personalizado por ejemplo.

Aunque hay cosas que faltan, que son súper necesarias y por lo que uno paga {$96 dólares que serían hoy unos $80.000 aprox. en peso chileno} deberían estar disponibles, como por ejemplo la instalación de Plugins que solo lo obtienes con el Plan Business que es muchísimo más caro. De todas maneras no estoy disconforme porque puedo arreglar del tema completamente a mi gusto, y debo decir que los probé ¡todos! (casi me descalabro la cabeza ) me encantó investigar el universo de códigos y todos los cambios que se pueden lograr con esta súper herramienta CSS.

“La curiosidad es una de las más permanentes y seguras características de una vigorosa inteligencia”. -Samuel Johnson

Por esta razón es que quiero hacer este post con casi toda esta información que encontré, porque examiné cada pregunta del foro de cada tema que apliqué al blog, y aunque hay muchísimos códigos que compartir solo pondré aquí los más básicos y los que estoy utilizando actualmente en este tema en particular, porque además algunas líneas de códigos varían según el tema, así que si no les funciona no queda otra que revisar el foro correspondiente al tema que están utilizando.

Los valores que están en negritas son los que se modifican, aquí vamos:

BORDE DE LA PAGINA COMPLETA, ESTA PLANTILLA EN PARTICULAR TRAE EL BORDE POR DEFECTO PERO LA MAYORÍA DE LOS TEMAS NO LO TIENEN.

body { 
border-style: solid !important;
border-width: 13px !important;
border-color: #f2ece7 !important;
}

PARA QUE LA FUENTE O LETRA DEL TEXTO SEA MÁS FINA SE USA LIGHTER

body {
font-weight: lighter !important;
}

PARA QUITAR EL SUBRAYADO NORMAL QUE VIENE POR DEFECTO

body {
text-decoration: none !important;
}

ESTE ES MI CODIGO FAVORITO PUES SOLO LOS TEMAS DE SILO CREATIVO VENÍAN CON ESTE DETALLE, SON LOS BOTONES PARA COMPARTIR EN REDES SOCIALES QUE VIENEN AL FINAL DE CADA ENTRADA PARA QUE SEAN DEL MISMO COLOR:

.sd-social-icon .sd-content ul li[class='share-'] a.sd-button 
{ background-color: #e8a198 !important; 
} 
.sd-social-icon .sd-content ul li[class='share-'] a.sd-button:hover { 
background-color: #cfb8a7 !important; 
}

EL DROPCAP ES LA LETRA CAPITAL QUE INICIA EL TEXTO, TEXT-SHADOW ES OPCIONAL

.dropcap {
font-size: 66px !important;
color: #BC4029 !important;
text-shadow: 1px 1px 0 #ebe1da, 3px 3px 0 #ebe1da !important;
font-weight: lighter !important;
}

MODIFICAR EL TITULO DEL BLOG, TAMAÑO, COLOR Y TRANSICIÓN SUAVE

.wf-active .site-title a {
font-size: 40px !important;
transition: .7s;
}
.wf-active .site-title a:hover {
color: #a67a5b !important;
}

APLICAR UNA CAPA DE OPACIDAD A LAS IMÁGENES DE INSTAGRAM PARA DARLE MOVIMIENTO

.wpcom-instagram-images a {
display: block !important;
float: left !important;
opacity: .7 !important;
transition: opacity .7s !important;
}
.wpcom-instagram-images a:hover {
display: block !important;
float: left !important;
opacity: 1 !important;
}

PARA CAMBIAR LA FORMA DEL MENÚ EN LA CABECERA: TENER EN CUENTA QUE LA PRIMERA LÍNEA DEL CÓDIGO PUEDE VARIAR SEGÚN LA PLANTILLA O TEMA.
EL CÓDIGO LOWERCASE CONVIERTE TODO EL TEXTO EN MINÚSCULA PERO SI QUIERES PONERLO EN MAYÚSCULA ENTONCES UTILIZA UPPERCASE, ADEMÁS DE INITIAL QUE SIRVE PARA PONER LA PRIMERA LETRA EN MAYÚSCULA Y TODO LO DEMÁS EN MINÚSCULA.

.nav-menu > li > a {
color: #010101 !important;
text-transform: lowercase !important;
font-size: 13px !important;
font-weight: lighter;
font-style: oblique !important;
}
.nav-menu > li > a:hover {
color: #af1813 !important;
text-transform: lowercase !important;
font-size: 13px !important;
font-weight: lighter!important;
font-style: oblique !important;
}

CAMBIAR EL COLOR DEL ÍCONO DE WORDPRESS AL PIE DEL BLOG

path { 
color: #a67b5b !important; 
} 
path:hover { 
color: #f2ece7 !important; 
}

ELIMINAR EL SIGA LEYENDO O LEER MÁS, DOS OPCIONES

a.more-link {
display: none;
}

a.read-more { 
display: none; 
}

EL BLOCKQUOTE TIENE VARIOS ESTILOS

FONT-STYLE: OBLIQUE esto convierte el texto en cursiva, oblicua o italic

FONT-WEIGHT: LIGHTER esto afina el texto, también puedes usar bold para un texto grueso o negrita y bolder para un super negrita. Si quieres texto normal solo quítalo del bloque de código.

FONT-SIZE: es el tamaño del texto.

TEXT-ALIGN: alineación o ubicación del texto que puede ser Left=izquierda, Right=derecha o Center=centrado.

TEXT-TRANSFORM: en este código utilicé Initial = letra inicial en mayúscula y lo demás en minúscula, también puedes usar Lowercase para que todo el texto sea en minúscula, Uppercase para que sea en mayúsculas y también Capitalize Para Que Cada Palabra Inicie Con Una Mayúscula.

blockquote p {
font-style: oblique !important;
font-weight: lighter !important;
font-size: 18px !important;
text-align: left !important;
text-transform: initial !important;
}

LOS BLOCKQUOTE TAMBIÉN TIENEN UNA CITA QUE ES GENERALMENTE EL NOMBRE DEL AUTOR

blockquote cite, post cite span {
font-size: 15px !important;
color: #bc4028 !important;
}

IMPORTANTE: si la primera línea del código no te funciona puedes seleccionar el texto o el lugar del que quieres obtener info y con el botón derecho o el que toca el dedo medio lo pinchas y te da la opción Inspeccionar y ahí te aparece cada línea de código, bueno eso si te has familiarizado un poquito con esto del CSS sino ya te vas a los foros para consultar porque tan tan fácil no es.

Ah! y por supuesto que también me apoyé con esta página http://W3schools.com que es súper fácil de entender solo escribe CSS en el buscador y alguna palabra que especifique lo que buscas y listo.

✤✤✤

Que marea un poco? claro que sí, por lo que lo dejaré hasta aquí, lo demás lo dejo para otro post. Un beso enorme para todes y entreténganse en la cuarentena que no queda otra, gracias por leer!

La hermosa fotografía de portada es de  Marina Mazur desde Unsplash.