La gran cantidad de Temas o Themes que nos proporciona la comunidad de WordPress así como los desarrolladores privados (temas de pago) nos suelen cubrir con creces todas nuestras necesidades de diseño. Esto no quiere decir que no queramos más y más, cuando trabajas con clientes, estos suelen tener muy claro lo que quieren para su sitio web (ironía modo on) y lo que tienen más claro es la apariencia que deben tener sus sitios, sobre todo en lo que respecta a colores corporativos, y esto puede llegar a suponer un problema para los diseñadores que no manejan bien el código CSS, o suponía hasta que SiteOrigin, han desarrollado un magnifico plugins que nos permite editar de forma visual la mayor parte del CSS de un tema, esta maravilla es SiteOrigin CSS, y lo mejor que es un plugin totalmente gratuito.

Para este post voy a usar una instalación de WP con un tema hijo (child themes) del Framework Genesis, que aunque es muy potente deja bastante que desear en la personalización de colores, y para mi gusto usa demasiado padding entre las distintas capas (div).

La ventaja principal de modificar el CSS de un tema hijo es que las actualizaciones del Theme no modificarán las distintas variaciones que haga tanto en el CSS como en cualquier aspecto de este child theme, que antes podrían ser tediosos de crear pero ahora se hace también a golpe de plugin y así de fácil. Nota: no es conveniente tener siempre el child themes configurator activado.

Para entrar en faena instalamos SiteOrigin CSS, para encontrarlo como item de menú dentro de Apariencia como Custom CSS:

Si sabes código CSS ya te puedes poner a teclear como un loco ya que el código generado aquí será jerárquicamente superior al CSS del tema, pero no es el objeto de este post, ya que vamos a editor visual pulsando en el icono del OJO que tenemos en la parte superior derecha de la venta de Custom CSS.

También tenemos un vídeo explicativo (en ingles) sobre el funcionamiento del plugin.

Como puedes ver en la capturas de abajo (pulsando las flechas laterales) en general puedes seleccionar a golpe de ratón cualquier elemento del tema, pero ojo esta seleccionando un elemento, es decir, al seleccionar el titulo de un post, estas seleccionando todos los títulos de todos los posts y cambiando el CSS para todos.

En la parte izquierda vemos los elemento que podemos modificar sólo haciendo clic sobre el elemento a modificar en la preview de la parte derecha, además tenemos un inspector de etiquetas en la parte inferior. Desde aquí IMAGINACIÓN AL PODER, sólo he puesto capturas de como se modifica el tamaño de los títulos, se cambiar el color de la barra de navegación y de como poner un border al Sidebar, pero este plugin da para hacer autenticas maravillas sin necesidad de tener conocimiento de código CSS.

Cuando hemos terminado de editar tantos elemento de CSS como queramos, sólo tenemos que salir del editor visual para ver como queda el código CSS que el plugin ha generado automáticamente. Como indique antes este código prevalece sobre el CSS propio del tema, y aplicado sobre temas hijo no corremos el riesgo de perder las modificaciones en futuras actualizaciones del Theme principal o padre, quedando siempre la misma apariencia en el frontend de nuestro WordPress:

Un saludo @jarodriguez77

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Share This