Xfce Wiki

Sub domains
 

Site Tools


Differences

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

Link to this comparison view

howto:xfwm4_theme [2013/03/20 01:10]
p0ng [Button offset and spacing]
howto:xfwm4_theme [2014/01/28 14:13] (current)
philipp [Gtk Color pickup]
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 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.1363738253.txt.gz · Last modified: 2013/03/20 01:10 by p0ng