RadioWordPress #18: Modificar CSS en un Child Theme

Hoy vamos a hablar de cómo modificar el CSS de un child-theme, realmente es algo bastante fácil que nos va a permitir cambiar la apariencia de nuestra web en pasos sencillos.

En nuestro ejemplo nos vamos a basar en el inspector de Chrome y vamos a utilizar la plantilla de child-theme creada el lunes.

Recordad que os dejo la transcipción completo del audio por si queréis revisarla, para ello pinchar abajo donde pone «Ver transcripción».

Pantallazo de edición de CSS con el inspector de Chrome

Fichero style.css del child-theme

/*
 
Theme Name: Twentyseventeen Child Theme
 
Theme URI: https://blog.tecnocratica.net
 
Description: Un tema hijo de twentyseventeen
 
Author: Tecnocratica
 
Author URI: http://blog.tecnocratica.net

Template: twentyseventeen
 
*/

@import url("../twentyseventeen/style.css")

/*Modificación del ancho de las columnas*/
@media screen and (min-width: 48em){
.has-sidebar:not(.error404) #primary {
    width: 73%;
    }
}
@media screen and (min-width: 48em){
.has-sidebar #secondary {
    width: 21%;
    }
}

[showhide type=»transcripcion» more_text=»Ver transcripción(%s más palabras)» less_text=»Esconder transcripción (%s menos palabras)»]

Transcripción

Hola a todos, yo soy Eduardo, esto es RadioWorpdress y ya no estamos en radiowordpress.com, hemos cambiado de dominio a eduardocollado.com, os cuento.

El otro día Jorge, un oyente del podcast me mandó un correo en el que me comentó que parece ser que WordPress tiene unas restricciones en cuanto al nombre de dominio a utilizar, y te sugieren no usar la palabra wordpress en el dominio porque tienen la marca reservada y bueno, no te dicen que te vayan a denunciar, pero a buen entendedor pocas palabras.

No se qué validez tendrá eso en España, intuyo que poca, pero el dominio es un .com, con lo cual es un dominio americano y he optado por hacer una transición ordenada de dominio antes de que a alguien se le ocurra decirle al ICANN alguna cosa extraña y me pudieran bloquear.

Realmente este podcast no me da un duro, por lo que no me merece la pena dedicar esfuerzos a algo que no sea generar contenido que creo que es lo que tengo que hacer.

Y no lo he dicho, pero el podcast ahora estará en eduardocollado.com, donde podréis ver el reproductor directamente en la página principal y además en la barra lateral, la que está en la izquierda si pincháis en RadioWordpress tendréis ahí los programas.

Bueno, vamos a lo que nos ocupa hoy que es la modificación del css en un Child Theme, un tema muy chulo y bastante rápido, así que vamos a ello.

—MUSICA—

Para editar el CSS de un child theme lo primero que vamos a necesitar es un navegador que tenga la opción de inspeccionar código, en mi caso uso para este fin Chrome.

Por supuesto tenemos que tener un child theme, podéis probar crearlo a partir de twentyseventeen. Para ello recordad que simplemente es crear un directorio nuevo en el directorio wp-content/themes con el nombre que queráis, por ejemplo twentyseventeen-child.

En ese nuevo directorio lo único que tenéis que hacer es crear el style.css con las instrucciones que os di en el programa del Lunes, con las líneas de comentarios que daban información sobre el child theme. Y luego hacer el import del style.css original o copiarlo, como prefiráis.

Bien, con esto tenemos ya el child-theme creado y podemos empezar

—MUSICA—

Vamos a abrir nuestro WordPress con el tema twentyseventeen y vamos cofigurarlo sin imágenes de cabecera.

Ahora lo que vamos a hacer es con el botón derecho del chrome seleccionar en la parte superior de la columna de la derecha, la estrecha y le daremos a inspeccionar, con el botón derecho.

Aquí chrome nos va a abrir la ventana de inspección, es difícil explicarlo con un audio, pero lo notaréis porque os abrirá la pantalla de inspección, os dejo un pantallazo en las notas del programa en eduardocollado.com en el capítulo titulado «RadioWordpress #18: Modificar CSS en un Child Theme»

Ahí tenéis que buscar width: 36%, ese es el valor que queremos modificar y vamos a modificarlo por 21% para hacer esa columna más estrecha, luego haremos la de la izquierda más ancha.

Ahora tendréis que copiar el contenido del bloque completo en vuestro style.css,

@media screen and (min-width: 48em){
.has-sidebar #secondary {
    width: 21%;
    }
}

Fijaros que Chrome no pone las llaves necesarias, así que tendréis que añadir las llaves del @media, tanto la de abrir como la de cerrar.

En las notas del programa os dejo el ejemplo concreto para que podáis verlo.

En el caso de la columna de la izquierda haremos lo propio y cambiaremos el tamaño a 73%, de esta manera conseguiremos que nuestra columna de la izquierda sea más ancha.

—MUSICA—

En definitiva, aquí lo importante a entender es que podemos sobreescribir el CSS inicial con las modificaciones del CSS nuevo que estamos escribiendo.

Si este código lo hubiéramos escrito en el personalizador del tema habría funcionado igual, pero el código en vez de estar en un style.css estaría en base de datos, lo cual es un poco asquerosito, la verdad.

Mirar en las notas del programa en eduardocollado.com en el capítulo titulado «RadioWordpress #18: Modificar CSS en un Child Theme» que tenéis el ejemplo escrito y es muy visual.
[/showhide]