====== 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. {{ howto:xfwm4:xfwm4-window.gif |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 ((focused)) ou inactive ((unfocused)). 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. | {{ howto:xfwm4:xfwm4-window-pixmaps.gif |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 ((focused)), inactive ((unfocused)) et pressée ((pressed)) comme représenté dans le tableau suivant : ^ Figure 3 - Les valeurs des boutons de Xfwm4 ^ | {{howto:xfwm4:menu-active.gif | Bouton actif}} {{howto:xfwm4:menu-inactive.gif | Bouton inactif}} {{howto:xfwm4:image_2.gif | 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 ^^ | {{howto:xfwm4:stick-active.gif}} {{howto:xfwm4:stick-inactive.gif}} {{howto:xfwm4:stick-pressed.gif}} | {{howto:xfwm4:stick-toggled-pressed.gif}} {{howto:xfwm4:stick-toggled-active.gif}} {{howto:xfwm4:image_3.gif}} | ===== Le fichier themerc ===== Pour définir les caractéristiques du titre telles que la couleur, le « button_spacing » ((espacement des boutons)) 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 : {{ howto:xfwm4:xfwm4-title-full-width.gif }} Si la valeur est à « false », l’image centrale du titre sera répétée jusqu’à occuper simplement la largeur du titre : {{ howto:xfwm4:xfwm4-title-no-full-width.gif }} ==== 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). {{ howto:xfwm4:xfwm4-compose.gif |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 [[http://www.gimp.org/|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).