Edita el color de tu web con 3 líneas de código

Hay mucha gente que se enfrenta a diario a un wordpress que necesita retoques mínimos cada cierto tiempo, y termina construyendo una lista interminable de css. En este tutorial quiero compartir un método rápido y organizado para cambiar el color con 3 líneas de código. Crearemos 3 clases etiquetar cualquier parte de nuestro HTML y cambiarle el color por completo.

Los que uséis preprocesadores como Sass o Less, no necesitáis este tutorial para nada, ya que lo que voy a describir es de lo más básico que se puede llegar a hacer preprocesando el CSS. Los que no sois desarrolladores, seguro que habéis pasado por querer cambiar el color de un enlace, de un fondo, o de un borde… pero solo de uno! Pues se puede hacer, y además de forma limpia.

Asegúrate de tener:

  • Acceso al CSS del tema de wordpress, o, si es una web en .html o .php, al archivo de .css que mayor prioridad tenga. Si es en wordpress, normalmente se accede en Apariencia > Editor > style.css.
  • Acceso al elemento HTML que queramos cambiar. Esto será sencillo en sitios simples en .html o .php ligero. Pero en CMS como wordpress, drupal o joomla, puede ser un verdadero reto. Por ejemplo, en wordpress, es más sencillo acceder al contenido de una página que a su header o su footer.

Un método para sustituir el style incrustado

Los que llevéis al menos un año en esto del diseño web, habréis hecho / intentado / entrado en el cólera por este antiguo método de diseñar con CSS. Se trata de incrustar el texto style=”color:red;” en un elemento <p> o <a> para cambiar,en este caso, su color. Esto es como trabajar a mano cada microchip que se fabrica. Hay que entender que por pequeña que sea la web, estamos diseñando un sistema, y eso implica que debe funcionar de forma conjunta además de visual. Las clases son una forma de llevar el contenido de esos style a otros elementos CSS, de manera que cambiando esa clase, cambiamos todos los elementos con ella. Si entendemos esto, entendemos la base del CSS.

Sin embargo, hay momentos en que un elemento es tan singular, que pensamos que tenemos que incrustarlo, ya que crear una clase solo para él sería ensuciar nuestro CSS, por ejemplo, si tenemos una serie de botones y tenemos que cambiar el borde de uno de ellos con jQuery. Con estas clases que vamos a crear, podemos afectar solo al punto exacto que queramos sin tener que incrustar estilo ni crear decenas de clases para cada elemento singular.

Si necesitas una solución ya puedes saltar a tutorial sin rodeos. Si tienes curiosidad sigue leyendo

Crear un estándar de color CSS

Hay 3 posibilidades de color en los elementos html, éstas son:

  • Color (de fuente): Color de texto, incluidos iconos en modo webfont como fontawesome o google material icons. En CSS lo enunciamos como color, y puede afectar al color del borde también si éste no se define a parte.
  • Fondo: Define el color de la caja que ocupa el elemento. En css lo enunciamos como background o background-color, es preferible la primera por tener más prioridad.
  • Color de borde: Define el color del contorno del elemento. Lo enunciamos como border-color.

Todas ellas están definidas por defecto en el CSS, aunque lo más normal es que tengan estilos superpuestos para optimizar y estandarizar el aspecto de la web. Por ejemplo, los <a> tienen un color azul de base, pero cuando es un <a class=”btn”>, una clase de bootstrap que define todos los botones, tiene el texto negro para destacar del gris claro de fondo. En código lo vemos asi:

 

a {color:blue;}
.btn {color:black; background; grey;}

 

El último párrafo de teoría (jeje), la forma en que mandan unas clases sobre las demás se determina por ciertos aspectos que ya comentaremos, pero el que más nos interesa para este método es usar !important. Puede que estés pensando que es agresivo, pero bien utilizado, puede ser más limpio que sus “benignas” alternativas. !important asigna la máxima prioridad al parámetro que acompaña. Entendiendo esto, ya podemos programar nuestro estándar de color.

Elige un buen nombre y manos a la obra

Las clases tienen un nombre, y debemos elegir uno fácil de recordar y al mismo tiempo todo lo concreto posible. Hay que entender que el nombre debe estar formado por “piezas”, para así hacerlo más lógico y funcional. Hay que definir al menos:

  • Color de la paleta (yo lo llamaré “m” de main color, “s” de second, y así…)
  • Dimensión del elemento afectada (ej: al color de letra lo llamaré “t” de text)

Luego triplicamos este proceso para afectar a las otras dos dimensiones por establecer (ej: en este caso, fondo y borde). Vamos a ver un ejemplo:

Ejemplo 1

 

.main-t {color: red !important;} /*color de texto corporativo*/
.main-b {background: red !important;} /*color de fondo corporativo*/
.main-bd {border-color: red !important;} /*color de borde corporativo*/

 

Para que funcione, colocamos la clase en nuestro elemento:

<a class=”btn main-t” href=”#”>Soy un enlace</a>

La gran ventaja

Si estáis pensando que poner una clase en lugar de incrustar un style es el mismo esfuerzo: pensad que solo cambiando el color en esa clase lo estáis cambiando allá donde ella esté. Esto nos obliga a limitarnos a una paleta de colores, lo que resuelve un problema que muchos diseñadores siguen teniendo.

 

Puede que estés pensando que este método es agresivo, pero bien utilizado, puede ser más limpio que sus “benignas” alternativas.

 

Otros usos de esta técnica:

  • Yo suelo usarlo para poner negro o blanco un texto rápidamente en mis webs. Muchas veces tienes en la cabeza una idea que, traída al mundo, tiene un color ligeramente diferente. De esta forma puedes resolver rápido esta situación. Yo uso .t-white y .t-black, respectivamente.
  • Puedes programar un botón CTA diferente a los demás. Usa la misma fórmula con !importants, pero solo en los elementos que necesites, puedes ayudarte de una segunda clase como .btn de bootstrap, por ejemplo: .btn.my-cta-btn{background:orange !important;}

¿No te funciona? Tal vez es por esto:

  • Tu CSS no está limpio y tiene otros !important ejerciendo aún más prioridad sobre tu estándar de colores. Revisa con el inspector de elementos quién es el culpable y entra a editarlo de inmediato. ¡En tu estilo mandas tú!
  • No puedes acceder a tu HTML y no puedes aplicar la clase. Si tu caso es este, sigue leyendo.

¿Qué pasa si no puedo acceder al HTML?

Hasta el momento he pensado una forma de resolver eso manteniendo las ventajas de tener una paleta. Debajo de las 3 líneas de nuestro color, duplicamos los resultados pero con las clases de los elementos html que queramos cambiar. Por ejemplo:

Ejemplo 2

Tengo el siguiente botón y no puedo acceder a su html:

<a class=”btn header-btn” href=”#”>Soy un botón</a>

Aplico las reglas de antes:

.main-t {color: red !important;} /*color de texto corporativo*/
.main-b {background: red !important;} /*color de fondo corporativo*/
.main-bd {border-color: red !important;} /*color de borde corporativo*/

 

Y tras ellas, voy poniendo los elementos a los que quiero afectar:

/*elementos que serán del color de texto corporativo*/
.btn.header-btn {color: red !important;}

/*otros elementos que tendrán el color de fondo corporativo*/
div.navbar-top,
aside,
div.footer {background: red !important;}

/*otros elementos cuyo color de borde será el corporativo*/
button,
textarea,
input {border-color: red !important;}

 

Puedes ver que separando con comas simples las clases que quiero afectar, puedo agrupar la misma orden para infinitos elementos. Pero cuidado! Si os toca diseñar la paleta de esta manera hacedlo de la forma más organizada posible, ya que la cascada puede llegar a ser grande. De todas formas evitad repetirlo mucho.

Conclusión

No toda la gente que se enfrenta a un wordpress sabe less o sass como para optimizar un estándar de colores para su web. Por no decir que hay que tener conocimientos medios de css para siquiera usarlo o editarlo. Este sistema aporta la comodidad de tener los colores bajo control, pudiendo cambiarlos en un solo lugar todos a la vez. Aunque usar !important es algo que se debe hacer con cuentagotas, creo que este es uno de los casos en los que no solo se permite, sino se debe hacer. Mientras el resultado sea una estructura cromática cómoda de manejar no hay problema, pero si ves que estás sobreoptimizando tu css, para y piensa si lo que estás haciendo es justo lo que quieres evitar.

Facebook Comments