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 [2014/01/09 23:16] – [Window Sidebars and bottom] p0nghowto:xfwm4_theme [2024/12/14 02:09] (current) – improved grammar & formatting kevinbowen
Line 1: Line 1:
-====== Xfwm4 theme how-to ======+~~NOTOC~~ 
 +====== Xfwm4 Window Component and Theming how-to ====== 
 + 
 +  * **[[#Window Components|Window Components & Definitions]]** 
 +    * **[[#Titlebar decorations|Titlebar decorations]]** 
 +    * **[[#Window Sidebars and bottom|Window Sidebars and bottom]]** 
 +    * **[[#Xfwm4 Buttons|Xfwm4 Buttons]]** 
 +  * **[[#Themes locations|Themes locations]]** 
 +  * **[[#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 ===== +----
-In Xfwm4 version 4.0, the themes are searched in the following directories: +
- +
-    * User's home dir /.themes/xfwm4/theme_name (e.g.: ''/home/joe/.themes/xfwm4/b5'') +
-    * System's shared data directory /xfwm4/theme_name (e.g.: ''/usr/share/xfwm4/themes/b5'') +
- +
-In Xfwm version 4.2, the theme location is in line with the standard, searched in the following directories: +
- +
-    * 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")+
  
  
 +====== Window Components ======
  
 ===== 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.+For title bar decorations, xfwm4 uses five pixmaps named ''title-1-active.xpm'' to ''title-5-active.xpm''. For the window corners, the pixmaps used are ''top-left-active.xpm'' and ''top-right-active.xpm'' (see figure 2 below).
  
-For title bar decorations, xfwm4 uses 5 pixmaps named title-1-active.xpm to title-5-active.xpm with top-left-active.xpm and top-right-active.xpm making up the corners on each end as per figure 2 below.+ 
 +Windows can be in either an active(i.e. focused) or inactive(i.e. unfocused) state. For these, xfwm4 use pixmaps named accordingly: ''title-1-active.xpm'' and ''title-1-inactive.xpm''.
  
 |  {{ howto:xfwm4:xfwm4-window-pixmaps.gif |Figure 2 - The pixmaps that compose the whole window}}  | |  {{ howto:xfwm4:xfwm4-window-pixmaps.gif |Figure 2 - The pixmaps that compose the whole window}}  |
 |  Figure 2 - The pixmaps that compose the whole window  | |  Figure 2 - The pixmaps that compose the whole window  |
-The same naming convention is true for unfocused windows with the word inactive substituted.e.g. title-1-inactive.xpm 
  
-Title text colour and shadow options, alignment etc are set in the themerc file (detailed in the themerc section).+The same naming convention is true for unfocused windows with the word "inactive" substituted: for example,  "title-1-inactive.xpm".
  
 +Title text colour, shadow options, alignment, etc. are set in the [[#Themerc file|.themerc file]].
  
 +[[|Back to Top]]
 +----
  
 ===== Window Sidebars and bottom ===== ===== Window Sidebars and bottom =====
-Each side of a window is made up of  two pixmaps. The pixmaps on the left side are named left-active.xpm and bottom-left-active.xpm. with the right side (of course) being made up of right-active.xpm and bottom-right-active.xpm. 
  
-The Window bottom grab bar is made up of bottom-active.xpm and bottom-inactive.xpm pixmaps which will be repeated to fit as the window is resized.+Each side of a window is made up of two pixmaps. The pixmaps on the left side are named ''left-active.xpm'' and ''bottom-left-active.xpm''. The pixmaps on the right side of the window being made composed of ''right-active.xpm'' and ''bottom-right-active.xpm''. 
 + 
 +The Window bottom grab bar is made up of ''bottom-active.xpm'' and ''bottom-inactive.xpm'' pixmaps which will be repeated to fit as the window is resized. 
 + 
 +**Note:** These pixmaps also make up the mouse grab handles. It is important to keep this 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]] 
 +----
  
-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). 
 ===== Xfwm4 Buttons ===== ===== Xfwm4 Buttons =====
  
-Xfwm4 can use up to six action buttons - stick (sticky windows), menu, shade, hide, maximize and close.+Xfwm4 can use up to six action buttons: 
 +  * stick (sticky windows) 
 +  * menu 
 +  * shade 
 +  * hide 
 +  * maximize 
 +  * close.
  
-Buttons have active ((focused)), inactive ((unfocused)) and pressed states. As per figures 3 below: +Buttons can have the following states: 
-AbiWord Image menu-active.gif    AbiWord Image menu-inactive.gif   AbiWord Image image_2.gif+  * active(i.e. focused) 
 +  * inactive(i.e. unfocused) 
 +  * prelight 
 +  * pressed states 
 + 
 +As per figure 3:
  
 ^ 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}}   |  +|  {{howto:xfwm4:image_2.gif|pressed button state}} {{howto:xfwm4:menu-inactive.gif|inactive button state}} {{howto:xfwm4:menu-active.gif|active button state}}   |  
  
-Xfwm4 can also used "toggled"  buttons to indicated whether buttons are toggled on or off - figure 4. +Xfwm4 can also use "toggled" buttons to indicated whether buttons are toggled on or off - See 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+  - On the left: 
 +    - stick pressed 
 +    - stick inactive 
 +    - stick active 
 +  - On the right: 
 +    - stick toggled pressed 
 +    - stick toggled inactive 
 +    - stick toggled active
  
 ^ 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}}   |+|  {{howto:xfwm4:stick-pressed.gif|stick button pressed}} {{howto:xfwm4:stick-inactive.gif|stick button inactive}} {{howto:xfwm4:stick-active.gif|stick button active}}   |   {{howto:xfwm4:stick-toggled-pressed.gif|stick button toggled pressed}} {{howto:xfwm4:image_3.gif|stick button toggled inactive}} {{howto:xfwm4:stick-toggled-active.gif|stick toggled active}}  | 
 + 
 +As of Xfwm4 4.6, a new button effect of the active window is available called prelight. Hovering the mouse over the buttons, the picture becomes clearer. This can be used in all of the six active buttons. 
 + 
 +[[|Back to Top]] 
 +---- 
 + 
 +===== Themes locations ===== 
 +In Xfwm4, desktop themes are searched for in the following directories: 
 + 
 +    * User's home directory 
 +      * ''~/.themes/"  
 +      * For example: "/home/jane_doe/.themes/b5/xfwm4" 
 +    * System's shared data directory "$XDG_DATA_DIRS/themes" 
 +      * "/themes/theme_name/xfwm4" controlled by the package manager. 
 +      * For example: "/usr/share/themes/b5/xfwm4" 
 +    * System's shared data directory controlled by the local administrator  
 +      *  "/local/themes/theme_name/xfwm4" 
 +      * For example: "/usr/local/share/themes/b5/xfwm4" 
 + 
 +The "xfwm4" theme location follows the Freedesktop standard [[https://www.freedesktop.org/wiki/DesktopThemeSpec/|Desktop Theme Specification]]. 
 + 
 +[[|Back to Top]] 
 +----
  
-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. 
 ===== Themerc file ===== ===== Themerc file =====
  
Line 103: Line 159:
  
 The "button_spacing" value gives the number of pixels between each button. The "button_spacing" value gives the number of pixels between each button.
 +
 +The "maximized_offset" value places a space between the right edge (top-right-active) and the button (close, hide...) when maximized.
  
 ==== App icon ==== ==== App icon ====
Line 110: Line 168:
   * show_app_icon=false //#Shows the menu button//   * show_app_icon=false //#Shows the menu button//
  
-If you doesn't have a menu button, can be used 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 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.+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: 
 + 
 +^ Name ^ Gtk value ^ Description ^ 
 +| active_text_color          | fg[selected] | Text color on title for active window | 
 +| inactive_text_color        | fg[insensitive] | Text color on title for inactive window | 
 +| active_text_shadow_color   | dark[selected] | Shadow color for active window's title | 
 +| inactive_text_shadow_color | dark[insensitive] | Shadow color for inactive window's title | 
 +| active_border_color        | fg[normal] | Very rarely used usually set to black | 
 +| inactive_border_color      | fg[normal] | Idem | 
 +| active_color_1             | bg[selected] | Background color for active title | 
 +| active_color_2             | bg[normal] | Background color for active window | 
 +| active_hilight_1           | light[selected] | Lighter color for active title for 3D look | 
 +| active_hilight_2           | light[normal] | Lighter color for active window | 
 +| active_mid_1               | mid[selected] | Slightly darker color for active title | 
 +| active_mid_2               | mid[normal] | Slightly darker color for active window | 
 +| active_shadow_1            | darkselected[] | Darker color for active title for 3D look | 
 +| active_shadow_2            | dark[normal] | Darker color for active window | 
 +| inactive_color_1           | bg[insensitive] | Background color for inactive title | 
 +| inactive_color_2           | bg[normal] | Background color for inactive window | 
 +| inactive_hilight_1         | light[insensitive] | Lighter color for inactive title for 3D look | 
 +| inactive_hilight_2         | light[normal] | Lighter color for inactive window | 
 +| inactive_mid_1             | mid[insensitive] | Slightly darker color for inactive title | 
 +| inactive_mid_2             | mid[normal] | Slightly darker color for inactive window | 
 +| inactive_shadow_1          | dark[insensitive] | Darker color for inactive title for 3D look | 
 +| inactive_shadow_2          | dark[normal] | Darker color for inactive window | 
 + 
 +The Gtk values "fg" and "bg" are defined in the gtkrc file of the current Gtk theme. Please notice that the values "dark", "light" and "mid" can not be defined in the gtkrc but are computed (dark = 0.7 * bg, light = 1.3 * bg, mid = 0.5 * (dark + light)). 
 +The symbols get replaced by the actual color values at runtime so that the window border can inherit Gtk theme colors automatically, unless they are defined in the themerc.
  
-The color symbols are as follow : +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.
-^ Name ^ Description ^ +
-| active_text_color | Text color on title for active window | +
-| inactive_text_color | Text color on title for inactive window | +
-| active_border_color | Very rarely used usually set to black | +
-| inactive_border_color | Idem | +
-| active_color_1 | Background color for active title | +
-| active_color_2 | Background color for active window | +
-| active_hilight_1 | Lighter color for active title for 3D look | +
-| active_hilight_2 | Lighter color for active window | +
-| active_mid_1 | Slightly darker color for active title | +
-| active_mid_2 | Slightly darker color for active window | +
-| active_shadow_1 | Darker color for active title for 3D look | +
-| active_shadow_2 | Darker color for active window | +
-| inactive_color_1 | Background color for inactive title | +
-| inactive_color_2 | Background color for inactive window | +
-| inactive_hilight_1 | Lighter color for inactive title for 3D look | +
-| inactive_hilight_2 | Lighter color for inactive window | +
-| inactive_mid_1 | Slightly darker color for inactive title | +
-| inactive_mid_2 | Slightly darker color for inactive window | +
-| inactive_shadow_1 | Darker color for inactive title for 3D look | +
-| inactive_shadow_2 | 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. +[[|Back to Top]] 
-Xpm file format used natively by xfwm4 is no more than a plain text file that can be edited with your favorite text editor.+----
  
-===== From Wikipedia, the free encyclopedia. =====+===== XPM (X PixMap) format =====
 XPM (X PixMap) is an ASCII image format used by the X Window System. It was created in 1989 by Daniel Dardailler and Colas Nahaboo working in Inria Laboratories, France, and was later enhanced by Arnaud Le Hors. It is intended primarily for creating icons, and supports transparent color. It has a simple structure, deriving from the earlier XBM syntax. It can be created and manipulated using any text editor and can be included in a C language file. XPM (X PixMap) is an ASCII image format used by the X Window System. It was created in 1989 by Daniel Dardailler and Colas Nahaboo working in Inria Laboratories, France, and was later enhanced by Arnaud Le Hors. It is intended primarily for creating icons, and supports transparent color. It has a simple structure, deriving from the earlier XBM syntax. It can be created and manipulated using any text editor and can be included in a C language file.
  
Line 212: Line 292:
 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]] 
 +----
  
  
  
 ===== Xfwm 4.2 new functionality ===== ===== 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.+As simple as it is, the color symbol replacement table of the XPM format is not powerfull enough to achieve 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. 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.
Line 230: Line 311:
     * 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.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]]+
  
 ===== List of frame and button part names ===== ===== List of frame and button part names =====
Line 260: Line 338:
 | 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]]