Xfce Wiki

Sub domains
 

Site Tools


Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
howto:xfwm4_theme [2013/03/20 01:10]
p0ng [Button offset and spacing]
howto:xfwm4_theme [2014/12/08 14:19] (current)
landry [Xfwm 4.2 new functionality]
Line 34: Line 34:
  
 ===== 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.+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. 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.
Line 43: Line 43:
 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 and close.
  
-Buttons have active ((focused)),​ inactive ((unfocused)) and pressed states. As per figures 3 below:+Buttons have active ((focused)),​ inactive ((unfocused)), prelight ​and pressed states. As per figures 3 below:
 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
  
Line 103: Line 103:
  
 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 112:
   * 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.
 ===== 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 coloursIt's not just running ​the gimp and draw the buttonsMost 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 themeThe 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 color symbols ​are as follow : +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)). 
-^ Name ^ Description ^ +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.
-| 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. +To use the defined colors in the XFWM theme, the XPM files have to be editedSince XPM files are plain text, they can be edited with your favorite text editor.
-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. ===== ===== From Wikipedia, the free encyclopedia. =====
Line 217: Line 222:
  
 ===== 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 241: Line 246:
 This is a list of all possible part names in a decoration, so you can easily copy and paste them. (Tip: if using Firefox hold Ctrl while dragging, to select cells instead of lines. ;-)) This is a list of all possible part names in a decoration, so you can easily copy and paste them. (Tip: if using Firefox hold Ctrl while dragging, to select cells instead of lines. ;-))
  
-^ Active ​             ^ Inactive ​             ^ Pressed (buttons only) ^ +^ Active ​             ^ Inactive ​             ​^ Prelight (buttons only) ^ Pressed ​(buttons only) ^ Toggled active (buttons only) ^ Toggled inactive (buttons only) ^ Toggled prelight (buttons only) ^ Toggled pressed ​(buttons only) ^ 
-| menu-active ​        | menu-inactive ​        | menu-pressed ​    | +| menu-active ​        | menu-inactive ​        | menu-prelight ​    | menu-pressed ​    |                         ​| ​                          ​| ​                          ​| ​                         ​
-| shade-active ​       | shade-inactive ​       | shade-pressed ​   | +| shade-active ​       | shade-inactive ​       ​| shade-prelight ​   ​| shade-pressed ​   | shade-toggled-active ​   | shade-toggled-inactive ​   | shade-toggled-prelight ​   | shade-toggled-pressed ​   | 
-| stick-active ​       | stick-inactive ​       | stick-pressed ​   | +| stick-active ​       | stick-inactive ​       ​| stick-prelight ​   ​| stick-pressed ​   | stick-toggled-active ​   | stick-toggled-inactive ​   | stick-toggled-prelight ​   | stick-toggled-pressed ​   | 
-| hide-active ​        | hide-inactive ​        | hide-pressed ​    | +| hide-active ​        | hide-inactive ​        | hide-prelight ​    | hide-pressed ​    |                         ​| ​                          ​| ​                          ​| ​                         ​
-| maximize-active ​    | maximize-inactive ​    | maximize-pressed | +| maximize-active ​    | maximize-inactive ​    | maximize-prelight | maximize-pressed | maximize-toggled-active | maximize-toggled-inactive | maximize-toggled-prelight | maximize-toggled-pressed | 
-| close-active ​       | close-inactive ​       | close-pressed ​   | +| close-active ​       | close-inactive ​       ​| close-prelight ​   ​| close-pressed ​   ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| top-left-active ​    | top-left-inactive ​    ​| ​                 | +| top-left-active ​    | top-left-inactive ​    |                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| title-1-active ​     | title-1-inactive ​     |                  | +| title-1-active ​     | title-1-inactive ​     ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| title-2-active ​     | title-2-inactive ​     |                  | +| title-2-active ​     | title-2-inactive ​     ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| title-3-active ​     | title-3-inactive ​     |                  | +| title-3-active ​     | title-3-inactive ​     ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| title-4-active ​     | title-4-inactive ​     |                  | +| title-4-active ​     | title-4-inactive ​     ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| title-5-active ​     | title-5-inactive ​     |                  | +| title-5-active ​     | title-5-inactive ​     ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| top-right-active ​   | top-right-inactive ​   |                  | +| top-right-active ​   | top-right-inactive ​   ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| right-active ​       | right-inactive ​       |                  | +| right-active ​       | right-inactive ​       ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| bottom-right-active | bottom-right-inactive |                  | +| bottom-right-active | bottom-right-inactive ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| bottom-active ​      | bottom-inactive ​      ​| ​                 | +| bottom-active ​      | bottom-inactive ​      |                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| bottom-left-active ​ | bottom-left-inactive ​ |                  | +| bottom-left-active ​ | bottom-left-inactive  ​|                   |                  ​|                         ​| ​                          ​| ​                          ​| ​                         ​
-| left-active ​        | left-inactive ​        ​| ​                 | +| left-active ​        | left-inactive ​        |                   |                  |                         |                           ​| ​                          ​| ​                         |
 ===== 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) and Renato Santos (renatosan at gmail dot com).
howto/xfwm4_theme.txt · Last modified: 2014/12/08 14:19 by landry