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 [2024/12/14 00:19] – Clean up examples. Add link to Freedesktop standard kevinbowenhowto:xfwm4_theme [2025/07/07 13:08] (current) – [Xfwm 4.20 new functionality] Correct top/title part name for xfwm#871 rozniak
Line 1: Line 1:
 ~~NOTOC~~ ~~NOTOC~~
-====== Xfwm4 theme how-to ====== +====== 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]]**   * **[[#Themes locations|Themes locations]]**
-  * **[[#Titlebar decorations|Titlebar decorations]]** 
-  * **[[#Window Sidebars and bottom|Window Sidebars and bottom]]** 
-  * **[[#Xfwm4 Buttons|Xfwm4 Buttons]]** 
   * **[[#Themerc file|Themerc file]]**   * **[[#Themerc file|Themerc file]]**
   * **[[#Gtk Color pickup|Gtk Color pickup]]**   * **[[#Gtk Color pickup|Gtk Color pickup]]**
Line 25: Line 24:
  
 ---- ----
-===== 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]]. +====== Window Components ======
- +
-[[|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.+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]] [[|Back to Top]]
Line 58: Line 45:
  
 ===== 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''.
  
-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).+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]] [[|Back to Top]]
Line 69: Line 57:
 ===== 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)), prelight 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}}  |
  
-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.+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]] [[|Back to Top]]
Line 324: Line 348:
 ^ Original            ^ Stretched                   ^ ^ Original            ^ Stretched                   ^
 | top-left-active     | top-left-active-stretch     | | top-left-active     | top-left-active-stretch     |
-| top-active          | top-active-stretch          |+| title-active        | title-active-stretch        |
 | top-right-active    | top-right-active-stretch    | | top-right-active    | top-right-active-stretch    |
 | left-active         | left-active-stretch         | | left-active         | left-active-stretch         |