Xfce Wiki

Sub domains
 

This is an old revision of the document!


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 Wikipedia, 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 les 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'avoir 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 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 caractere(s) 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 fait 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”…

Xfwm 4.2 new functionality

As simple as it is, the color symbol replacement table of the XPM format is not powerfull enough to achive the nice color gradients seen in most recent themes.

Xfwm 4.2 includes yet another functionality that gives real nice result while being still compatible with the previous theme format: It composes the final image from the XPM file and it colors replacement table, and another PNG file with transparency, if present.

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

The names of the PNG files are identical to the names of the corresponding XPM files, with the “.png” file extension (ie title-1-active.png, top-right-inactive.png, etc.). The PNG file is by no mean required, if it's not present, xfwm4 won't complain, but if there is a PNG image of the same name as the XPM image, and if that PNG has an alpha channel (ie, it has semi-transparent pixels) then the PNG image will be automatically layered on top of the XPM image to produce the final image.

This technique has several advantages:

  • It's fairly simple from a theme designer point of view, most people are working with similar techniques when composing themes with tools such as The GIMP.
  • It's backward compatible with xfwm4 from Xfce 4.0, the PNG files are just ignored by xfwm4 4.0.

Conclusion

J'espere 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 si vous pouviez partager vos thèmes avec le reste de la communauté sur http://www.themedepot.org/ (qui est le site préferentiel pour le dépot 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 how-to a été commencé par Drewbian (drewbian at tsn dot cc) puis 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