GTK thèmes

Personnalisation extrême

Est-il encore utile de le préciser ? Le toolkit Gtk+ est de plus en plus utilisé pour toutes sortes d'applications sous X. Sa facilité d'exploitation et sa puissance en font un outil indispensable pour qui veut créer un logiciel avec une interface graphique digne de ce nom. Comme son nom l'indique, the Gimp ToolKit a été initialement conçu pour The Gimp. Depuis, il a été sans cesse amélioré pour devenir LE toolkit.

 

A l'heure où nous écrivons ces lignes, la dernière version stable est la 1.2. Depuis la version de développement 1.1.6, les applications utilisant Gtk+ vérifient la présence d'un fichier **~/.gtkrc. Celui-ci permet de personnaliser l'ensemble des éléments(widgets) du toolkit. On peut alors définir des propriétés esthétiques comme les couleurs, les polices de caractères ou d'éventuelles textures.

ELEMENTS REQUIS

Pour utiliser les fonctionnalités précitées, il est nécessaire d'installer certaines bibliothèques. Pour notre exemple, nous avons utilisé les versions suivantes :

Imlib 1.9.2

Gtk+ 1.2

Glib 1.2

Et

Gtk-Engine 0.5

Ces quatre éléments sont indispensables. De plus, pour bénéficier d'une liberté totale dans le choix des formats graphiques utilisables, il vous faudra possèder les bibliothèques associées. Imlib utilise différentes bibliothèques de gestion graphique. Pour pouvoir utiliser des fichiers PNG, il vous faudra la libpng; pour les Jpeg, il vous faudra la libjpeg; et ainsi de suite...

Avec une distribution relativement récente comme Debian 2.1, Slackware 3.6, RedHat 5.2 ou Suse 6.0, ces bibliothèques graphiques devraient être déjà présentes dans des versions à jour. En revanche avec une installation plus ancienne, il vous sera nécessaire de toutes les mettre à jour avant toutes choses.

Si vous avez dans l'intention de décorer les widgets avec des textures et des fichiers pixmaps (images), il est fortement conseiller d'avoir des ressources en conséquence. Certains thèmes sont très lourds, même en utilisant les astuces que nous citerons plus loin.

Dernière chose absolument indispensable : de la patience. La mise à niveau de bibliothèques est souvent très, très, très... éprouvante pour les nerfs...

PREMIERS TESTS

Un fois l'ensemble des bibliothèques installées et en état de fonctionner, lancez l'utilitaire testgtk livré avec les bibliothèques du même nom. Ceci, vous donnera un aperçu des widgets disponibles et de leur aspect par défaut.

Dans un second temps, copiez le fichier /usr/local/share /themes /Pixmap/gtk/gtkrc dans votre répertoire personnel sous le nom .gtkrc. Ce fichier et les différents fichiers images proviennent du package Gtk-Engine. Editez ce fichier et repérez une ligne débutant par les mentions pixmap_path ". Retirez l'éventuel dièse (#) en début de ligne puis complétez la suite avec le chemin où se trouve les fichiers images. N'oubliez pas de refermer les guillemets. Une fois l'opération effectuée, relancez testgtk et constatez les différences (tant au niveau du graphisme, que de la rapidité).

Comme nous venons de le démontrer, la configuration d'un thème se résume au fichier ~/.gtkrc. Pour changer de thème, il suffit de changer le fichier de configuration et de vous assurer que le chemin de recherche des images est correct.

STRUCTURE DU FICHIER

Notre exemple se basera sur le fichier .gtkrc décrit dans le Gtk tutorial de Tony Gale et Ian Main. Le tutoriel est disponible en plusieurs formats (html, texte, ps, etc) sur le site principal du projet Gtk+ (http://www.gtk.org). Le fichier est structuré de la manière suivante : dans un premier temps, nous définissons des styles. Ensuite, ces styles seront appliqués aux widgets et/ou classes de widgets.

Avant de commencer, voyons les principaux états des widgets :

- NORMAL : état normal sans le curseur de la souris, sans clic, etc.

- PRELIGHT : le curseur de la souris survole le widget

- ACTIVE : lorsque le widget est cliqué, son état devient actif

- INSENSITIVE : état du widget lorsqu'il est désactivé. Par exemple, pour définir une option inutilisable.

- SELECTED : comme son nom l'indique, c'est l'état d'un widget lorsqu'il est sélectionné.

Notons au passage que tous ces états ne sont pas valables pour tous les widgets.

Les second élément à prendre en considération concerne les directives à utiliser pour définir les attributs des widgets :

- bg : définit la couleur d'arrière plan

- fg : définit la couleur d'avant plan

- bg_pixmap : définit l'arrière plan d'un widget avec une texture

- font : définit la police de caractères à utiliser avec le widget.

Commençons pas définir un premier style (simple) :

**style "window"

*{

*bg_pixmap[NORMAL] = "warning.xpm"

*}

Ce style nommé "window" définit un arrière plan texturé avec un fichier warning.xpm pour un widget dans un état NORMAL.

**style "scale"

*{

*fg[NORMAL] = { 1.0, 0, 0 }

*bg_pixmap[NORMAL] = "<parent>"

*}

Ici, nous définissons un style « scale » avec une couleur d'avant plan rouge à 100%. Les directives fg et bg utilisent la syntaxe {Rouge, Vert, Bleu} où les valeurs pour chaque couleur sont comprises entre 0 et 1. Les utilisateurs de POV retrouveront facilement leurs marques. La deuxième ligne définit le même fond texturé que la fenêtre parent.

Définissons, à présent le style des boutons. Ceci nous permet de faire un peu mieux connaissance avec les différents états :

**style "button"

*{

*fg[PRELIGHT] = { 0, 1.0, 1.0 }

*bg[PRELIGHT] = { 0, 0, 1.0 }

*bg[ACTIVE] = { 1.0, 0, 0 }

*fg[ACTIVE] = { 0, 1.0, 0 }

*bg[NORMAL] = { 1.0, 1.0, 0 }

*fg[NORMAL] = { .99, 0, .99 }

*bg[INSENSITIVE] = { 1.0, 1.0, 1.0 }

*fg[INSENSITIVE] = { 1.0, 0, 1.0 }

*}

Comme précédemment, nous définissons les couleurs d'avant plan et d'arrière plan pour chacun des états (sauf SELECTED).

Nous ne sommes pas obligé de re-spécifier des paramètres pour un nouveau style légèrement différent. Par exemple, ici nous définissons un style "main_button" dérivé du style précédent. La seule différence étant l'ajout d'une directive concernant la police de caractères à utiliser.

**style "main_button" = "button"

*{

*font = "-adobe-helvetica-medium-r-normal--*-100-*-*-*-*-*-*"

*bg[PRELIGHT] = { 0.75, 0, 0 }

*}

Nous continuons ensuite à définir quelques styles :

**style "toggle_button" = "button"

*{

*fg[NORMAL] = { 1.0, 0, 0 }

*fg[ACTIVE] = { 1.0, 0, 0 }

*bg_pixmap[NORMAL] = "<parent>"

*}

*style "text"

*{

*bg_pixmap[NORMAL] = "marble.xpm"

*fg[NORMAL] = { 1.0, 1.0, 1.0 }

*}

*style "ruler"

*{

*font = "-adobe-helvetica-medium-r-normal--*-80-*-*-*-*-*-*"

*}

La dernière étape consiste à associer les styles définis avec les types de widgets :

**widget_class "GtkWindow" style "window"

*widget_class "GtkDialog" style "window"

*widget_class "GtkFileSelection" style "window"

*widget_class "*Gtk*Scale" style "scale"

*widget_class "*GtkCheckButton*" style "toggle_button"

*widget_class "*GtkRadioButton*" style "toggle_button"

*widget_class "*GtkButton*" style "button"

*widget_class "*Ruler" style "ruler"

*widget_class "*GtkText" style "text"

La syntaxe utilisée est relativement simple. Notez cependant l'utilisation de caractères joker (wildcard). Par exemple, pour un style s'appliquant à la fois à GtkRuler, GtkHRuler et GtkVRuler, on utilisera une seule mention : *Ruler. Idem pour Gtk*Scale.

Enfin, nous définissons le style "main_button" de tous les boutons dépendant de la fenêtre principale :

**widget "main window.*GtkButton*" style "main_button"

Voilà un aperçu des possibilités qu'offre la personnalisation du fichier ~/.gtkrc. Vous trouverez sur le site officiel Gtk+ toutes les documentations utiles pour en savoir davantage. Nous vous invitons également à nous faire part de vos thèmes. Nous nous ferons un plaisir de les diffuser.

 

Marble, un des thèmes les plus beaux, mais également un des plus lourds

© Copyright 2000 Diamond Editions/Linux magazine France. - Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1or any later version published by the Free Software Foundation; A copy of the license is included in the section entitled "GNU Free Documentation License".