Gnome 3.0 en Natty Narwhal – Personalizando el tema de Gnome Shell

23 05 2011

Pocos son todavía los temas que podemos usar para Gnome Shell, siendo nuestro principal referente DeviantArt, que dispone de una galeria especifica donde podremos encontrar algunos de ellos.

En este post vamos a ver un poco como es el funcionamiento de estos y su configuración. Lo que nos va a permitir hacer prácticamente a la medida nuestro propio tema de Gnome Shell, adaptándolo a nuestros gustos y preferencias, y sobre todo con nuestro wallpaper favorito.

Son muchísimos los aspectos y detalles a modificar, lo cual lo hace superconfigurable. No nos vamos a adentrar a un gran nivel de detalle, solo en  los aspectos mas generales y notorios, que nos van a permitir ya de por si, un cambio visual radical.

Para esto, toma gran importancia los colores, que aplicado a los objetos mas importantes que forman Gnome Shell, como puedan ser:

  • Paneles.
  • Vision General o Overview.
  • La vista de áreas de trabajo o workspaces-view.
  • Bandeja del sistema (Panel inferior derecho).
  • Notificador de mensajes (Panel inferior central)

Nos va a permitir un cambio significativo del entorno.

1) Bajada y copia de seguridad

Como punto de partida para hacer nuestro tema, nos vamos a basar en uno de estos temas de DeviantArt, concretamente el llamado Dark Glass.

Después de que nos lo hayamos bajado, lo primero que tendremos que hacer como siempre, será una copia del tema de Gnome Shell actual del sistema, para ello:

$ sudo cp -r /usr/share/gnome-shell/theme $HOME/Documentos

2) Descomprimimos el fichero que hemos bajado y lo hacemos en nuestra carpeta de Descargas, borramos el tema actual de nuestro sistema e instalamos el tema que hemos bajado, para ello:

$ sudo rm -r /usr/share/gnome-shell/theme
$ cd $HOME/Descargas
$ sudo cp -r theme /usr/share/gnome-shell
$ sudo chmod +rx /usr/share/gnome-shell/theme

Refrescamos y visualizamos, el nuevo tema, para ello pulsamos ALT + F2, y tecleamos rt

3) Editamos el fichero de configuración del nuevo tema, y empezamos a crear el nuestro propio🙂

$ gksu gedit /usr/share/gnome-shell/theme/gnome-shell.css

Como ya comentábamos más arriba nos vamos a centrar en las partes principales de Gnome Shell y de momento enfocado solo a los colores para que nos resulte más fácil.

Estos colores están basados en la paleta de colores o modelo RGB. Para obtener esta secuencia, que mejor que utilizar la paleta de Gimp.

Las sentencias que utilizaremos en el fichero de configuración, serán del tipo:

  • color: #c61c1d o color: white
  • background-color: rgba(198,28,29,0.6);

Que si os fijáis bien con el pantallazo de Gimp, los valores o parámetros utilizados por estas sentencias se corresponde con los últimos campos, haciendo referencia a RGB y Notación HTML. También como se indica en el ejemplo se puede poner el nombre del color.

Comentar que para el ultimo parámetro de background-color: rgba(198,28,29,0.6), es decir el valor 0.6 se corresponde con la transparencia del color, siendo 0 su valor más bajo, dejando al objeto totalmente transparente.

Vamos con las partes que han sido modificadas. Primero pondré las rutinas originales que han sufrido cambios y por último las mismas rutinas ya con los cambios realizados. Todo ello corresponde a un nuevo tema que he llamado, tema rojo.

Rutinas originales:

PANEL

#panel {
color: #ffffff;
background-color: rgba(5,5,5,0.3);
border: 3px solid rgba(255,255,255,0.4);
border-left: 1px;
border-right: 1px;
border-top: 0px;
border-radius: 4px;
box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.6);
height: 1.86em;
}
.panel-button {
padding: 0px 12px;
font-weight: bold;
color: #ccc;
}
.panel-button:hover {
color: white;
}

OVERVIEW

#overview {
spacing: 12px;
background-color: rgba(5,5,5,0.6);
}
.workspaces-view {
color: white;
spacing: 25px;
}

MESSAGE TRAY

#message-tray {
background-color: rgba(5,5,5,0.4);
border: 3px solid rgba(255,255,255,0.2);
border-left: 1px;
border-right: 1px;
border-bottom: 0px;
border-radius: 4px 4px 0px 0px;
box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.6);
height: 36px;
color: white;
}
#notification {
font-size: 12pt;
border-radius: 4px 4px 0px 0px;
background: rgba(5,5,5,0.7);
border: 3px solid rgba(255,255,255,0.2);
border-left: 1px;
border-right: 1px;
border-bottom: 0px;
border-top: 0px;
padding: 8px 8px 4px 8px;
spacing-rows: 10px;
spacing-columns: 10px;
width: 34em;
}

Rutinas con los cambios realizados:

PANEL

#panel {
color: #000000;
background-color: rgba(198,28,29,0.6);
border: 3px solid rgba(198,28,29,1);
border-left: 1px;
border-right: 1px;
border-top: 0px;
border-radius: 4px;
box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.6);
height: 1.86em;
}
.panel-button {
padding: 0px 12px;
font-weight: bold;
color: #000;
}
.panel-button:hover {
color: black;
}

OVERVIEW

#overview {
spacing: 12px;
background-color: rgba(198,28,29,0.3);
}
.workspaces-view {
color: red;
spacing: 25px;
}

MESSAGE TRAY

#message-tray {
background-color: rgba(198,28,29,0.4);
border: 3px solid rgba(255,255,255,0.2);
border-left: 1px;
border-right: 1px;
border-bottom: 0px;
border-radius: 4px 4px 0px 0px;
box-shadow: 0px 0px 8px 6px rgba(0,0,0,0.6);
height: 36px;
color: white;
}
#notification {
font-size: 12pt;
border-radius: 4px 4px 0px 0px;
background: rgba(198,28,29,0.8);
border: 3px solid rgba(255,255,255,0.2);
border-left: 1px;
border-right: 1px;
border-bottom: 0px;
border-top: 0px;
padding: 8px 8px 4px 8px;
spacing-rows: 10px;
spacing-columns: 10px;
width: 34em;
}

Al final si lo comparéis, los cambios simplemente han consistido en pasar del negro al rojo. Y algunas letras que han pasado, de blancas a negras para que hagan un mayor contraste.

Os dejo algunos temas, realizados de esta manera, también un enlace tanto del wallpaper como del fichero de configuración gnome-shell.css

Este último como habréis visto anteriormente cuando lo hemos editado, lo deberemos de copiar a su carpeta correspondiente:

$ cd $HOME/Descargas
$ sudo cp gnome-shell.css /usr/share/gnome-shell/theme

Refrescamos y visualizamos, el nuevo tema, para ello pulsamos ALT + F2, y tecleamos rt

Tema Rojo

Descarga:

Tema Blanco y Negro

Descarga:

Tema Amarillo

Descarga:

Tema Marron

Descarga:

Tema Verde


Descarga:


Acciones

Information




A %d blogueros les gusta esto: