¿Tienes un tema de GNOME 3.0 y alguna aplicación no se ve bien?. ¿Quieres cambiar algún detalle de tu tema preferido pero sin modificarlo todo? La solución la encontrarás en CSS y GNOME.

GTK+3.0 utiliza CSS para dar estilo a todos los objetos GTK+. De esta forma, con un tema podemos modificar completamente el aspecto visual del escritorio y de todas las aplicaciones. Todo ello sin necesidad de modificar cada una de las aplicaciones.

El problema puede surgir cuando algún desarrollador de un tema, no tiene en cuenta algún objeto GTK+. O bien, cuando por nuestras necesidades necesitamos que ese objeto tengo uno u otro aspecto. Por ejemplo, si queremos que los usuarios que utilizan nuestro equipo se fijen en una etiqueta o en un botón determinado de una aplicación, o de todas las aplicaciones.

Evidentemente, podíamos, si disponemos del código fuente de la aplicación, modificarlo y volverlo a compilar. Sin embargo, esto es una verdadera locura, solo para hacer esto. La otra opción es tan sencilla es modificar parcialmente el código CSS en nuestro equipo.

¿Como modificar el aspecto de un objeto con CSS y GNOME?

Modificar el aspecto de un objeto GTK+ con CSS y GNOME

Antes de continuar, indicar que para poder modificar el estilo de un tema o de un objeto GTK ^{es necesario tener unos conocimientos de nivel medio de CSS y GNOME. Y esto a partes iguales, evidentemente. Por otro lado, hay que tener en cuenta que estas modificaciones sólo tendrán efectos en aplicaciones GTK}. Las aplicaciones desarrolladas con Qt, no se verán afectadas

Te recomiendo la lectura de este artículo, “Overview of CSS in GTK+, para que tengas un mayor conocimento de la relación entre CSS y GNOME, y en concreto con los objetos GTK+.

Por otro lado, en alguna versión, no se exactamente en cual de ellas, cambiamos la denominación de los objetos en los CSS. Todo ello para hacerlo mas sencillo. Por ejemplo, un GtkLabel pasa a ser simplemente label.

En la versión que yo me encuentro se utiliza la opción GtkLabel, con lo que los ejemplos que voy a indicar a continuación tendrán esta sintaxis.

Para modificar de forma general, es decir, para todo el escritorio, un determinado objeto, solo tenemos que editar el archivo ~/.config/gtk-3.0/gtk.css. Aquí añadiremos el código CSS que necesitemos.

Seleccionar objetos y darles estilo

Lo primero que tenemos que hacer para aplicar un formato a un objeto, es diferenciar el objeto al que se lo vamos a aplicar. Así por ejemplo, si queremos que todas las etiquetas, de una ventana, tengan el fondo rojo,

GtkWindow GtkLabel{
    background: red;
}

El resultado lo puedes ver en la siguiente imagen, donde en la parte derecha puedes ver Gedit como es con el tema que estoy utilizando actualmente, mientras que en la parte derecha, está el resultado de aplicar la modificación anterior.

Como he comentado en la introducción, esto puede ser de gran utilidad para llamar la atención del usuario sobre un determinado objeto de la aplicación. Por ejemplo, que cuando pase el ratón por encima de un botón el fondo pase a color amarillo de forma progresiva. Por ejemplo, aplicando el siguiente código,

GtkWindow GtkButton{
    background-color: red;
}
GtkWindow GtkButton:hover{
    background-color: yellow;
    transition: 800ms ease-in-out;
}

el resultado es el que puedes ver en la siguiente imagen,

Pero no solo podemos hacer que cambie el color de fondo al pasar el ratón sobre el botón. También podemos hacer que esté continuamente cambiando sus características utilizando para ello transiciones. Por ejemplo, con el código siguiente,

GtkWindow GtkButton {
    animation:parpadeando 5s infinite;
    background:red;
}

@keyframes parpadeando
{
0%   {background:red;}
50%  {background:yellow;}
100%   {background:red;}
}

tendrás el siguiente resultado,

Sin lugar a dudas trabajar con un botón permanentemente parpadeando es algo insufrible. Sin embargo, no me podrás negar que para llamar la atención del usuario es una herramienta poderosa.

Propiedades CSS soportadas

Actualmente hay una enorme cantidad de propiedades css soportadas,

• relativas al color (color, opacity, …)
• relativas a las fuentes (font-family, font-size, …)
• relativas al cursor (caret-color, …)
• relativas a los iconos (-gtk-icon-source, …)
• relativas a la disposición, margenes, tamaños, etc (padding, margin, …)
• relativas al borde (border-width, border-style)
• relativas al fondo (background-color, …)
• transiciones
• animaciones

Te recomiendo que consultes las propiedades css soportadas, puesto que esto varía de una versión de GTK+ a otra. Y conforme aumenta el número de versión las propiedades css soportadas aumentan sensiblemente.

Como puedes ver las opciones y posibilidades que te ofrece CSS y GNOME son abrumadoras.

Algunos usos muy interesantes

Además de lo comentado anteriormente, un uso muy interesante que le podemos dar a esto de CSS y GNOME es el de modificar algunos aspectos de un tema. Por ejemplo, en mi caso, estoy utilizando el tema Paper, tanto para iconos como para objetos, etc.

Este tema se adapta casi perfectamente a mi gusto, sin embargo, los menús contextuales me parecen completamente desproporcionados. En la parte izquierda de la imagen puedes ver el aspecto del tema antes de actuar sobre él. En la parte derecha, verás el resultado una vez hemos incluido el código.

De esta forma, para adaptarlo, no es necesario que cree un tema nuevo, ni que modifique el tema existente, solo es necesario que edite el archivo ~/.config/gtk-3.0/gtk.css, como hemos hecho anteriormente, incluyendo el siguiente código.

GtkSourceView GtkMenuItem{
    margin: 2px;
    padding: 2px;
    background-color: white;
}
GtkSourceView GtkMenuItem:hover>GtkLabel{
    color: white;
    background-color: blue;
}

Más información,

• GNOME Developer