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:





Gnome 3.0 en Natty Narwhal – Añadir indicador Weather al panel

17 05 2011

En la anterior entrada estuvimos hablando sobre los paneles y su disposición en Gnome 3. De la barra superior y de sus applets, que se alojan fundamentalmente en la parte derecha de la misma, esta zona también llamada status bar o barra de estado y que de momento sus mini aplicaciones o indicadores, no son definibles por el usuario, ya que carece de utilidad alguna, para quitar o poner a nuestro antojo los instalados en el sistema.

Daniel Garcia nos enseña en su blog, el indicador de weather o del tiempo que ha creado, mostrandonos además los pasos a realizar para su instalación de manera manual, consiguiendo de esta manera añadir un nuevo applets en nuestro panel.

Escritorio Gnome 3 con indicador de tiempo en panel

Como siempre, antes de la instalación y por consiguiente la manipulación de los ficheros del sistema es necesario hacer una copia de los mismos, siempre cabe la posibilidad que podamos cometer algún error.

Al final solo requerimos la modificación de un solo archivo, llamado panel.js situado en la carpeta /usr/share/gnome-shell/js/ui , procedemos hacer una copia del mismo.

$ cp /usr/share/gnome-shell/js/ui/panel.js $HOME/Documentos

Tras esto, comencemos con la instalación del indicador:

1) Bajamos el fuente del programa weather.js  y lo copiamos a la carpeta que el sistema tiene destinada a tal efecto, donde se encuentran alojados todos los indicadores instalados, llamada /usr/share/gnome-shell/js/ui/status

Si el archivo lo hemos dejado en nuestra carpeta de Descargas, sería:

$ sudo cp $HOME/Descargas/weather.js /usr/share/gnome-shell/js/ui/status

2) Editamos y modificamos el programa panel.js, del cual ya hemos hecho copia previa:

$ sudo gedit /usr/share/gnome-shell/js/ui/panel.js

3) Buscamos la siguiente linea:

const STANDARD_TRAY_ICON_ORDER = ['a11y', 'display', 'keyboard', 'volume', 'bluetooth', 'network', 'battery'];

Y le añadimos nuestro nuevo applets, quedando de la manera siguiente:

const STANDARD_TRAY_ICON_ORDER = ['a11y', 'display', 'keyboard', 'volume', 'bluetooth', 'network', 'battery', 'weather'];

4) En la linea de abajo se encuentra:

const STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION = {
'a11y': imports.ui.status.accessibility.ATIndicator,
'volume': imports.ui.status.volume.Indicator,
'battery': imports.ui.status.power.Indicator,
'keyboard': imports.ui.status.keyboard.XKBIndicator
};

Volvemos a insertar una nueva linea, quedando como a continuación se indica:

const STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION = {
'a11y': imports.ui.status.accessibility.ATIndicator,
'volume': imports.ui.status.volume.Indicator,
'battery': imports.ui.status.power.Indicator,
'weather': imports.ui.status.weather.Indicator,
'keyboard': imports.ui.status.keyboard.XKBIndicator
};

Damos a salvar y nos salimos del editor.

6) El programa que nos hemos bajado, aun le faltan opciones por implementar y mejoras varias, entre las que se encuentra la configuración del mismo, debido a esto deberemos de modificar el código de zona que hay por defecto, por el correspondiente de nuestra ciudad y país. Este código lo podemos averiguar en la siguiente web , que tras realizar su búsqueda, aparecerá al final como parte de la URL. Por poner un ejemplo si buscamos Alicante, Spain tras finalizar la busqueda nos mostrará la siguiente URL http://www.weather.com/weather/today/SPXX0008, copiamos por tanto el código SPXX0008.

Editamos el programa:

$ sudo gedit /usr/share/gnome-shell/js/ui/status/weather.js

Buscamos la siguiente linea:

zone = 'SPXX0050';

Sustituimos el código SPXX0050 que corresponde a Madrid, por el SPXX0008 del ejemplo.

Quedando al final la linea:

zone = 'SPXX0008';

Damos a salvar y nos salimos del editor.

7) Para que se hagan efectivos los cambios, nos salimos de nuestra sesión actual y volvemos a entrar.

Ya por último comentar que Daniel Garcia, sigue trabajando, mejorando y evolucionando dicho applets, y que en un corto periodo de tiempo tendremos disponible un nueva versión. 😀





Gnome 3.0 en Natty Narwhal – Paneles

11 05 2011

Y es que nuestro viejo panel de Gnome en GTK2 aporta muchas y muy buenas funcionalidades y me refiero concretamente a todas aquellas mini aplicaciones o applets, que se incorporaban en dicho panel, con el botón derecho del ratón añadir al panel, verdaderamente imprescindibles y que actualmente son incompatible con las nuevas librerías GTK3 y D-Bus.

Escritorio Gnome 3.0 en Natty Narwhal - Ubuntu classic

Y que Josselin Mouette pone de manifiesto en su comunicado a los desarrolladores de estos applets la necesidad de su portabilidad a los nuevos paneles de Gnome 3.

Ya sabéis que estas miniaplicaciones se sitúan en la barra superior junto a la área de notificación o bandeja de sistema (systray), lugar donde igualmente se encuentran alojados otros iconos de aplicaciones en ejecución que pueden requerir nuestra atención, con menús emergentes y que podrían incluso tener funcionalidades muy parecidas a los applets.

Gnome 3 hace diferenciación de estos dos elementos, dejando los applets en el panel superior, actualmente no definibles por el usuario, y dejando en el panel inferior como área de notificación en sus diferentes aspectos, actualmente con ocultación automática.

Escritorio Gnome 3.0 en Natty Narwhal - Gnome Shell

Estas aplicaciones programadas en diferentes lenguajes, véase C, C++, Python, etc.., gran parte de ellas son compatibles con Gnome 3, siendo una muy pequeña minoría la que pueda precisar algún tipo de adaptación.

Muchas de estas aplicaciones requiere su ejecución tras entrar en nuestro escritorio, por lo que precisa su registro en la utilidad Aplicaciones al Inicio, curiosamente desactivada por Gnome 3. Para activarla tan fácil como realizar primeramente una búsqueda por la utilidad habilitada para esto y tecleando simplemente “menu“.

Menú principal

Ya mediante esta aplicación habilitamos el correspondiente check, haciendo por tanto sea visible esta opción en el menú. Accedemos por tanto a la misma, mediante el menú o mediante su búsqueda tecleando “aplicaciones”.

Aplicaciones al inicio

Aquí deberemos de comprobar que contiene ya el registro, incorporado posiblemente mediante la instalación de la aplicación o de lo contrario tendremos que registrarlo manualmente. Ya tras esto tan solo comprobar que funcione tanto entrando a Gnome Shell como al escritorio clásico. 🙂





Gnome 3.0 en Natty Narwhal – Ubuntu Classic + Ubuntu Gnome Shell Desktop

2 05 2011

Como continuación a mi anterior post “Gnome 3.0 en Natty Narwhal – Comenzando”, voy a tratar el tema de la recuperación del escritorio clasico o Ubuntu Classic. Que seguimos disponiendo de él en nuestro Natty, y que aunque en el inicio sesión tenemos las opciones de:

  • Ubuntu (Unity) 
  • Ubuntu Classic
  • Ubuntu Gnome Shell Desktop

Tan solo y de momento, tenemos acceso a Ubuntu Gnome Shell Desktop, no siendo posible el acceso a Ubuntu (Unity) y Ubuntu Classic. Que tras el intento de acceso no aparecerá:

Hay que aclarar que tras la recuperación de nuestro escritorio clásico, lógicamente este ha evolucionado principalmente en lo que se refiere a las aplicaciones que Gnome 3 a desarrollado y sustituyen a sus antecesoras de Gnome 2. Las que no se encuentren en el supuesto anterior, siguen intactas y funcionando con normalidad.

Bueno nos ponemos manos a la obra, para ello en un principio nos dirigimos a los ficheros de configuración que se visualizan en inicio de sesión y que se encuentran en el directorio /usr/share/xsessions/ siendo el fichero gnome-classic.desktop el que se corresponde con la entrada para Ubuntu Classic.

Tras su edición localizamos el comando que realiza dicha función y que muestro a continuación:

Exec=gnome-session --session=classic-gnome

Realizo la consulta pertinente en las paginas man, y parece ser que para el parametro session y que con el nombre classic-gnome, se corresponde a un nuevo fichero de parámetros localizado en  /usr/share/gnome-session/sessions . El fichero en cuestión se deberá llamar exactamente classic-gnome.session, del cual carecemos y de ahí el error que se venía produciendo.

Afortunadamente, dispongo en otra partición de una instalación limpia de Natty Narwhal, y que cuenta además con dicho fichero. La sorpresa vino que tras copiarlo, se seguía produciendo el error.

Contenido del fichero classic-gnome.session en Ubuntu 11.04:

[GNOME Session]
Name=Classic GNOME
Required=windowmanager;panel;filemanager;
Required-windowmanager=gnome-wm
Required-panel=gnome-panel
Required-filemanager=nautilus
DefaultApps=gnome-settings-daemon;
IsRunnableHelper=/usr/lib/nux/unity_support_test --compiz
FallbackSessionsID=GNOME2d
GNOME2d=2d-gnome

Cabria pensar en un principio, que algún programa de los que se están utilizando pudiera ser incompatible con Gnome 3. Tras varias pruebas y consultas, localizo donde esta realmente el problema.

El comando gnome-session, contenido en el paquete gnome-session-bin, para Natty sin haber actualizado todavía a Gnome 3, esta en  la versión 2.32.1 y que tras su actualización a Gnome 3, pasa a ser la versión 3.0.0. Esta ultima versión implementa nuevos parámetros que deberemos de contemplar y emplear, en la generación del fichero.

En base a estos procedemos a modificar este fichero.

Quedando entonces el fichero classic-gnome.session en Ubuntu 11.04  + Gnome 3:

[GNOME Session]
Name=Ubuntu Classic
RequiredComponents=gnome-panel;gnome-settings-daemon;nautilus;
RequiredProviders=windowmanager;
DefaultProvider-windowmanager=metacity
IsRunnableHelper=/usr/lib/gnome-session/gnome-session-check-accelerated
FallbackSession=gnome-fallback
FallbackClassicGnomeMessage=No es posible su ejecución.

Pues ya nada más, copiamos y pegamos el código anterior, en el editor que habitualmente utilicemos y lo grabamos como root con el nombre classic-gnome.session en el directorio /usr/share/gnome-session/sessions . A continuación nos salimos de nuestra sesión actual de Ubuntu Ghome Shell Desktop y entramos seleccionando Ubuntu Classic.

Escritorio Ubuntu Classic en Gnome 3

Listo 🙂