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 NEGRO 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 DE TODO EL BLOG 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, UN BONITO DETALLE ES EL TEXT-SHADOW Y FONT-WEIGHT PARA AFINAR LA GRAN LETRA, AMBOS OPCIONALES:

.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;
 } 

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

a.more-link {
 display: none;
 }
 
a.read-more { 
 display: none; 
 } 

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

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

AQUÍ YA SE VIENE UN POQUITO MÁS COMPLICADO, PARA CAMBIAR LA FORMA STANDARD DEL MENÚ EN LA CABECERA, TENER EN CUENTA QUE LA PRIMERA LÍNEA DEL CÓDIGO PUEDE VARIAR SEGÚN LA PLANTILLA O TEMA QUE ESTÉS UTILIZANDO:

.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;
 } 

TEXT-TRANSFORM:

ALGUNOS DATOS:

LOWERCASE: convierte todo el texto en minúscula.

UPPERCASE: CONVIERTE TODO EL TEXTO EN MAYÚSCULA.

INITIAL: La primera letra del párrafo va en mayúscula y todo lo demás en minúscula.

CAPITALIZE: Cada Primera Letra Del Párrafo Va En Mayúscula.

OBLIQUE PONE TU TEXTO EN CURSIVA O ITALIC

LIGHTER afina o adelgaza la letra, pero si la quieres más gruesa o en negrita utiliza BOLD ó BOLDER.

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

TEXT-ALIGN: alineación o ubicación del texto que puede ser:

Left=izquierda,

Right=derecha

Center=centrado.

BLOCKQUOTE: YO ESCOGÍ ESTE TEMA EN PARTICULAR PORQUE EL ESTILO PARA PONER UNA CITA ES HERMOSO Y NO TIENE NECESIDAD DE ARREGLO ALGUNO, PERO NO TODAS LAS PLANTILLAS SON IGUALES (aunque podría mencionar la del tema VENI que también tiene un aspecto muy bonito) Y ALGUNAS REQUIEREN UN PEQUEÑO RETOQUE:

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 y al parecer tenemos para rato, gracias por leer!

La hermosa fotografía de portada es de  Micheile Henderson @micheile desde Unsplash.

déjame tu opinión, gracias por pasar!

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .