Cómo cambiar el estilo CSS de una plantilla WordPress

1638793735 Como cambiar el estilo CSS de una plantilla WordPress

Sé de buena tinta lo que es cambiar el estilo CSS de una plantilla de WordPress «a mano» y puedo asegurarte que no es tan difícil como parece. Pero lo es menos aún si sigues estos consejos que te da Sergio Kolomiychuk, un crack del diseño en WordPress.

No pierdas detalle porque gracias a él parece que está chupao. 🙂

¡Te dejo con Sergio!


 

Índice

    Personalizando el estilo CSS de tu WordPress

    Estoy seguro de que en algún momento has querido cambiar el color, poner una imagen de fondo, modificar el tamaño del texto…  y no has podido porque la plantilla no te da la posibilidad de hacerlo.

     

    En este post te voy a explicar cómo modificar el estilo de tu web aunque seas un completo novato en WordPress y no tengas conocimientos técnicos. Eso sí, para personalizar tu plantilla vas a tener que hacer pequeños retoques de CSS.

     

    Así que primero tienes que entender qué es y cómo funciona el CSS en WordPress.

     


     

    🖌 ¿Qué es y cómo funciona el CSS en WordPress?

    Las siglas CSS provienen del inglés Cascading Style Sheets, o lo que es lo mismo en español hoja de estilo en cascada. Seguramente te has quedado igual, jeje.

     

    Resumiendo en pocas palabras, el CSS se encarga de dar estilo a los diferentes elementos HTML que componen una página web. Y funciona a base de selectores y propiedades.

     

    Lo selectores sirven para indicar a qué elemento HTML se debe aplicar un estilo (propiedades).

    Hay 3 tipos de selectores:

    • Selector de elemento: hace referencia a una etiqueta HTML, en este caso a una etiqueta H1.

    h1 { color:#FFFFFF; font-size:36px;}

     

    • Selector de ID: sirve para seleccionar un elemento específico, por lo que el id debe ser único.

    #contacto { color:#333; background-color:#FFFFFF; }

     

    • Selector de clase: selecciona el elemento HTML con una clase específica. Éste es el selector que más se utiliza.

    .boton {color:#FFFFFF; background-color: red; }

     

    El selector .boton hace referencia a todas las etiquetas HTML que tengan asignada la clase «boton» e indica que deben tener las propiedades de:

    · color: #FFFFFF;  ▸  (color de texto blanco ya que #FFFFFF en hexadecimal equivale al color blanco)

    · background-color: red;  ▸   (color de fondo rojo)

     

    Por ejemplo, esta etiqueta HTML <a class=”boton”> tendría el estilo definido en .boton.

     

    Cada plantilla de WordPress tiene, por obligación, una hoja de estilo llamada style.css donde está definido el aspecto de la misma a base de selectores y propiedades que acabas de ver.

     

    La gran ventaja de CSS es que está planteado para que sus propiedades sean sobrescritas. Esto quiere decir que si tu plantilla tiene definido que el color de las etiquetas H1 sea blanco, tú puedes simplemente sobrescribir esa propiedad sin alterar el archivo style.css original.

     

    🖌 Cómo modificar el estilo CSS de tu plantilla WordPress

    Te dejo el vídeo que he preparado y en el que te explico cómo modificar el estilo CSS de tu plantilla WordPress:

     

    O si lo prefieres, aquí tienes también por escrito todos los pasos necesarios. 🙂

     

    🔸 Cómo usar el Inspector de Elementos de Google Chrome

    Para sobrescribir el estilo de tu plantilla primero hay que identificar el elemento que quieres modificar y su selector/clase.

    Para ello tendrás que usar el «Inspector de elementos» de tu navegador.

     

    El inspector de elementos es una herramienta que tienen todos los navegadores como FireFox, Internet Explorer (o como lo llaman ahora: Edge) y Google Chrome entre otros.

    Lo que te permite es ver el código HTML y CSS de cualquier página web.

     

    Te recomiendo que uses el de Google Chrome porque es el que me parece más completo y fácil de interpretar.

     

    Para abrir el inspector de elementos puedes usar la tecla F12, el atajo de teclado Ctrl+Mayús+i haciendo clic derecho sobre el elemento que te interesa modificar y en la opción de «Inspeccionar«:

     

    Menú «Inspeccionar» en Google Chrome

     

    Yo utilizo este último método porque así me sitúa directamente en elemento de la web que me interesa. De la otra forma tendría que navegar por toda la estructura de la web hasta encontrar el elemento que quiero modificar.

     

    Cuando lo abras, te saldrá un panel en el navegador en el cual verás, por un lado todo el código HTML, y por el otro el estilo de la página (CSS). Aunque al principio pueda parecer un poco complejo realmente es bastante sencillo de utilizar.

     

    Inspector de elementos de Google Chrome

    Inspector de elementos de Google Chrome

     

    Al pasar el ratón por la parte de código verás que se van resaltando los diferentes elementos de la web. De esta forma puedes localizar el elemento que quieres modificar.

     

    Una vez que lo tengas seleccionado, en el panel de CSS verás los selectores que afectan a ese elemento y sus propiedades.

     

    En el panel de CSS puedes hacer pruebas modificando las propiedades que aparecen o añadiendo nuevas.
    No tengas miedo de hacer todos los cambios que quieras, ya que estos no se guardan. Al actualizar la página (F5) todo volverá a su estado original.

     

    Cuando inspeccionas elementos tipo menús, enlaces, botones o cualquier elemento que tenga el efecto hover (quiere decir que su estilo cambia al pasar el ratón por encima) hay un problema: el estilo que tienen cuando pasas el ratón por encima no se muestra en el panel de CSS salvo que efectivamente pases el ratón por encima.

     

    Para evitar esto puedes fijar el estado de cualquier elemento haciendo clic derecho sobre él y marcando el estado en el cual lo quieres fijar.

     

    Hay 4 estados diferentes:

    • Active  ▸  es el estado en el que se encuentra el elemento desde que el usuario presiona el botón del ratón sobre él hasta que lo suelta (por ejemplo un botón).
    • Hover  ▸  es el estado en el que se encuentra el elemento mientras el usuario coloca el puntero sobre él (por ejemplo un menú).
    • Focus  ▸  es el estado en el que se encuentra el elemento cuando recibe el foco del usuario seleccionándolo con el teclado o con el ratón (por ejemplo un campo de un formulario).
    • Visited  ▸  es el estado en el que se encuentra el elemento cuando el usuario ya ha hecho clic en él (por ejemplo un enlace).

     

    Ejemplo del estado hover en el inspector de elementos

    Ejemplo del estado hover en el inspector de elementos

     

    Una vez que lo marques permanecerá con ese estado y podrás ver las propiedades CSS que tiene entonces.

     

    🔸 Añadir y sobrescribir CSS en WordPress

    Ahora que ya sabes identificar los elementos y sus selectores puedes pasar a modificar las propiedades de los mismos.

     

    El método para hacerlo es bastante sencillo.

    Consiste en sobrescribir las propiedades de los elementos que quieres modificar sin alterar el archivo original style.css de la plantilla. Porque si modificas directamente el fichero style.css, al actualizar la plantilla todos esos cambios se perderán (a menos que uses un tema hijo).

     

    Lo que yo hago es usar un plugin que me permite añadir CSS propio, de esta forma no tengo que modificar el archivo original. También existen plantillas que incluyen la posibilidad de insertar CSS propio sin tener que recurrir a plugins, aunque la mayoría no tienen esa opción.

     

    El plugin que suelo utilizar es Simple CSS. Con él puedes añadir CSS desde el “customizador” de WordPress y ver los cambios en vivo.

     

    Editor de estilos del plugin Simple CSS

    Editor de estilos del plugin Simple CSS

     

    Todo el CSS que añadas aquí se guardará en la base de datos y los cambios no se perderán al actualizar la plantilla.

     

    Supongamos que tienes el siguiente blog y quieres añadir un borde, cambiar el color del texto y redondear las esquinas de cada post:

     

    Ejemplo de personalización del estilo de un blog

    Ejemplo de personalización del estilo de un blog

     

    Primero tendrías que identificar la etiqueta HTML que engloba cada post y la clase CSS que tiene. Eso se haría con el Inspector de Elementos.

     

    Selección de la etiqueta HTML con el Inspector de elementos

    Selección de la etiqueta HTML con el Inspector de elementos

     

    Como puedes ver en la imagen he seleccionado la etiqueta HTML que engloba todo el post, y es la que me interesa modificar. En este caso es una etiqueta <div> con las siguientes clases CSS:

    .separate-containers .inside-article {

    background-color:#FFFFFF;  ▸   (color de fondo)

    color:#3a3a3a;  ▸   (color de texto)

    }

     

    Ahora sólo hay que copiar estas clases dentro de Simple CSS y añadir las propiedades correspondientes para cambiar su estilo.

     

    El código sería algo parecido a esto:

     

    Código en Simple CSS

    Código en Simple CSS

     

    Y éste sería el resultado:

    Cambio de estilo CSS en WordPress

    Cambio de estilo CSS en WordPress

     

    Como ves, el estilo ha cambiado correctamente. Pero analicemos este código primero:

    • He añadido dos propiedades nuevas que no estaban: border y border-radius.
    • Y he sobrescrito la propiedad de color a #555 (gris clarito).

    Y así ha quedado tan requetebien. 🙂

     

    👀 ¡Ojo!

    En algunos casos los estilos de la plantilla tienen mayor prioridad y tus cambios de estilo no se tomarán en cuenta.

    En ese caso habría que usar unos selectores de mayor especificidad o usar la etiqueta !important.

     

    Te lo voy a explicar de la forma más simple posible ya que es importante que lo entiendas, porque vas a tener que recurrir a estos métodos.

     

    Fíjate en el código CSS que he añadido:

    .separate-containers .inside-article {

    color: #555;

    border: 2px solid #888;

    border-radius:10px;

    }

     

    He utilizado dos selectores/clases CSS: «.separate-containers» seguido de «.inside-article».

    Con esto estoy diciendo que: dentro de la etiqueta HTML que tenga la clase separate-containers, la etiqueta HTML que tenga la clase inside-article tiene el siguiente estilo: color:#555 border: 2px solid…

     

    Al ser tan específico, ese estilo tiene mayor valor/prioridad que si lo pusiera de esta otra forma:

    .inside-article {

    color: #555;

    border: 2px solid #888;

    border-radius:10px;

    }

     

    En este segundo código no hay ninguna condición, simplemente estoy asignando un estilo a una clase.

    Entonces, si uso este segundo código con las propiedades border y border-radius no tendría problema, ya que éstas son nuevas y no sobrescriben ningún otro estilo sino que lo añaden.

     

    En cambio, la propiedad de color sí que sobrescribe el estilo de la plantilla. Pero no siempre lo hace, porque si el estilo de la plantilla tiene mayor valor, no te va hacer ni puñetero caso. 🙁

     

    Esto es lo que se llama especificidad en CSS.

    Si ves que la plantilla no está cogiendo tus estilos personalizados intentar ser más específico con tu código CSS.

     

    La otra solución es usar la etiqueta !important.

    Te puede Interesar  aprende qué es y cómo optimizarlo para tus videos

    La etiqueta !important sirve para dar prioridad a tus estilos personalizados por encima del resto. Básicamente al usar esta etiqueta estás diciendo «- Lo que yo diga va a misa» y te saltas todas las reglas de CSS. 🙂

     

    Aquí tienes un ejemplo de su uso:

    .inside-article {

    color: #555 !important;

    border: 2px solid #888;

    border-radius:10px;

    }

     

    El uso de esta etiqueta realmente no es una buena práctica ya que rompe el comportamiento natural de CSS. Mi consejo es que si la puedes evitar, mejor; pero tampoco va pasar nada malo si la usas.

    Es sólo que está pensada para que se use en casos especiales, cuando no hay más remedio.

     

    Cambiar el CSS de una página específica de WordPress

    Otro de los motivos por el cual utilizo Simple CSS es porque permite modificar el estilo de una página o post en concreto, sin que afecte al resto de la web.

     

    El procedimiento es el mismo que he explicado antes pero con una pequeña diferencia. El CSS no lo debes introducir en Apariencia->Simple CSS sino dentro de la página o post del que quieres cambiar el estilo.

     

    Cuando estés editando una página o post, abajo verás un panel que se llama «Simple CSS»:

     

    Añadir CSS a una página o post específico

    Añadir CSS a una página o post específico

     

    Así, todo el CSS que introduzcas ahí solo afectará a la página que estés editando en ese momento. 🙂

     

    ¿Cómo insertar CSS en los post de WordPress directamente?

    Hasta ahora has visto cómo alterar el estilo de tu plantilla mediante CSS. Pero también puedes crear estilos nuevos y aplicarlos donde quieras.

     

    Imagínate que quieres añadir un enlace de descarga en uno de tus posts, pero que ese enlace tenga el aspecto de un botón. Lo puedes hacer de forma muy sencilla mediante CSS personalizado siguiendo estos pasos:

     

    1)  Dentro de Simple CSS tienes que crear una clase con el estilo de tu botón. Yo voy a crear una clase que se llame «mi-btn« con el siguiente estilo CSS:

    /* Estilo del botón */

    .mi-btn {

    background-color: #3AC569;

    margin-right: 10px;

    padding: 12px;

    border-radius:4px;

    color:#fff !important;

    }

     

    /* Efecto hover (al pasar por encima del botón) */

    .mi-btn:hover {

    -webkit-transition: all 60ms ease;

    transition: all 0.5s ease;

    opacity: .85;

    }

     

    Si te fijas, he añadido la etiqueta !important para que mi estilo sobrescriba el color por defecto de los enlaces.

     

    2)  Ahora que tienes el diseño del botón definido, sólo hace falta añadir la clase «mi-btn» a un enlace dentro del post.

     

    En el editor del post entra en la pestaña HTML y busca el enlace al cual le quieres añadir el nuevo estilo tipo botón. Te recomiendo usar el buscador del navegador (Ctrl+f) para encontrarlo fácilmente, ya que en modo HTML es más complicado localizar las cosas al ser todo texto plano.

     

    En mi caso he creado un enlace con el texto «Descargar PDF«.

     

    Editando el estilo CSS en un enlace de un post en WordPress

    Editando el estilo CSS en un enlace de un post en WordPress

     

    Ahora añade class=»mi-btn» dentro de la etiqueta <a> tal y como aparece en la imagen.

    Así es como quedaría el enlace:

    <a class=»mi-btn» href=»http://localhost/wordpress/post-2/»>Descargar PDF</a>

     

    3)  Guarda los cambios y observa el resultado:

     

    Resultado del estilo CSS personalizado tipo botón

    Resultado del estilo CSS personalizado tipo botón

     

    Si lo has hecho correctamente deberías ver un botón parecido al de la imagen.

     

    Es un método bastante sencillo de insertar CSS en los posts de WordPress sin usar ningún plugin.

     

    🔸 Ten cuidado con ciertas propiedades CSS

    Cambiar la apariencia de tu plantilla modificando el CSS es relativamente fácil, pero con ciertos elementos tienes que tener cuidado porque te puedes cargar la estructura de la web.

     

    Ten en cuenta que el CSS además del aspecto visual también se encarga de dar estructura a tu web, y puedes «romper» el diseño de la web si alteras ciertas propiedades como:

    • width
    • heigh
    • padding
    • margin
    • position
    • display
    • entre otras…

     

    Estas propiedades controlan el tamaño y la posición de los diferentes elementos de la web.

    Si decides cambiar alguna de ellas asegúrate después de comprobar que tu web se ve correctamente en las diferentes resoluciones y que tus cambios no hayan alterado más cosas de la cuenta. 🙂

     

    Lo digo porque puede que aparentemente se vea todo bien, pero si te vas a la página del blog o a alguna entrada concreta es posible que pasen cosas «raras». También comprueba la web desde dispositivos móviles e incluso en diferentes navegadores.

    Sobre todo debes tener un especial cuidado con los menús.

     

    Por otro, lado las propiedades como:

    • color
    • background
    • text-family
    • border-radius
    • font-size
    • box-shadow
    • transform
    • entre otras…

     

    En principio no deberían causarte problemas al cambiarlas.

     

    🔸 Alternativas en forma de plugins

    Aunque usar el Inspector de elementos es bastante fácil, a veces es un poco complicado encontrar la clase correcta del elemento que quieres modificar. Además, quieras o no tendrás que aprender algo de CSS.

     

    Para eso existen algunos plugins que ya se encargan de buscar el selector correcto y todo el código CSS lo introduces de forma visual.

    Básicamente puedes cambiar el estilo de tu plantilla a golpe de clic.

     

    SiteOrigin CSS

    SiteOrigin CSS para personalizar plantillas de WordPress

     

    Un excelente plugin para añadir CSS propio a WordPress.

    Con él puedes editar el estilo de tu plantilla de forma visual y ver los cambios en vivo. Sólo tienes que seleccionar el elemento que quieres modificar, cambiar sus propiedades y el plugin se encargará de generar el código CSS necesario.

     

    Si acabas de empezar con WordPress o tienes cero conocimientos técnicos y todo esto te suena a chino, te recomiendo empezar con este plugin.

     

    Lo puedes descargar totalmente gratis desde el repositorio de WordPress:

    Más info sobre SiteOring CSS

     

    CSS Hero

    CSS Hero para personalizar la plantilla de WordPress

     

    Este sería una solución más profesional ya que es de pago y cuenta con opciones avanzadas. Al igual que con el SiteOring CSS, puedes modificar el estilo de forma visual.

     

    CSS Hero guarda el historial de tus modificaciones, cuenta con estilos prediseñados que puedes aplicar directamente a los elementos, te permite exportar tus estilos y reusarlos en otras webs, añadir animaciones, es compatible con las plantillas y plugins más populares de WordPress, etc.

     

    En general es un plugin mucho más completo y enfocado a un uso más profesional:

    Más info sobre Hero CSS

     

    Estas son las dos alternativas que yo conozco. Pero tengo que decirte que no utilizo ninguno de los dos porque me resulta más fácil trabajar directamente con el Inspector de elementos.

     

    Además, hay cosas a las que los plugins no llegan y toca hacerlo de forma manual sí o sí. 🙂

     

    🖌 Extensiones para analizar el estilo de una web

    Un poco de ayuda siempre viene bien, ¿verdad? Pues aquí te dejo una lista de las extensiones para Google Chrome que utilizo yo:

     

    ColorZilla

    Sin duda es la extensión que más utilizo. ColorZilla te permite sacar el color de cualquier elemento de la web con un clic. Además, guarda un historial de los colores que has sacado para no tener que volver a buscarlos.

     

    WhatFont

    WhatFont, extensión de Google Chrome

     

    Muchas veces me pica la curiosidad de saber qué tipografía usan otras webs. Con esta extensión puedes averiguar rápidamente la tipografía de una web simplemente pasando el ratón por encima y haciendo clic.

     

    Window Resizer

    Lo que hace esta extensión es redimensionar tu navegador a una resolución determinada. De esta forma puedes comprobar cómo se ve tu página en las diferentes resoluciones de pantalla y ver si tienes que corregir algo.

     

    User CSS

    User CSS, extensión de Google Chrome

     

    Esta extensión no la utilizo tanto como las anteriores pero en ciertos casos puede ser bastante útil. Lo que te permite es agregar estilos CSS y con un botón ver el antes y el después.

     

    Todo el CSS que agregues a esta extensión permanecerá guardado en la propia extensión, por lo que si actualizas la página tus cambios de estilo se mantendrán (esto resulta muy útil para hacer pruebas). Y una vez lo tengas todo listo y sin errores, lo aplicas a la web tal como te he explicado antes.

     

    🖌 Recursos y herramientas online para generar CSS

    Si quieres añadir algunos estilos un poco más avanzados, como por ejemplo degradados, transiciones o sombras, te resultará más fácil si utilizas alguna herramienta online para generar el código.

     

    Te lo digo porque estas propiedades son más complejas de configurar y necesitan de un código extra para que además sean compatibles con los diferentes navegadores.

    Aquí van algunos ejemplos:

     

    Cssmatic

    CSSmatic para generar sombras con box shadow en CSS

     

    En esta página web podrás generar sombras, degradados, texturas de ruido y bordes redondeados de forma visual.

    Es muy fácil de usar, y una vez que hayas terminado solo tienes que copiar el código y añadirlo a tu web como te he explicado en los apartados anteriores.

     

    Css3Generator

    Es una herramienta parecida a la anterior pero con algunas funcionas más, como el generador de transiciones y text-shadow entre otras de menor importancia.

     

    Codepen.io

    Codepen es un excelente recurso donde los usuarios suben códigos relacionados con el diseño y desarrollo web.

    Lo bueno es que puedes ver todo el código y ver cómo funciona. Puedes encontrar botones, menús, degradados… Ideal para coger ideas.

     

    🖌 Recursos para aprender CSS online

    Si quieres profundizar en el tema y aprender más sobre HTML y CSS te recomiendo estas dos webs:

     

    Codecademy

    Es una plataforma de formación online gratuita (también cuenta con un plan de pago) donde puedes aprender a usar HTML y CSS de forma muy práctica.

     

    Además, resulta bastante entretenido porque te dan logros y puntos por completar los ejercicios. Parece que no, pero al final te enganchas y te pones hacer un ejercicio detrás de otro hasta terminar el curso. 🙂

     

    W3Schools

    En esta web encontraras toda la información y ejemplos prácticos sobre cada etiqueta y propiedad de HTML y CSS. Así que si tienes alguna duda, recurre a esta web primero.

     

    🚩 Resumen final

    Como ya has visto hay varias formas para cambiar el estilo de tu página web, ya sea usando el Inspector de elementos o mediante plugins. Pero también me gustaría destacar la importancia de una buena plantilla que puedas “customizar” sin apenas tener que recurrir a estos métodos.

     

    Ten en cuenta que cuanto más «visual» sea una plantilla, más complicado te resultará modificar su estilo. Al estar, digamos «cargada de CSS», es más complicado sobrescribir las propiedades y localizar el selector correcto.

     

    Si estás buscando una plantilla te invito a que leas mi review sobre GeneratePress. Es la plantilla que utilizo en mi web y que siempre recomiendo ya que es muy versátil y fácil de customizar.

    Es una especie de Genesis 2.0.

     

    Mi consejo es que vayas probando a hacer cambios, y poco a poco le irás pillado el truco a cambiar el CSS de plantillas en WordPress. Y  si aprendes un poco de CSS y HTML, mejor que mejor.

    ➤ Te puede interesar: Diferencias entre WordPress.com y WordPress.org

    Espero que te haya servido este tutorial, y si tienes alguna duda estaré encantado de ayudarte. 🙂

     

     

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información