Como modificar los colores en un tema Cinnamon en Linux Mint 17

Juan Bellas

Vamos a ver aquí como podremos cambiar los colores y el aspecto de un tema que tengamos en Cinnamon en Linux Mint 17

Veremos aquí como cambiar el aspecto del menú principal, panel, menús emergentes….no así el de las ventanas del navegador o programas como Firefox, más dependientes de GTK.

Yo voy a trabajar con la versión de Cinnamon 2.2.16 que tiene Linux Mint 17 al momento de escribir esto.

Los colores los saqué de esta web: http://www.computerhope.com/htmcolor.htm aunque bien podéis usar un programa como Gimp o Agave (muy recomendable este último)

En mi caso me voy a basar en tres colores claves propuestos por la amiga Almuss gq en Google+, que serán:

• Velvet ciruela: #7D0552
• Purple Dul: #7F525D
• Un gris muy clarito: #E4E4E4

El tema lo llamaremos, en su honor, Almuss.

Antes de seguir debemos hacer unos ajustes, si no los tenemos ya, en el editor de texto Gedit para poder trabajar mejor.

Lo abrimos en Menú/Accesorios/Editor de texto.

Con el programa abierto nos vamos a Editar/Preferencias.

La pestaña “Ver”, la dejamos así:

Desactivamos el ajuste de texto y le indicamos que nos muestre el número de la línea de texto, para localizar más fácilmente las cosas.

La pestaña “Editor” la dejaremos así:

Marcamos el ancho del tabulador en 4 y marcamos “Insertar espacios en lugar de tabuladores” y “Activar sangría automática”.

Bien, pues empezamos.

Abrimos Nemo y nos dirigimos a /usr/share/themes

Copiamos el tema Linux Mint y lo pegamos en nuestra carpeta personal que, tras pedirle que nos muestre los archivos ocultos con Ctrl+H o bien en el menú Ver/Mostrar archivos ocultos, nos debe mostrar la carpeta .themes.

Si no fuese así, la crearíamos nosotros mismos.

Esta carpeta lo que muestra son los temas válidos únicamente para ese usuario, en el caso de que varios usuarios tuviesen cuenta en este PC.

Lo renombramos con el nombre que nos interese, en mi caso Almuss.

Ahora ya podemos seleccionarlo desde Menú/Preferencias/Configuración del sistema/Temas:

Dentro de la carpeta del tema vemos otra llamada Cinnamon, la abrimos y ya tenemos las distintas imágenes que usa el tema, así como el archivo cinnamon.css que es sobre el que vamos a trabajar.

Vamos empezar cambiando el color de fondo del panel y el menú principal.

Abrimos para ello el archivo cinnamon.css.

Nos vamos hasta la sección de Panel, que anda por la línea 270:

Como vemos, el color de fondo del panel viene determinado por las siguientes líneas:

background-gradient-start: rgba(70,70,70,0.9);
background-gradient-end: rgba(50,50,50,0.9);
background-gradient-direction: vertical;

Que es lo que nos da el fondo de gris oscuro de este tema de Mint.

Lo podemos ver un poco mejor usando un programa como Agave.

Lo abrimos y hacemos clic en el botón de selector de color:

Ahí vamos a ver como se comporta la primera línea de color que veíamos en el archivo cinnamon.css:

background-gradient-start: rgba(70,70,70,0.9);

Marcamos ese 70, 70, 70 en las cajas Rojo, Verde y Azul:

Y ya vemos como nos selecciona el color de fondo que tenemos en el panel:

Podemos ver como se corresponde con el color #464646.

En el valor del color mostrado en la línea anterior vemos rgba.

Las letras rgb ya vimos como se refieren a Red, Green, Blue.

La tercera letra, la a nos indica el nivel de opacidad, y que en este caso es de 0,9.

Puede variar entre totalmente opaco, con valor 1, y totalmente transparente, con valor 0.

Lo que nos está indicando el archivo .css es que tenemos un gradiente vertical y que va desde el valor (70, 70, 70) a un color más oscuro (50, 50, 50), como podemos ver marcando ese valor en Agave:

Comentamos al principio, que este tema se crearía con los colores propuestos por la amiga Almuss y que eran:

• Velvet ciruela: #7D0552
• Purple Dul: #7F525D
• Un gris muy clarito: #E4E4E4

Marcamos el segundo en Agave:

Ya lo vemos seleccionado:

Vemos que se corresponde con unos valores de (127, 82, 93):

Ese será el valor que introducimos en la primera línea de nuestro cinnamon.css, concretamente en la línea 274, como inicio de gradiente:

background-gradient-start: rgba(127,82,93,0.9);

Claro, si lo dejamos así hará un gradiente entre ese color y el gris oscuro de antes, por lo que debemos variar ese segundo tono, el background-gradient-end.

Probamos con un valor algo más oscuro del 127, 82, 93 inicial jugando con los controles de Saturación y Valor:

Y ya vemos la diferencia con el valor inicial.

Vamos a probar con ese valor, introduciéndolo en nuestro cinnamon.css, quedándonos así:

background-gradient-start: rgba(127,82,93,0.9);
background-gradient-end: rgba(97,56,66,0.9);

Guardamos el valor y salimos y entramos del tema, seleccionando otro cualquiera y volviendo al tema Almuss.

El cambio es evidente.

Pasamos de esto:

A esto:

Otra opción sería poner en vez de un gradiente un color sólido, para lo cual tendríamos que sustituir las siguientes tres líneas:

background-gradient-start: rgba(125,5,82,0.9);
background-gradient-end: rgba(77,3,50,0.9);
background-gradient-direction: vertical;

por esta otra:

background-color: #7F525D;

Indicando, claro está, los valores de colores que más nos interesen, quedándonos así esa parte de nuestro .css:

De esa forma, el panel tendría este aspecto:

Como más os guste. Yo, como noto un mayor contraste entre las pestañas y el fondo del panel, lo dejaré de esta última forma.

Si quisiésemos jugar con los valores de transparencia del panel, deberíamos introducir el valor rgb de ese color y añadirle un valor a esa transparencia, por ejemplo:

background-color: rbba(127,82,93 0.6);

Vamos a cambiar ahora el color de fondo del menú principal.

Buscamos la sección “PopupMenu”, allá por la línea 116 de nuestro cinnamon.css:

Ahí vemos que bajo el valor de -arrow-background-color tiene unos valores de 63, 63, 63 que se corresponden con ese gris de fondo de nuestro menú.

Como el siguiente color que proponía Almuss era el Purple Dul lo vamos a utilizar aquí.

Ese color tiene unos valores rgb de: 127, 82, 93.

Los colocamos en esa línea del .css:

-arrow-background-color: rgba(127,82,93,0.95);

Guardamos el archivo, salimos del tema, volvemos a entrar y ya vemos los cambios.

Pasamos de esto:

A esto:

En ese valor que acabamos de introducir tenemos la transparencia marcada a 0.95

Es un valor que podemos manejar a nuestro antojo, por si nos gusta que se note más el trasfondo o menos.

Yo lo dejaré tal cual.

Hay otros aspectos que ya nos cambiaron también al variar el color de fondo del menú.

Por ejemplo si hacemos clic con botón izquierdo del ratón en el applet de la fecha/hora vemos como queda:

Podemos ver como, al pasar el puntero del ratón se va cambiando a un tono más oscuro, por ejemplo en el applet del sonido:

Vamos a cambiar el color de fondo de la caja de favoritos.

Nos desplazamos en nuestro .css hasta el apartado del menú de favoritos, allá por la línea 1574:

Vamos a modificar las líneas que hacen referencia al gradiente:

background-gradient-direction: vertical;
background-gradient-start: rgba(80,80,80,0.7);
background-gradient-end: rgba(60,60,60,0.7);

Meteremos los valores de gradiente que miramos al principio del artículo con los colores propuestos por Almuss haciendo un poco más claro el color de inicio, para mostrar mayor contraste:

background-gradient-direction: vertical;
background-gradient-start: rgba(125,5,82,0.7);
background-gradient-end: rgba(140,60,112,0.7);

También pasamos a usar ese gris clarito al que hacía mención la buena de Almuss para rodear la caja de favoritos, en la línea 1578:

border: 1px solid rgba(228,228,228,1);

De esta forma, la cosa va así:

Ahora vamos a cambiar el color de fondo de cuando vamos pasando el ratón por encima de alguno de los elementos de la caja de favoritos.

Lo tenemos un poco más abajo, donde hover:

Tenemos muchas opciones de cambio, pero yo voy a cambiar las siguientes tres líneas:

 background-gradient-direction: vertical;
 background-gradient-start: rgba(90,90,90,1);
 background-gradient-end: rgba(70,70,70,1);

por esta:

background-color: #7F525D;

para combinar con el resto del fondo del Menú, quedando así:

Vamos a trabajar ahora sobre los elementos seleccionados del Menú, lo que vemos mismo debajo de Todas las aplicaciones:

Bajaremos hasta la línea 1681, donde menu-category-button-selected:

Ahí vamos a emplear un gradiente, el mismo que en la caja de Favoritos.

Por ello sustituimos los valores de las líneas:

background-gradient-direction: vertical;
background-gradient-start: rgba(90,90,90,0.5);
background-gradient-end: rgba(70,70,70,0.5);

por los del gradiente que usamos en la caja de Favoritos:

background-gradient-direction: vertical;
 background-gradient-start: rgba(125,5,82,0.7);
 background-gradient-end: rgba(140,60,112,0.7);

Y también le daremos el borde de gris clarito que tiene la caja de Favoritos modificando la siguiente línea:

box-shadow: inset 0px 0px 1px 1px rgba(120,120,120,1);

dejándola:

box-shadow: inset 0px 0px 1px 1px rgba(228,228,228,1);

Ahora haremos lo mismo con lo que son las aplicaciones de la columna de la derecha.

Nos iríamos a entorno a la línea 1639. Digo “entorno”, pues es posible que unos hayáis suprimido grupos de 3 líneas por 1 sola, otros no….

La zona de nuestro .css es esta, donde menu-application-button-selected:

Aquí haríamos lo mismo, añadiendo el gradiente y el borde gris claro, cambiando las líneas

background-gradient-start: rgba(90,90,90,0.5);
background-gradient-end: rgba(70,70,70,0.5);
box-shadow: inset 0px 0px 1px 1px rgba(120,120,120,1);

por:

background-gradient-start: rgba(125,5,82,0.7);
background-gradient-end: rgba(140,60,112,0.7);
box-shadow: inset 0px 0px 1px 1px rgba(228,228,228,1);

quedándonos la cosa así:

Ahora vamos a intentar poner las selecciones que hagamos en los menús emergentes del mismo tono que las selecciones de las aplicaciones en el Menú principal, es decir, con su gradiente.

Tal y cual está ahora, si accedemos al applet de sonido, por ejemplo, veremos esto:

Para cambiarlo nos iremos a la sección del Pop.Menú de nuestro .css, allá por la línea 116:

Bajando hasta la línea .popup-submenu-menu-item:open vamos a cambiar lo siguiente:

 background-color: rgba(70,70,70,0.7);

por el mismo gradiente que usamos en la selección de programas y aplicaciones:

background-gradient-direction: vertical;
background-gradient-start: rgba(125,5,82,0.7);
background-gradient-end: rgba(140,60,112,0.7);

También bajamos hasta donde pone popup-menu-item:active, línea 189, y corregimos:

background-color: rgba(80,80,80,0.5);

por lo mismo:

background-gradient-direction: vertical;
background-gradient-start: rgba(125,5,82,0.7);
background-gradient-end: rgba(140,60,112,0.7);

Y bueno, podríamos seguir cambiando más y más aspectos de nuestro tema en Cinnamon, pero tampoco quería yo cansaros demasiado con esto.

Con lo que vimos aquí tendríamos cambiado el aspecto básico de nuestro tema. En cierto modo, casi podríamos decir que creamos un tema nuevo, aunque tampoco es para tanto.

Pero bueno, este podría ser un buen punto de partida por si alguien se anima a crear su propio tema totalmente original.

Voy a crear una sección en el blog de descargas y de ahí os podréis bajar este tema ya acabado tal y como vimos en esta entrada.

Bueno, pues eso era todo.

Venga, nos leemos

Fuente: Linux Mint Forums