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
howto:xfwm4_theme [2020/08/19 19:27] – change section header name kevinbowenhowto:xfwm4_theme [2024/11/20 22:15] (current) – Small write up for new stretched bitmap feature in 4.20 rozniak
Line 1: Line 1:
 +~~NOTOC~~
 ====== Xfwm4 theme how-to ====== ====== Xfwm4 theme how-to ======
 +
 +
 +
 +  * **[[#Themes locations|Themes locations]]**
 +  * **[[#Titlebar decorations|Titlebar decorations]]**
 +  * **[[#Window Sidebars and bottom|Window Sidebars and bottom]]**
 +  * **[[#Xfwm4 Buttons|Xfwm4 Buttons]]**
 +  * **[[#Themerc file|Themerc file]]**
 +  * **[[#Gtk Color pickup|Gtk Color pickup]]**
 +  * **[[#XPM (X PixMap) format|XPM (X PixMap) format]]**
 +  * **[[#Xfwm 4.2 new functionality|Xfwm 4.2 new functionality]]**
 +  * **[[#List of frame and button part names|List of frame and button part names]]**
 +  * **[[#Xfwm 4.20 new functionality|Xfwm 4.20 new functionality]]**
 +  * **[[#Conclusion|Conclusion]]**
 +
 +----
  
  
 ===== Introduction ===== ===== Introduction =====
-Xfwm4, Xfce4's native window manager uses a simple yet flexible pixmap based theme engine using images in .xpm format. Xfwm4 also uses a text file for other configuration options (see themerc section). Further to this you can also make a theme pick up gtk theme colours which will be covered in the gtk color pickup section of the document.+Xfwm4, Xfce's native window manager, uses a simple yet flexible pixmap based theme engine using images in .xpm format. Xfwm4 also uses a text file for other configuration options (see themerc section). Further to this you can also make a theme pick up gtk theme colours which will be covered in the gtk color pickup section of the document.
  
 {{ howto:xfwm4:xfwm4-window.gif |Figure 1 - A sample window}} {{ howto:xfwm4:xfwm4-window.gif |Figure 1 - A sample window}}
  
 +----
 ===== Themes locations ===== ===== Themes locations =====
 In Xfwm4 version 4.0, the themes are searched in the following directories: In Xfwm4 version 4.0, the themes are searched in the following directories:
Line 18: Line 36:
     * System's shared data directory /themes/theme_name/xfwm4 controlled by the package manager (e.g.: "/usr/share/themes/b5/xfwm4")     * System's shared data directory /themes/theme_name/xfwm4 controlled by the package manager (e.g.: "/usr/share/themes/b5/xfwm4")
     * System's shared data directory /local/themes/theme_name/xfwm4 controlled by the local administrator (e.g.: "/usr/local/share/themes/b5/xfwm4")     * System's shared data directory /local/themes/theme_name/xfwm4 controlled by the local administrator (e.g.: "/usr/local/share/themes/b5/xfwm4")
 +
 +[[|Back to Top]]
 +----
 +
 ===== Titlebar decorations ===== ===== Titlebar decorations =====
 As windows can be in either active ((focused)) or inactive ((unfocused)) states for which xfwm4 use pixmaps named accordingly e.g. title-1-active.xpm and title-1-inactive.xpm. As windows can be in either active ((focused)) or inactive ((unfocused)) states for which xfwm4 use pixmaps named accordingly e.g. title-1-active.xpm and title-1-inactive.xpm.
Line 29: Line 51:
 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).
  
 +[[|Back to Top]] 
 +----
  
 ===== Window Sidebars and bottom ===== ===== Window Sidebars and bottom =====
Line 37: Line 60:
  
 N.B These pixmaps also make up the mouse grab handles so keep that in mind when deciding how many pixels wide they should be (particularly the bottom-left and bottom right pixmaps which make up the main resize handles on the windows). N.B These pixmaps also make up the mouse grab handles so keep that in mind when deciding how many pixels wide they should be (particularly the bottom-left and bottom right pixmaps which make up the main resize handles on the windows).
 +
 +[[|Back to Top]]
 +----
 +
 ===== Xfwm4 Buttons ===== ===== Xfwm4 Buttons =====
  
Line 54: Line 81:
  
 Xfwm4 4.6 brings a new button effect of the active window called prelight. Hovering the mouse over the buttons, the picture becomes clearer. Can be used in the six active buttons. Xfwm4 4.6 brings a new button effect of the active window called prelight. Hovering the mouse over the buttons, the picture becomes clearer. Can be used in the six active buttons.
 +
 +[[|Back to Top]]
 +----
 +
 ===== Themerc file ===== ===== Themerc file =====
  
Line 111: Line 142:
  
 If you don't have a menu button, you can use a blank square. Or you cannot use this option. If you don't have a menu button, you can use a blank square. Or you cannot use this option.
 +
 +==== Frame border top====
 +XFWM Versions 4.14.1 and above can take advantage of this feature to crop the top frame border of maximized application windows.
 +
 +  * frame_border_top=0 //#Default//
 +
 +{{ howto:xfwm4:frame_border_top-default.png }}
 +
 +  * frame_border_top=2 //#Will crop the top 2 pixels off//
 +
 +{{ howto:xfwm4:frame_border_top-2.png }}
 +
 +
 +[[|Back to Top]]
 +----
 +
 ===== Gtk Color pickup ==== ===== Gtk Color pickup ====
 As you have no doubt noticed when using Xfwm4's default theme, the theme uses the colors of the current Gtk theme. Colors for an XFWM theme can be defined in the theme's themrc file. If they are not defined there, they are picked up from the current Gtk theme. The following colors are used: As you have no doubt noticed when using Xfwm4's default theme, the theme uses the colors of the current Gtk theme. Colors for an XFWM theme can be defined in the theme's themrc file. If they are not defined there, they are picked up from the current Gtk theme. The following colors are used:
Line 142: Line 189:
  
 To use the defined colors in the XFWM theme, the XPM files have to be edited. Since XPM files are plain text, they can be edited with your favorite text editor. To use the defined colors in the XFWM theme, the XPM files have to be edited. Since XPM files are plain text, they can be edited with your favorite text editor.
 +
 +[[|Back to Top]]
 +----
  
 ===== XPM (X PixMap) format ===== ===== XPM (X PixMap) format =====
Line 215: Line 265:
 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.
  
 +[[|Back to Top]] 
 +----
  
  
Line 233: Line 284:
     * 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.
  
 +[[|Back to Top]]
  
- +----
-===== 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 [[http://www.xfce-look.org]] (which is the preferred site for Xfce related themes) or from [[http://browse.deviantart.com/customization/skins/linuxutil/xfce/?alltime=yes#order=9]].+
  
 ===== List of frame and button part names ===== ===== List of frame and button part names =====
Line 261: Line 311:
 | bottom-left-active  | bottom-left-inactive  |                   |                  |                         |                           |                           |                          | | bottom-left-active  | bottom-left-inactive  |                   |                  |                         |                           |                           |                          |
 | left-active         | left-inactive         |                   |                  |                         |                           |                           |                          | | left-active         | left-inactive         |                   |                  |                         |                           |                           |                          |
-===== 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) and Renato Santos (renatosan at gmail dot com).+---- 
 + 
 +===== Xfwm 4.20 new functionality ===== 
 +Xfwm 4.20 introduces the ability to have bitmaps that stretch across each side of the window decorations. This feature allows for things such as horizontal gradients - prior to this, with tiling as the only option, only vertical gradients were possible. 
 + 
 +Xfwm will use parts with the suffix "-stretch" if they exist, like so: 
 + 
 +^ Original            ^ Stretched                   ^ 
 +| top-left-active     | top-left-active-stretch     | 
 +| top-active          | top-active-stretch          | 
 +| top-right-active    | top-right-active-stretch    | 
 +| left-active         | left-active-stretch         | 
 +| right-active        | right-active-stretch        | 
 +| bottom-left-active  | bottom-left-active-stretch  | 
 +| bottom-active       | bottom-active-stretch       | 
 +| bottom-right-active | bottom-right-active-stretch | 
 + 
 +The same of course applies to the "inactive" variants of each part. 
 + 
 +It is recommended you still supply a non-stretched variant of theme parts for backwards compatibility purposes. Since this is additive, supplying both non-stretched and stretched will mean users of Xfwm <= 4.18 will use the tiled version, and >= 4.20 will use the stretched version. 
 + 
 +---- 
 + 
 +===== 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 [[http://www.xfce-look.org]] (which is the preferred site for Xfce related themes) or from [[http://browse.deviantart.com/customization/skins/linuxutil/xfce/?alltime=yes#order=9]]. 
 + 
 + 
 +[[|Back to Top]] 
 +---- 
 +[[:howto:install_new_themes:|Back to HowTo install themes page]]