| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| fr:howto:xfwm4_theme [2018/04/29 20:22] – [Barre de titre] superboa | fr:howto:xfwm4_theme [2018/05/01 15:57] (current) – [Nouvelles fonctionnalités de Xfwm 4.2] superboa |
|---|
| | {{howto:xfwm4:menu-active.gif | Bouton actif}} {{howto:xfwm4:menu-inactive.gif | Bouton inactif}} {{howto:xfwm4:image_2.gif | Bouton pressé}} | | | {{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. | 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 ^^ | ^ 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}} | | | {{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 ===== | ===== 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. | 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 ==== | ==== Positionnement des boutons ==== |
| 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. | 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 à « 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 }} | {{ howto:xfwm4:xfwm4-title-full-width.gif }} |
| |
| Si la valeur est à "false", l’image centrale du titre sera répétée jusqu’à prendre simplement la largeur du titre : | 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 }} | {{ howto:xfwm4:xfwm4-title-no-full-width.gif }} |
| ==== Décalage et espacement des boutons ==== | ==== 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. | 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. | La valeur « button_spacing », quant à elle, donne le nombre de pixels entre chaque bouton. |
| ===== Sélecteur de couleur Gtk ==== | ===== 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. | 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 : | Les symboles de couleur sont les suivants : |
| ^ Nom ^ Description ^ | ^ Nom ^ Description ^ |
| | active_text_color | Couleur du texte du titre des fenêtres actives | | | active_text_color | Couleur du texte du titre pour la fenêtre active | |
| | inactive_text_color | Couleur du texte du titre des fenêtres incatives | | | inactive_text_color | Couleur du texte du titre pour la fenêtre inactive | |
| | active_border_color | Très rare, habituellement fixé en noir | | | active_border_color | Très rare, habituellement défini en noir | |
| | inactive_border_color | Idem | | | inactive_border_color | Idem | |
| | active_color_1 | Couleur de fond des fenêtres actives | | | active_color_1 | Couleur d’arrière-plan pour le titre actif | |
| | active_hilight_1 | Lighter color for active title for 3D look | | | active_hilight_1 | Couleur plus claire pour le titre actif du look 3D | |
| | active_shadow_1 | Darker color for active title for 3D look | | | active_shadow_1 | Couleur plus sombre pour le titre actif du look 3D | |
| | active_mid_1 | Slightly darker color for active title | | | active_mid_1 | Couleur légèrement plus sombre pour le titre actif | |
| | active_color_2 | Background color for active window | | | active_color_2 | Couleur d’arrière-plan pour la fenêtre active | |
| | active_hilight_2 | Lighter color for active window | | | active_hilight_2 | Couleur plus claire pour la fenêtre active | |
| | active_shadow_2 | Darker color for active window | | | active_shadow_2 | Couleur plus sombre pour la fenêtre active | |
| | active_mid_2 | Slightly darker color for active window | | | active_mid_2 | Couleur légèrement plus sombre pour la fenêtre active | |
| | inactive_color_1 | Background color for inactive title | | | inactive_color_1 | Couleur d’arrière-plan pour le titre inactif | |
| | inactive_hilight_1 | Lighter color for inactive title for 3D look | | | inactive_hilight_1 | Couleur plus claire pour le titre inactif du look 3D | |
| | inactive_shadow_1 | Darker color for inactive title for 3D look | | | inactive_shadow_1 | Couleur plus sombre pour le titre inactif du look 3D | |
| | inactive_mid_1 | Slightly darker color for inactive title | | | inactive_mid_1 | Couleur légèrement plus sombre pour le titre inactif | |
| | inactive_color_2 | Background color for inactive window | | | inactive_color_2 | Couleur d’arrière-plan pour la fenêtre inactive | |
| | inactive_hilight_2 | Lighter color for inactive window | | | inactive_hilight_2 | Couleur plus claire pour la fenêtre inactive | |
| | inactive_shadow_2 | Darker color for inactive window | | | inactive_shadow_2 | Couleur plus sombre pour la fenêtre inactive | |
| | inactive_mid_2 | Slightly darker color for inactive window | | | inactive_mid_2 | Couleur légèrement plus sombre pour la fenêtre inactive | |
| |
| The symbols get replaced by the actual color values at runtime so that the window borders inherits GTK theme colors automatically. | 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. |
| Xpm file format used natively by xfwm4 is no more than a plain text file that can be edited with your favorite text editor. | 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. ===== | ===== 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. | 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. | 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'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. | 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. | 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 syntaxe est compatible avec le C, cela permet d'inclure directement le fichier dans le code source. | 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 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. | 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 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"... | 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 »… |
| |
| |
| |
| ===== Xfwm 4.2 new functionality ===== | ===== Nouvelles fonctionnalités de Xfwm 4.2 ===== |
| 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. | 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 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. | |
| | 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}} | {{ howto:xfwm4:xfwm4-compose.gif |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. | 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. |
| |
| This technique has several advantages: | Cette technique a de nombreux avantages : |
| |
| * 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 [[http://www.gimp.org/|The GIMP]]. | * 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]]. |
| * It's backward compatible with xfwm4 from Xfce 4.0, the PNG files are just ignored by xfwm4 4.0. | * Elle est rétrocompatible avec xfwm4 de Xfce 4.0, les fichiers PNG sont simplement ignorés par xfwm4 4,0. |
| |
| |
| |
| ===== Conclusion ===== | ===== 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/]]. | 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]] | Vous pouvez également trouver de nombreux thèmes sur [[http://www.xfce-look.org]] |
| |
| ===== Crédits ===== | ===== 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). | 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). |