Cambiar con CSS el estilo del tema Twenty Seventeen de WordPress
Actualizado: 17 de noviembre del 2022
Por: Norfi Carrodeguas
Por: Norfi Carrodeguas
Modificar el ancho de las columnas, el tamaño del texto, de los encabezados, la fecha de publicación, colores y otros elementos visuales y de la estructura del blog.
El tema Twenty Seventeen de WordPress, el más reciente en el momento de esta publicación, posee un estilo muy atrayente para negocios locales, páginas personales y otros temas, que requieren mucho contenido visual.
No obstante los que en su blog publican principalmente contenido de texto, encuentran muy reducida y estrecha la columna principal, así como otros elementos en el modo de Escritorio o sea como se ve en computadoras y Laptops.
Su estructura se puede modificar fácilmente alterando las reglas CSS, pero la gran mayoría no sabe cómo hacerlo.
En este artículo comparto el código y un archivo CSS que se puede descargar y subir al servidor, para personalizar nuestro tema visual a nuestro gusto.
Hoja de estilo CSS personalizada para Twenty Seventeen
Con el siguiente código se puede crear una hoja de estilo adicional, para modificar el estilo visual del tema Twenty Seventeen de WordPress.Las líneas encerradas entre los caracteres /* */ son comentarios de las reglas que le siguen.
Los valores de todas las reglas se pueden cambiar, hasta quedar satisfechos con los resultados.
Las que no se deseen aplicar, se pueden eliminar del archivo o comentarlas.
/*
* Theme Name: Twenty Seventeen Child Theme
* Template: twentyseventeen
* Author: Norfi Carrodeguas
*/
@import url("../twentyseventeen/style.css");
/* Ocultar fecha de publicacion */
.entry-date{display:none;}
/* Aumentar fuente 1er encabezado */
h1 {font-size: 30px;line-height: 1.2;}
/* REGLAS PARA EL MODO TABLET */
@media screen and (min-width: 30em) {
body {font-size: 17px;}
h1 {font-size: 32px;line-height: 1.3;}
/* Reducir altura barra de la marca */
.site-branding {padding: 1.2em 0;}
}
/* REGLAS PARA EL MODO ESCRITORIO */
@media screen and (min-width: 48em) {
/* ancho contenedor y de las dos columnas*/
.wrap {max-width: 1100px;}
.has-sidebar #secondary {width: 25%;}
.has-sidebar:not(.error404) #primary {float: left;width: 71%;}
/* Aumentar fuente contenido */
body {font-size: 18px;}
/* Aumentar tamaño nombre sitio */
.site-title {font-size: 2em;}
/* Aumentar fuente 1er encabezado */
#content h1{font-size: 34px;line-height: 1.3em;}
/* reducir espacio bajo la barra de marca*/
.site-content {padding: 2.6em 0 0;}
}
Otros elementos de la página que se deseen modificar se pueden agregar.
La clase asignada a dichos elementos se puede conocer, comprobando el código fuente o inspeccionando dicho elemento, usando en el menú contextual la opción “Inspeccionar” en el navegador web.
Reglas CSS según el tipo de dispositivo
– En el código anterior las primeras reglas son globales y se aplican para todos los tipos de dispositivos.– Las reglas encerradas entre “@media screen and (min-width: 30em)”, se aplican solo a dispositivos con un ancho mayor a 30em (tabletas o lectores).
– Las reglas encerradas entre “@media screen and (min-width: 48em)”, se aplican solo a dispositivos con un ancho mayor a 48em (computadoras de escritorio y tabletas).
Como agregar el CSS personalizado a WordPress
Para agregar el archivo CSS que permita personalizar el estilo visual de WordPress, haz lo siguiente:1- Copia el código anterior y pégalo en un nuevo archivo de texto creado en el escritorio.
2- Guarda los cambios y dale el nombre “style.css” (sin .txt al final).
3- Accede al servidor por SFTP o mediante el Panel de control y en el interior del directorio “themes”, situado en “wp-content”, crea una nueva carpeta de nombre “twentyseventeen-child”.
Esta nueva carpeta ahora funciona como un Tema Child o descendiente, en la que se pueden situar plantillas y archivos de configuración.
4- Copia el archivo “style.css” a su interior.
Las reglas dentro de dicha hoja de estilo, ahora tienen prioridad, respecto a las del archivo original del tema.
5- Carga cualquier página del sitio para comprobar los cambios.
Descarga un archivo “style.css” de muestra, usando el siguiente enlace:2- Guarda los cambios y dale el nombre “style.css” (sin .txt al final).
3- Accede al servidor por SFTP o mediante el Panel de control y en el interior del directorio “themes”, situado en “wp-content”, crea una nueva carpeta de nombre “twentyseventeen-child”.
Esta nueva carpeta ahora funciona como un Tema Child o descendiente, en la que se pueden situar plantillas y archivos de configuración.
4- Copia el archivo “style.css” a su interior.
Las reglas dentro de dicha hoja de estilo, ahora tienen prioridad, respecto a las del archivo original del tema.
5- Carga cualquier página del sitio para comprobar los cambios.
Descargar CSS
Como editar o modificar el CSS personalizado
Para hacer cambios a partir de este momento en dicho archivo, se necesita reemplazarlo por una copia modificada o editarlo desde el Editor incluido en el panel de administración de WordPress.Dicho Editor está situado en Apariencia.
Para editar el archivo style.css agregado, selecciona en el menú deslizante de la derecha “Twenty Seventeen Child Theme” y en el archivo mencionado.
Más información sobre CSS
Como usar las hojas de estilo CSSManual básico del uso de los estilos CSS