Xfce Wiki

Sub domains
 

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
xfwm4_theme_howto [2006/12/02 16:05] – nickxfwm4_theme_howto [2007/08/19 02:11] – 60.20.49.217
Line 17: Line 17:
     * User's home dir /.themes/theme_name/xfwm4 (e.g.: "/home/joe/.themes/b5/xfwm4")     * User's home dir /.themes/theme_name/xfwm4 (e.g.: "/home/joe/.themes/b5/xfwm4")
     * System's shared data directory /themes/theme_name/xfwm4 (e.g.: "/usr/share/themes/b5/xfwm4")     * System's shared data directory /themes/theme_name/xfwm4 (e.g.: "/usr/share/themes/b5/xfwm4")
 +
  
  
Line 30: Line 31:
  
 Title text colour and shadow options, alignment etc are set in the themerc file (detailed in the themerc section). Title text colour and shadow options, alignment etc are set in the themerc file (detailed in the themerc section).
 +
 +
  
 ===== Window Sidebars and bottom ===== ===== Window Sidebars and bottom =====
Line 44: Line 47:
 AbiWord Image menu-active.gif    AbiWord Image menu-inactive.gif   AbiWord Image image_2.gif AbiWord Image menu-active.gif    AbiWord Image menu-inactive.gif   AbiWord Image image_2.gif
  
-Figure 3 - Xfwm4 button states+^ Figure 3 - Xfwm4 button states ^ 
 +|  {{howto:xfwm4:image_2.gif}} {{howto:xfwm4:menu-inactive.gif}} {{howto:xfwm4:menu-active.gif}}   |  
  
 Xfwm4 can also used "toggled"  buttons to indicated whether buttons are toggled on or off - figure 4. Xfwm4 can also used "toggled"  buttons to indicated whether buttons are toggled on or off - figure 4.
 AbiWord Image stick-active.gif   AbiWord Image stick-inactive.gif   AbiWord Image stick-pressed.gif     AbiWord Image stick-toggled-active.gif   AbiWord Image image_3.gif   AbiWord Image stick-toggled-pressed.gif AbiWord Image stick-active.gif   AbiWord Image stick-inactive.gif   AbiWord Image stick-pressed.gif     AbiWord Image stick-toggled-active.gif   AbiWord Image image_3.gif   AbiWord Image stick-toggled-pressed.gif
  
-Figure 4 - Stick buttons with extra toggled buttons+^ Figure 4 - Stick buttons with extra toggled buttons ^^ 
 +|  {{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}}   |
  
 ===== Themerc file ===== ===== Themerc file =====
Line 69: Line 74:
  
 A working example of this is the "B5" theme which only uses the close button. i.e. the entry "button_layout=C|" in the themerc file. A working example of this is the "B5" theme which only uses the close button. i.e. the entry "button_layout=C|" in the themerc file.
 +
  
 ==== Title width ==== ==== Title width ====
Line 74: Line 80:
  
 When set to "true", the center pixmap is repeated so that it fills the entire window width : When set to "true", the center pixmap is repeated so that it fills the entire window width :
 +
 +{{ howto:xfwm4:xfwm4-title-full-width.gif }}
  
 When set to "false", the center pixmap is repeated  just enough so that the title fits : When set to "false", the center pixmap is repeated  just enough so that the title fits :
 +
 +{{ howto:xfwm4:xfwm4-title-no-full-width.gif }}
  
 ==== Text shadow ==== ==== Text shadow ====
Line 192: Line 202:
  
 As a matter of fact, "thinking" of the gtk colors as early as drawing the theme can save a lot of time in this phase. If you use the exact same color across all the pixmaps, you can use the Search/Replace functionnality of the text editor to add the color symbols. You could even use a tool such as "sed" to perform mass changes in all the XPM files of the theme. As a matter of fact, "thinking" of the gtk colors as early as drawing the theme can save a lot of time in this phase. If you use the exact same color across all the pixmaps, you can use the Search/Replace functionnality of the text editor to add the color symbols. You could even use a tool such as "sed" to perform mass changes in all the XPM files of the theme.
 +
 +
 +
 +
  
 ===== Xfwm 4.2 new functionality ===== ===== Xfwm 4.2 new functionality =====
Line 198: Line 212:
 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 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 compose 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. 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.
Line 204: Line 218:
 This technique has several advantages: This technique has several advantages:
  
-    * It's fairly simple from a theme designer point of view, most people are working with similar techniques when compising themes with tools such as The GIMP.+    * 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]].
     * It's backward compatible with xfwm4 from Xfce 4.0, the PNG files are just ignored by xfwm4 4.0.     * It's backward compatible with xfwm4 from Xfce 4.0, the PNG files are just ignored by xfwm4 4.0.
 +
 +
  
 ===== Conclusion ===== ===== Conclusion =====
-I hope this small "how-to" for creating themes for xfwm4 will help you design your own themes. It would be great if you could share your themes with others on www.themedepot.org (which is the prefered site for xfce related themes) or from themes.freshmeat.net.+I hope this small "how-to" for creating themes for xfwm4 will help you design your own themes. It would be great if you could share your themes with others on [[http://www.themedepot.org]] (which is the prefered site for xfce related themes) or from [[http://themes.freshmeat.net]]. 
 + 
 +you can also find xfce theme at [[http://www.xfce-look.org]]
  
 ===== Credits ===== ===== Credits =====
 This how-to has been started by Drewbian (drewbian at tsn dot cc) and later modifed by Olivier Fourdan (fourdan at xfce dot org). This how-to has been started by Drewbian (drewbian at tsn dot cc) and later modifed by Olivier Fourdan (fourdan at xfce dot org).