Cambiar los colores de los módulos y los widgets

por | 0 Comentarios

Temas Elegant Themes
En esta ocasión vamos a tocar un asunto un poquito más avanzado, pero no por ello quiere decir que vaya a ser difícil llevarlo a buen término. Hablo de modificar los colores de los módulos y los widgets del tema Extra modificando los estilos CSS, que vienen por defecto, y que no podemos cambiar con las opciones que nos ofrece el tema.

Suscríbete:

 

Utilizar CSS para modificar los colores de los módulos y los widgets

 

Creo que a estas alturas el tema Extra habla por sí solo. Su gran variedad de opciones para personalizarlo le convierten en uno de los más versátiles, junto a Divi, que podemos encontrar ahora mismo. Cuando decidimos montar un sitio en internet o crear nuestra web, buscamos una plantilla o tema que se adapte lo más posible a nuestras necesidades.

Pero no siempre conseguimos tener todo lo que queremos, esto pasa con los colores de los módulos y los widgets. Sólo podemos modificar el color del módulo destacado, mientras el resto mantiene el mismo color que trae por defecto el tema. E igual pasa con las cabeceras de los widgets.

Pero todo tiene una solución en este mundo, gracias a los estilos CSS y a la nueva pestaña que incorpora las últimas versiones de WordPress, podemos realizar los cambios de color a nuestro antojo.

 

 

Buscar la etiqueta HTML para modificar su estilo

Lo primero que tenemos que hacer es localizar la etiqueta que contiene el módulo o cabecera de widget que queremos modificar. Los últimos navegadores incorporan una funcionalidad que nos permite hacer una especie de «radiografía» para poder ver cómo está hecha la página que estamos viendo en ese momento.

  • CHROME: «Opciones > Más Herramientas > Herramientas para desarrolladores»  –  Botón derecho del ratón > Inspeccionar
  • FIREFOX: «Opciones > Desarrollador > Inspector»   –  Botón derecho del ratón > Inspeccionar elemento
  • SAFARI: Activar primero el menú Desarrollo desde «Preferencias > Avanzado»  y después desde el menú superior buscar «Desarrollo > Mostrar inspector web«
  • EXPLORER: «Opciones > Herramientas de desarrollo» –  Botón derecho del ratón > Inspeccionar elemento  –  F12
  • EDGE: «Opciones > Herramientas de desarrollo» –  F12

Cambiar colores de los módulos y los widgets. Inspector

 

Podéis ver cómo localizar la etiqueta, en la página que estamos visualizando en ese momento, en el vídeo de arriba.

 

Código CSS a insertar para cambiar los colores

Aunque en el vídeo muestro cómo localizar o buscar el código hexadecimal del color que nos gusta, aquí os dejo un enlace donde podéis copiar el número del color y después pegarlo en su lugar correspondiente.

NOTA: Si decidimos colorear los módulos por separado, como en el vídeo, tenemos que localizar el nombre de la clase de etiqueta (div class=»_») correspondiente. Cuantos más módulos añadamos, más nombres de clases hay que poner.

Aunque en el vídeo aplico la misma propiedad a dos etiquetas distintas, «.module» y «.page_ article» a la vez, aquí las pondré por separado. Así podremos elegir cual queremos utilizar y cuáles no. El color que voy a utilizar es el negro (#000000), que tendréis que cambiar por el que os guste.

 

ESTILO PARA COLOR DE MÓDULOS INDEPENDIENTES

Como dije antes, las clases que aparecen en este código pueden variar dependiendo de cuantos módulos se usen. Hay que localizarlos previamente.

 

ESTLO PARA COLOR UNIFICADO DE TODOS LOS MÓDULOS

Con este código coloreamos todos los módulos de una vez, pero queda desactivada la opción de módulo destacado para cambiar el color del borde, el texto del título sí que sigue cambiando.

 

ESTILO PARA COLOR DEL BORDE EN LAS PÁGINAS

 

ESTILO PARA COLOR DE LA CABECERA DE LOS WIDGETS

 

Con estos estilos cambiamos los colores de los módulos y los widgets, pero podemos añadir más modificaciones utilizando otros estilos como el grosor de los bordes, los colores degradados o poner y quitar las esquinas redondeadas.

 

Temas Elegant Themes

 

Puedes pinchar a aquí para ver todas las entradas relacionadas con esta plantilla.


Suscríbete para no perderte ningún artículo nuevo, te aviso por email


Ya puedes configurar el menú de tu blog, tienda online o web correctamente. Si tienes dudas siempre puedo ayudarte.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Hosting WordPress de SiteGround

¿Quieres estar informado de lo que pasa en IVW?

Suscríbete y te aviso de las novedades

verificarprivacidad

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción. ¡Gracias por suscribirte!

Pin It on Pinterest

Share This
Ir al contenido