Elegant Themes es una de los “temas” más conocidos y usado por parte de los usuarios que gestionan webs con el CMS de WordPress a causa del boom de DIVI. Sin embargo, en el momento de implementar y retocar plantillas como Extra es necesario “tocar” algunas líneas de código para maquetar los colores corporativos de nuestra página web ya que las opciones por defecto el tema NO no nos permite realizarlo.

Theme Extra de Serie Vs Plantilla Tuneada

Imagen de la plantilla Extra de elegant themes tuneada

No es gran cosa. Pero para que todas las plantillas no nos queden del mismo estilo podemos modificarles 4 aspesctos:

  1. El logotipo
  2. La barra de menú principal (el main-header)
  3. La barra de menú (pre) menú principal (el top-header)
  4. La barra de menú lateral.

Modificando las barra menú lateral

Este simplemente tenemos que añadir unas líneas de código dentro del propio menú de Extra. La ruta es: Extra –> Theme Options –> General Settings. A bajo del todo encontraréis una parte para añadir y costumizar el código CSS. Simplemente, tenéis que copiar + pegar el código siguiente.

/* Change widget title colors */
.et_pb_extra_column_sidebar .et_pb_widget .widgettitle { background:#B6D6D5; }

Imagen del código CSS de Extra para modificar el color de la barra lateral

  • Nota importante: el color deseado la barra letarl se moidifca en las líneas de código marcas en color verde. Tenéis que poner el color en númeracióin hexadecimal.

No os olvidéis de guardar las modificaciones, actualizar la página, refrescar y vaciar la caché principalmentepara visualizar los cambios.

Maquetando el menú principal y el pre menú principal

Este punto ya es más complicado que el anterior pero no demasiado. A diferencia de lo anterior, esta vez debemos modificar el color medinante el Editor de WordPress. Ruta: Apariencia –> Editor –> Hoja de Estilo (style.css).

Como hemos dicho anteriormente, para modificar el color del menú principal deberemos buscador dentro de la hoja de estilo el #main-header y cambiar el código hexadecimal del color por el deseado dentro de Background:#D8D8D8 . Del mismo modo, pasa con la barre pre al menú principal y recibe el nombre de #top-header. Los mismos pasos. Hay que poner el código deseado dentro de Background.

Imange del CSS para modificar el color del menú principal header de Extra Theme

¡Eureka! Deja un comentario explicándonos tu experiencia.