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

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 couleurs 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’à prendre toute la largeur de la fenêtre :

Si la valeur est à “false”, l’image centrale du titre sera répétée jusqu’à prendre 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” it is possible to make themes “pick-up” gtk theme colours. It's not just running the gimp and draw the buttons. Most themes use a color symbol table. That means the xpm file must be opened and edited by hand.

Les symboles de couleur sont les suivants :

Nom Description
active_text_color Couleur du texte du titre des fenêtres actives
inactive_text_color Couleur du texte du titre des fenêtres incatives
active_border_color Très rare, habituellement fixé en noir
inactive_border_color Idem
active_color_1 Couleur de fond des fenêtres actives
active_hilight_1 Lighter color for active title for 3D look
active_shadow_1 Darker color for active title for 3D look
active_mid_1 Slightly darker color for active title
active_color_2 Background color for active window
active_hilight_2 Lighter color for active window
active_shadow_2 Darker color for active window
active_mid_2 Slightly darker color for active window
inactive_color_1 Background color for inactive title
inactive_hilight_1 Lighter color for inactive title for 3D look
inactive_shadow_1 Darker color for inactive title for 3D look
inactive_mid_1 Slightly darker color for inactive title
inactive_color_2 Background color for inactive window
inactive_hilight_2 Lighter color for inactive window
inactive_shadow_2 Darker color for inactive window
inactive_mid_2 Slightly darker color for inactive window

The symbols get replaced by the actual color values at runtime so that the window borders inherits GTK theme colors automatically. Xpm file format used natively by xfwm4 is no more than a plain text file that can be edited with your favorite text editor.

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