Editar CSS de un theme de WordPress

Personalizar un theme de wordpress, pasa por editar el CSS de tu theme, que esta definido en el archivo style.css, que ccontrola no solo el aspecto visual de todos los elementos, sino también la estructura de los elementos del blog, es decir, el CSS es la base de tu blog, sin CSS tu blog no es nada.  Cada theme es mundo, por tanto el CSS no es el mismo para todos

Es cierto que la mayoría de los themes se pueden personalizar desde el panel de control, pero sobre todo en los themes gratis, esas opciones suelen ser muy limitadas, y lo mismo se puede decir de Genesis framework, para sacarle todo su partido, hay tocar el CSS.

El caso es que si quieres modificar a fondo tu blog, salvo themes premiun paneles de control muy completos(como la mayoría de los themes de themeforest o DIVI), tienes que tocar el CSS si o si.

En este artículo, te voy a dar unas pinceladas basicas para modificar el CSS de tu theme, además de recomendar algunos plugins que te puede ayudar.

En un artículo anterior, hable brevemente del CSS en general ¿Qué es CSS?

Como editar CSS en wordpress

Se puede editar el CSS de tu theme, de varias formas,  según te convenga. Por defecto, tenemos dos opciones en el panel de control, bien en el personalizador(desde la versión 4.7) o desde el editor de archivos.

Muchos themes, sobre todos premiun también incluyen la posibilidad de añadir CSS personalizado, en su panel de control.

Por otra parte hay algunos plugins para editar CSS:

  • Jetpack: La navaja suiza que todo blog debe de tener, tiene un modulo para editar CSS
  • Simple Custom CSS: Este plugin añade un editor CSS, muy facil de usar
  • Simple CSS: Este plugin te permite editar el CSS de tu theme, en tiempo real, es decir puedes ver los cambios al instante.

Y como siempre, puedes recurrir al método tradicional, editar directamente el archivo stlye.css de tu theme, pero teniendo en cuenta al actualizar tu theme, se perderán los cambios que hayas echo, por tanto, debes hacer un backup antes de actualizar, para recuperar después los archivos modificados, o bien usar un tema hijo o child theme,  para no perder los cambios al actualizar. Yo si es posible, prefiero usar un child theme.

Editar CSS con firefox o Chrome

Te voy a enseñar a modificar el CSS de tu blog, desde tu navegador, firefox o chrome, usando el examinador web, es una opciones que esta un poco escondida. En chrome, tienes que dar doble clic con el ratón y pulsar inspeccionar o simplemente pulsar la tecla f12 de tu teclado, en firefox, lo mismo, solo que en este caso, la opción es inspeccionar elementos, seleccionando el elemento que quieras editar.

En esta captura puedes ver en acción el examinador web, en un columna,  vemos el código html y en otra el CSS, ademas nos indica la linea aproximada del archivo style.css, en el ejemplo, he seleccionado el header de mi blog, pero puedes seleccionar cualquier elemento de tu blog para ver el CSS. Además, puede ir haciendo los cambios para verlos en acción, antes de añadirlos en tu archivo CSS. De este modo, puedes editar el CSS de tu blog, de forma facil y en tiempo real.

Un ejemplo de edición de CSS

Ahora te voy a mostrar tomando como referencia uno de los themes por defecto de wordpress, Tweenty Tweelve, te voy a mostrar como editar el CSS, por partes.

Ten cuenta,que cada plantilla es mundo, para el ejemplo he cogido una plantilla basca, si vemos una plantilla de themeforest por ejemplo, el CSS sera totalmente diferente y muy complejo

Vamos a empezar con algo muy fácil, cambiar el color de fondo, en este caso, la etiqueta que define el color de fondo es body.

siendo background-color el color de fondo, que se define con su valor hexadecimal, en ejemplo he puesto el negro #0000. Y si quieres una imagen de fondo, simplemente cambie background-color por background-image y la url de la imagen o la ruta del directorio.

Ahora voy te voy a mostrar como cambiar varios aspectos del header o cabecera.

Este trozo de CSS define el estilo del texto de la cabecera,  tanto el titulo principal como el subtitulo, en el caso de que no tengas un logo.  Te voy a explicar varias etiquetas:

  • text-aling, define si el texto esta centrado,  a la derecha o la izquierda,  en ejemplo esta centrado, para poner la derecha o izquierda, solo tienes que sustituir center, por left o right
  • a: hover,  define el efecto de cambiar el color de los enlaces al pasar el curso, en el ejemplo solo para el H1, el titulo principal
  • text-decoration, define si el texto va negrita o cursiva, en este caso, no el H2 va sin estilo. Para negrita o cursiva, se usan las etiquetas bold y italic
  • font-size, define el tamaño del texto en pixeles,  en el ejemplo 24px
  • display, este etiqueta define como se muestra el texto, en el ejemplo inline block, es decir una misma linea

Continuo, con la sidebar, que nuestro ejemplo,  que define la etiqueta .widget-area,  que vemos aquí:

 

En este trozo de código, puedes cambiar el color de fondo y de texto, el tamaño de fuente, el ancho de la sidebar, entra otras cosas.

Ahora te voy a mostrar como modificar el footer o pie de pagina

Varias cambios puedes hacer tocando este trozo de CSS, aparte del color y el tamaño de fuente del texto:

  • Puedes cambiar los margenes, que definen  las etiquetas margin-top/left/right,  superior, izquierdo y derecho.
  • El color y grosor del borde, que define la etiqueta border-top, en el ejemplo esta definido a 1 px con un colo azul claro.
  • El ancho máximo, que define la etiqueta max-width

Por ultimo te recuerdo las etiquetas fundamentales que he explicado en este ejemplo:

  • background-color
  • background-imagen
  • text- decoration
  • text- align
  • margin-top
  • margin-left
  • margin-right
  • font-size
  • display
  • border-top
  • max-width
  • color

 

Con esto, te de enseñado aunque muy por encima, a modifcar el CSS de tu blog, si tienes alguna duda, puedes dejarla en los comentarios y te la responderé.

Más sobre editar CSS en wordpress
Te recomiendo dos estupendas guías, de Manuel Vicedo y Sergio Kolomiychuk

Guía De Personalización WordPress: Cambios CSS

Cómo cambiar el estilo CSS de una plantilla WordPress

Soy Angel García,diseñador web especializado en WordPress y community manager. Creador de WebmasterCreativo, mi blog, de desiño web en WordPress y redes sociales. Además soy licenciado en Historia.

3 comentarios en “Editar CSS de un theme de WordPress

  1. Hola Angel, gran artículo!!! Yo estoy empezando con wordpress para un proyecto de estudios, y tengo instalado un tema de pago. He creado una plantilla page-propia.php y necesito aplicar algunos estilos personalizados. Pensaba incluirlos en style.css y utilizar un tema hijo, pero he hecho la prueba y no funciona (en mi caso uso un tema de pago y style.css sólo incluye los comentarios sobre el tema, pero no definiciones de estilos, hay otros archivos en carpeta css/ y cuando inspecciono elementos con el examinador web, veo que la mayoría de los estilos provienen de master-min.php, un archivo que tiene includes de muchos css del tema, pero no del style.css. Veo que el archivo css/main-style.css es el que contiene la mayoría de los estilos, pero no sé si éste puedo personalizarlo en un tema hijo..
    Cuál puede ser la razón de que no funcionen las modificaciones en style.css?Muchas gracias por tu ayuda.

Deja un comentario