• Saltar a la navegación principal
  • Saltar al contenido principal

Dani Sánchez - Gestionatuweb

Desarrollador web freelance

  • Quién soy
  • ¿Eres agencia?
  • WordPress
    • Mantenimiento WordPress
    • Desarrollo WordPress
    • Soporte técnico WordPress
  • Cursos
  • Blog
  • Portfolio
  • Solicita Presupuesto
simple custom css

Modifica el CSS de tu tema WordPress sin perder los cambios al actualizar

El 29 de agosto de 2016 por dani Deja un comentario

Aviso: Esta entrada tiene 2 o más años, es posible que el método difiera ligeramente, las capturas de pantalla no se correspondan con la versión actual o que la herramienta/complemento ya no esté disponible.

Siempre que instalamos un tema WordPress necesitamos adaptarlo a nuestras necesidades, ya sea alterando el tamaño de algunas capas o modificando los colores base. Los temas suelen tener algunas opciones de configuración en este aspecto, pero la mayoría se quedan demasiado cortas y nos vemos obligados a «tocar» el archivo CSS del tema manualmente.

Todos los temas tienen un archivo style.css donde está configurada toda la apariencia del tema. El problema es que si modificamos este este archivo style.css y en un futuro aparece una nueva actualización del tema, se sobreescribirá el archivo CSS y perderemos todos los cambios realizados.

Para ello existen algunos plugins que permiten modificar el CSS del tema sin tocar el archivo original style.css. Así si en el futuro actualizamos el tema, permanecerán todos los cambios que hayamos hecho.

Uno de los plugin más usados es Simple Custom CSS.

simple custom css

Accedemos al repositorio de plugins de WordPress, lo instalamos y activamos:

Instalar Simple Custom CSS

Para acceder al plugin nos dirigimos a Apariencia  – Custom CSS:

Menú de Custom CSS

La pantalla es, como el propio nombre del plugin dice, muy simple:

Pantalla Simple Custom CSS

En el campo /* Enter Your Custom CSS Here */ especificaremos las etiquetas CSS que queremos modificar, y los nuevos ajustes que deben prevalecer sobre los del archivo style.css del tema.

Por ejemplo, si quisiéramos cambiar el color negro de la barra superior de esta web:

Portada Web

Nos situamos con el ratón sobre la barra superior negra, y haciendo clic con el botón derecho del ratón, seleccionamos Inspeccionar (en Chrome):

Inspeccionar en Chrome

Y nos fijamos que la clase que controla el color de fondo de la barra de navegación superior es .navbar y que tiene configurado como background el color #000 (negro):

Inspeccionar etiqueta CSS

Podemos copiar toda la clase CSS:

copiar etiqueta CSS

Y pegarla en el campo de nuestro Simple Custom CSS:

Pegar clase CSS en Simple Custom CSS

Desde aquí modificamos el valor de color del background por el que deseemos, por ejemplo un tono azul, y para además dejarlo optimizado, eliminamos el resto de valores que no vamos a modificar, dejando solamente el background:

Simple Custom CSS modificado

Pulsamos en Update Custom CSS, y vemos que los cambios se han realizado correctamente:

Portada web modificada

Lo interesante es que aunque en el futuro actualicemos el tema, el color de la barra de navegación permanecerá azul, así como todos los cambios que hayamos hecho en otras clases del CSS.

Archivado en: Publicaciones, Tutoriales, WordPress Etiquetado como: desarrollo web, plugins, publicaciones, tutoriales, wordpress

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la política de privacidad

Hosting recomendado

Raiola Networks

Autor

Dani Sánchez
Dani Sánchez
@danisanchez82

Entradas recientes

  • Optimizar el archivo de configuración de WordPress (wp-config.php)
  • ¿Qué plugins tengo instalados en mi web en 2022?
  • Tu alojamiento web no es compatible con la rotación de imágenes. [Solución]
  • Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)
  • Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34

Comentarios recientes

  1. Armando en Instalar LAMP (Linux, Apache, MySQL y PHP) en Fedora 34
  2. Vito en Configurar en español los campos tipo fecha (date) en Ninja Forms
  3. Manel en Calcular rutas con OpenStreetMap partiendo de la geolocalización del usuario
  4. Leo en Modificar textos predefinidos de WordPress sin editar la traducción
  5. Alejo en Instalar LAMP en Manjaro (Linux, Apache, MySQL y PHP)

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Divi 20% descuento

Hosting Recomendado

Raiola Networks
Banner

Sitios web corporativos, blogs y tiendas online cuidando hasta el mínimo detalle

Si deseas proponerme un proyecto web ponte en contacto conmigo.

Contacto

Gestionatuweb © 2022 · Desarrollado con Genesis · Acceder
Política de privacidad · Política de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde a tus gustos. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias. Más información sobre las cookies que utilizamos en nuestra: Política de cookies.

Gestor de cookies:  GDPR Cookie Compliance
Resumen de uso de cookies

En Gestionatuweb.net utilizamos cookies técnicas para el correcto funcionamiento del sitio. Además, utilizamos cookies para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Otras cookies son usadas para servicios adicionales, como conexión con redes sociales, marketing o mostrar publicidad acorde con tus intereses. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no en el botón de Preferencias.

Cookies técnicas (necesarias)

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies. Estas cookies son:

  • moove_gdpr_popup: Comprueba si debe mostrar o no el aviso de cookies (si ya ha sido aceptado o rechazado no se vuelve a mostrar mientras persista esta cookie). Expira en 1 año.
  • cpnb_cookiesSettings: Comprueba qué categorías de cookies se aceptan o rechazan (por ejemplo, cookies analíticas, cookies de publicidad dirigida, etc.). Expira en 1 año.
  • _GRECAPTCHA: Esta web utiliza el servicio reCAPTCHA para fortalecer la seguridad en los formularios y evitar el envío masivo de SPAM. reCAPTCHA utiliza esta cookie necesaria para realizar su análisis de riesgo. Expira en 6 meses.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de analítica

Utilizamos Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares. Dejando estas cookies activas nos permite mejorar nuestra web.

  • _ga: Analítica de Google. Se usa para distinguir a los usuarios. Expira en 2 años.
  • _gid: Se usa para distinguir a los usuarios. Expira en 24 horas.
  • _gat: Se usa para limitar el porcentaje de solicitudes. Expira en 1 minuto.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Cookies de publicidad

Utilizamos Google Adsense para mostrar publicidad en los artículos del blog acordes a tus intereses. Esta publicidad nos ayuda al mantenimiento del sitio web y del tiempo dedicado a la redacción del blog.

  • _gads: Publicidad de Google Adsense. Proporciona la publicación de anuncios de interés para el usuario. Expira en 13 meses.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies