Xfce Wiki

Sub domains
 

Créer un thème pour Xfwm4

Introduction

Xfwm4, le gestionnaire de fenêtres de Xfce4, utilise un moteur de thème simple et flexible basé sur les images au format .xpm. Xfwm4 utilise également un fichier texte pour les options de configuration (voir la section themerc). En outre, vous pouvez également créer des thèmes en sélectionnant des couleurs de thème gtk qui seront disponibles dans la section de sélection des couleurs GTK du document.

Figure 1 - Une fenêtre xfwm4

Répertoires des thèmes

Dans la version 4.0 de Xfwm4, les thèmes sont stockés dans les répertoires suivants :

  • Le répertoire personnel /.themes/xfwm4/nom_du_thème (exemple : /home/Roultabie/.themes/xfwm4/b5)
  • Le répertoire système /xfwm4/nom_du_thème (exemple : /usr/share/xfwm4/themes/b5)

À partir de la version 4.2, Les thèmes sont stockés conformément au standard dans les répertoires suivants :

  • Le répertoire personnel /.themes/nom_du_thème/xfwm4 (exemple : /home/Roultabie/.themes/b5/xfwm4)
  • Le répertoire système /themes/nom_du_thème/xfwm4 (exemple : /usr/share/themes/b5/xfwm4)

Barre de titre

Une fenêtre peut avoir la valeur active 1) ou inactive 2). Exemple d’état de xfwm4 pour l’image suivante : title-1-active.xpm et title-1-inactive.xpm.

Pour la barre de titre, xfwm4 utilise 5 images allant de title-1-active.xpm à title-5-active.xpm avec en plus top-left-active.xpm et top-right-active.xpm qui composent les coins correspondants comme le montre la figure 2 ci-dessous.

Figure 2 - Les images constituant le contour d’une fenêtre
Figure 2 - Les images constituant le contour d’une fenêtre

Les images de fenêtre inactives. La même convention de nom est utilisée pour les fenêtres inactives, les mots “active” sont simplement remplacés par “inactive”, par exemple : title-1-inactive.xpm.

Les options de couleur et d’ombre pour le texte du titre, l’alignement etc. sont paramétrés dans le fichier themerc (détaillé dans la section themerc).

Contours de fenêtre

Chaque côté d’une fenêtre est composée de deux images. Les images du côté gauche sont nommées left-active.xpm (pour le côté) et bottom-left-active.xpm (pour le coin bas). Idem pour le côté droit avec right-active.xpm (pour le côté) et bottom-right.active.xpm (pour le coin bas).

La partie basse de la fenêtre est composée des images bottom-active.xpm et bottom-inactive.xpm qui seront répétées autant de fois que nécessaire quand la fenêtre sera redimensionnée.

Les boutons Xfwm4

Xfwm4 peut gérer jusqu’à 6 boutons d’action : barre (fenêtre collante), menu, réduire, enrouler, maximiser et fermer.

Les boutons ont les valeurs suivantes : active 3), inactive 4) et pressée 5) comme représenté dans le tableau suivant :

Figure 3 - Les valeurs des boutons de Xfwm4
 Bouton actif  Bouton inactif  Bouton pressé

Xfwm4 peut également utilisé les boutons « actifs » pour indiquer si les boutons sont activés ou désactivés - figure 4.

Figure 4 - Les boutons « barre » avec les boutons « actifs » supplémentaires

Le fichier themerc

Pour définir les caractéristiques du titre telles que la couleur, le « button_spacing » 6) ou le « button_offset », xfwm4 utilise le fichier texte themerc se trouvant dans le dossier du thème au même niveau que les images.

Positionnement des boutons

Il est tout à fait possible de figer l’emplacement des boutons et du titre pour respecter les spécificités d’un thème (en dehors des thèmes qui l’exigent vraiment comme b5, pour l’ergonomie de l’utilisateur, il faut éviter d’employer cette méthode car cela réduit les possibilités pour celui-ci de personnaliser sont environnement).

# Définition des boutons :
#    O = menu
#    T = barre
#    H = minimiser
#    S = enrouler
#    M = maximiser
#    C = fermer
#    | = titre
button_layout=OTS|HMC

Par exemple, le thème b5 utilise uniquement le bouton de fermeture. c’est-à-dire l’entrée “button_layout = C |” dans le fichier themerc.

Largeur du titre

Un autre paramètre utile dans le themerc est le paramètre title_full_width. Cette valeur booléenne définit le comportement de l’image de la barre de titre.

Si la valeur est à « true », l’image centrale du titre sera répétée jusqu’à occuper toute la largeur de la fenêtre :

Si la valeur est à « false », l’image centrale du titre sera répétée jusqu’à occuper simplement la largeur du titre :

Ombre du titre

Il est également possible d’ajouter une ombre au titre d’une fenêtre, qu’elle soit active ou inactive, il faudra alors créer respectivement les valeurs booléennes title_shadow_active et title_shadow_inactive.

Les valeurs possibles sont : false, true, et frame.

Ajustement du titre

La position du titre peut être ajustée pour correspondre au design du thème. L’ajustement horizontal et vertical s’effectue en utilisant ces mots-clés :

  • title_horizontal_offset
  • title_vertical_offset_active
  • title_vertical_offset_inactive

Décalage et espacement des boutons

De manière similaire, les boutons peuvent être déplacés en utilisant la configuration « button offset ». Il est intéressant de noter que la valeur est relative à la bordure de la fenêtre d’application correspondante, et non à la bordure du cadre.

La valeur « button_spacing », quant à elle, donne le nombre de pixels entre chaque bouton.

Sélecteur de couleur Gtk

Comme vous l’avez sans doute remarqué lors de l’utilisation du thème par défaut de Xfwm4, il est possible de créer des thèmes “sélection” de couleurs de thème gtk. Il ne s’agit pas seulement d’exécuter GIMP et de dessiner les boutons. La plupart des thèmes utilisent une table de symbole de couleur. Cela signifie que le fichier xpm doit être ouvert et modifié à la main.

Les symboles de couleur sont les suivants :

Nom Description
active_text_color Couleur du texte du titre pour la fenêtre active
inactive_text_color Couleur du texte du titre pour la fenêtre inactive
active_border_color Très rare, habituellement défini en noir
inactive_border_color Idem
active_color_1 Couleur d’arrière-plan pour le titre actif
active_hilight_1 Couleur plus claire pour le titre actif du look 3D
active_shadow_1 Couleur plus sombre pour le titre actif du look 3D
active_mid_1 Couleur légèrement plus sombre pour le titre actif
active_color_2 Couleur d’arrière-plan pour la fenêtre active
active_hilight_2 Couleur plus claire pour la fenêtre active
active_shadow_2 Couleur plus sombre pour la fenêtre active
active_mid_2 Couleur légèrement plus sombre pour la fenêtre active
inactive_color_1 Couleur d’arrière-plan pour le titre inactif
inactive_hilight_1 Couleur plus claire pour le titre inactif du look 3D
inactive_shadow_1 Couleur plus sombre pour le titre inactif du look 3D
inactive_mid_1 Couleur légèrement plus sombre pour le titre inactif
inactive_color_2 Couleur d’arrière-plan pour la fenêtre inactive
inactive_hilight_2 Couleur plus claire pour la fenêtre inactive
inactive_shadow_2 Couleur plus sombre pour la fenêtre inactive
inactive_mid_2 Couleur légèrement plus sombre pour la fenêtre inactive

Les symboles sont remplacés par les valeurs de couleur actuelles au moment de l’exécution afin que les bordures de fenêtre héritent automatiquement des couleurs de thème GTK. Le format de fichier xpm utilisé nativement par xfwm4 n’est rien de plus qu’un simple fichier texte qui peut être édité avec votre éditeur de texte favori.

Documentation récupérée de Wikipédia, l’encyclopédie libre.

X PixMap, connu également sous le sigle XPM, est un format d’image spécialisé dans les icônes des environnements graphiques.

Il est utilisé entre autres par X11, le système standard d’interaction graphique avec l’utilisateur sur UNIX, Linux et BSD. La première version du format XPM sort en janvier 1989. Elle est créée par Colas Nahaboo et Daniel Dardailler dans le but d’obtenir un format de fichier capable d’enregistrer et de récupérer des icônes en couleur (chose impossible avec la Xlib) ; quant au format XBM, il est limité aux images en noir et blanc.

En 1990, Arnaud Le Hors réécrit et améliore le format. Quelques mois plus tard sort la deuxième version de XPM. Finalement, la version 3 sort en avril 1991, plus rapide et plus efficace que la version précédente.

La compression appliquée étant très faible comparé à celle des formats JPG, PNG ou SVG, le format XPM est destiné aux petites images et convient aux icônes.

Un fichier au format XPM est visualisable et compréhensible dans un éditeur de texte, voici un exemple :

/* XPM */
static char * exemple_xpm[] = {
"24 20 3 1",
"  c None",
". c #3A32E4",
"+ c #E43232",
"                        ",
"    ..                  ",
"   ....                 ",
"  ......++++++++        ",
" .........+++++++       ",
" ..........+++++++      ",
" ............++++++     ",
" .............++++++    ",
"  ..............++++    ",
"   +.............+++    ",
"   ++.............++    ",
"   +++.............+    ",
"   +++++.............   ",
"   ++++++.............. ",
"   ++++++++............ ",
"   +++++++++........... ",
"    +++++++++.........  ",
"     ++++++++++.......  ",
"      ++++++++++.....   ",
"       +++++++++ ...    "};

La syntaxe est compatible avec le langage C, cela permet d’inclure directement le fichier dans le code source.

Précisément, la première ligne de la constante (qui doit être du nom du fichier, dans l’exemple ci-dessus : exemple_xpm) indique la largeur de l’image en pixel (24 pixels ici), la longueur (20 ici), le nombre de couleurs (3 ici) et enfin le nombre de caractères codant chaque couleur (ici 1). Puis vient l’identification des couleurs, dans l’exemple, une espace équivaut à un pixel transparent (“ c None”), un point équivaut à un pixel bleu (“. c #3A32E4”) et le + équivaut à un pixel rouge (“+ c #E43232”). Enfin, vient la représentation de l’image par les différents caractères associés aux couleurs.

Lorsque l’ordinateur (dirigé par la bibliothèque adéquate) lit ce fichier, il pratique les mêmes opérations qu’un enfant face à un puzzle de couleur, lorsqu’il doit colorier de rouge les parties comportant un « 1 », de bleu les parties comportant un « 2 »…

Nouvelles fonctionnalités de Xfwm 4.2

Aussi simple qu’elle soit, la table de remplacement de symbole de couleur du format XPM n’est pas assez puissante pour récupérer les magnifiques dégradés de couleur aperçus dans le thèmes les plus récents.

Xfwm 4,2 comprend maintenant une fonctionnalité qui donne un résultat réel et agréable tout en étant toujours compatible avec le format de thème précédent : il crée l’image finale du fichier XPM et sa table de remplacement des couleurs, ainsi que d’autres fichiers PNG avec la transparence (si présents).

Figure 5 - PNG transparent images get layered on top of the XPM image

Les noms de fichiers PNG sont identiques aux noms de fichiers XPM correspondants, avec l’extension de fichier « .png » (par ex : title-1-active.png, top-right-inactive.png, etc.). Le fichier PNG n’est pas nécessaire, s’il n'est pas présent, xfwm4 ne se plaindra pas, mais s’il existe une image PNG du même nom que l’image XPM, et que ce PNG possède un canal alpha (par ex, s’il possède des pixels semi-transparents), alors l’image PNG sera automatiquement superposée au-dessus de l’image XPM pour produire l’image finale.

Cette technique a de nombreux avantages :

  • Elle est assez simple du point de vue d’un concepteur de thèmes, la plupart des gens travaillent avec des techniques similaires lors de la création de thèmes en utilisant des outils tels que The GIMP.
  • Elle est rétrocompatible avec xfwm4 de Xfce 4.0, les fichiers PNG sont simplement ignorés par xfwm4 4,0.

Conclusion

J’espère que ce petit « tutoriel » sur la création de thèmes pour xfwm4 vous aura aider a créer vos propres thèmes. Ce serait sympa de partager vos thèmes avec le reste de la communauté sur http://www.themedepot.org/ (qui est le site préférentiel pour le dépôt de thèmes Xfce) ou sur http://themes.freshmeat.net/.

Vous pouvez également trouver de nombreux thèmes sur http://www.xfce-look.org

Crédits

Ce tutoriel a été crée par Drewbian (drewbian at tsn dot cc) puis modifié par Olivier Fourdan (fourdan at xfce dot org). Il est actuellement en cours de traduction par Daniel DOUAT (contact at daniel-douat dot fr) et par vous autres (venez nombreux).

1) , 3)
focused
2) , 4)
unfocused
5)
pressed
6)
espacement des boutons