• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria
  • Ir al pie de página

Dani Sánchez - Gestionatuweb

Desarrollador web freelance - Dani Sánchez Gestionatuweb

  • ¿Eres agencia?
  • WordPress
    • Mantenimiento
    • Desarrollo
    • Soporte técnico
  • Cursos
  • Porfolio
  • Blog
  • Contacto
  • Solicita Presupuesto
Estás aquí: Inicio / Publicaciones / Modifica el CSS de tu tema Wordpress sin perder los cambios al actualizar
simple custom css

Publicaciones, Tutoriales, Wordpress / 29 de agosto de 2016

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

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 con:desarrollo web, plugins, publicaciones, tutoriales, wordpress

Interacciones con los lectores

Este artículo puede contener código que podría no funcionar correctamente en tu versión de WordPress o causar incompatibilidad con tu plantilla o plugins. Úsalo bajo tu responsabilidad y haz siempre copia de tus archivos antes de modificarlos.

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

Barra lateral primaria

Daniel Sánchez

@danisanchez82
t.me/gestionatuweb

Buscar en la web

Entradas recientes

  • Adiós WhatsApp…
  • Configuración de WP Fastest Cache
  • Cómo añadir un enlace personalizado en el menú admin de WordPress
  • Hooks de Genesis Framework (init, header y framework) – Parte 1
  • Añade el soporte de Genesis Framework para tus Custom Post

Categorías

  • Actualidad
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • Wordpress

Comentarios recientes

  • Carlos en Crear un WebView con Android Studio para cargar una web en una APP Android
  • william maffiold en Instalar LAMP y phpMyAdmin en MX Linux 19
  • dani en Divi, diseñar una plantilla predeterminada para cargar Custom Posts
  • dani en Subir un WordPress terminado de tu ordenador (local) al servidor final (hosting)
  • Carlos en Divi, diseñar una plantilla predeterminada para cargar Custom Posts

Hosting de confianza

Footer

Buscar en la web

  • Inicio
  • Agencias
  • Mantenimiento WordPress
  • Desarrollo WordPress
  • Soporte técnico WordPress
  • Cursos
  • Portfolio
  • Blog
  • Contacto
  • Política de privacidad

Mis redes

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

© 2016–2021 Gestionatuweb · Programado con Genesis Framework · Iniciar sesión

Utilizo cookies para obtener datos estadísticos sobre el uso de mi sitio web y personalizar la publicidad (no intrusiva) del blog según tus intereses. En ningún caso estas cookies te identifican como persona, solo a tu dispositivo en la Red. Aceptando el uso de cookies me ayudarás a mantenener el blog gracias a la publicidad y podré mejorar la experiencia de uso gracias a la analítica web. Puedes navegar por mi sitio web sin que se instale ninguna de estas cookies, aunque este mensaje permanecerá visible en todo momento.AceptoPolítica de privacidad