Help:Themes
From Openbox
m |
(→Solid) |
||
(22 intermediate revisions by 8 users not shown) | |||
Line 1: | Line 1: | ||
+ | language: gb | [[Help:Themes_fr|fr]] | ||
+ | |||
Openbox 3 themes are written as an X resource database, in a file named <code>themerc</code>. The format is quite simple to learn, but there are an enormous number of options available to you. | Openbox 3 themes are written as an X resource database, in a file named <code>themerc</code>. The format is quite simple to learn, but there are an enormous number of options available to you. | ||
Line 31: | Line 33: | ||
= Example = | = Example = | ||
− | This is not a real theme, and if you used it, there is | + | This is not a real theme, and if you used it, there is no guarantee it will look good in any way. It is just meant to show all of the options and how they relate to eachother. |
<code> | <code> | ||
Line 232: | Line 234: | ||
=== Parentrelative === | === Parentrelative === | ||
− | Parentrelative means that the element inherits its colors from the textures behind it. It is, in essence, completely transparent. Some theme elements can be parentrelative, and some can not. The documentation for each one will tell you if you can use parentrelative for it or not. | + | Parentrelative means that the element inherits its colors from the textures behind it. It is, in essence, completely transparent . Some theme elements can be parentrelative, and some can not. The documentation for each one will tell you if you can use parentrelative for it or not. |
Example: | Example: | ||
Line 241: | Line 243: | ||
=== Solid === | === Solid === | ||
− | Solid means that the background of the texture is filled with a single color. The texture ''must'' be accompanied by a single [[# | + | Solid means that the background of the texture is filled with a single color. The texture ''must'' be accompanied by a single [[#Colors| color field]]. |
Example: | Example: | ||
Line 248: | Line 250: | ||
=== Gradients === | === Gradients === | ||
− | When a gradient is specified, it must be followed by the gradient's type. Gradients all use two [[# | + | When a gradient is specified, it must be followed by the gradient's type. Gradients all use two [[#Colors| color fields]]: <code>color</code> and <code>colorTo</code> and must also be accompanied by these. |
Valid gradient types are: | Valid gradient types are: | ||
Line 265: | Line 267: | ||
==== SplitVertical gradients ==== | ==== SplitVertical gradients ==== | ||
− | SplitVertical gradients have 2 optional, addition [[# | + | SplitVertical gradients have 2 optional, addition [[#Colors|color fields]]: <code>color.splitTo</code> and <code>colorTo.splitTo</code>. These colors are the light colors used on the far top and bottom of the SplitVertical gradient. When these are omitted, then the default values for these are <code>color</code> * 5/4, and <code>colorTo</code> * 17/16. |
Example: | Example: |
Latest revision as of 14:16, 23 April 2013
language: gb | fr
Openbox 3 themes are written as an X resource database, in a file named themerc
. The format is quite simple to learn, but there are an enormous number of options available to you.
Each and every option has been documented, with details such as their default values, and which values are or are not valid for them. But to try make it a little more accessible, we'll start with an example theme, which uses every possible option within it. Each of the options can be clicked to read the details about it.
[edit] Theme installation
Openbox themes are stored in one of the following places:
- System-wide themes are installed in
/usr/share/themes
. - User-specific themes can be installed in
~/.local/share/themes
or in~/.themes
.
[edit] Theme selection
Choosing a theme to use is simple with the ObConf tool. Alternatively, there are a number of Pipe menus which can perform this function for you.
If you wish to set the theme by hand, you need to edit the <name> key in the <theme> section of your rc.xml
file. The Configuration guide is a good place to start.
[edit] Theme file structure
The file structure goes like this:
ThemesDirectory (such as /usr/share/themes) | +-> ThemeName (This is the name of the theme, such as Clearlooks) | +-> openbox-3 (This the type of the theme - it's for Openbox 3!) | |-> themerc (This is the main theme file, documented in this page) | |-> max.xbm (These are optional xbm masks for the titlebar buttons) |-> close.xbm ... +-> shade.xbm
ObConf can create a .obt
Openbox Theme Archive file out of a theme for distribution, and can also install .obt
files very easily.
[edit] Example
This is not a real theme, and if you used it, there is no guarantee it will look good in any way. It is just meant to show all of the options and how they relate to eachother.
# Window geometry padding.width: 2 padding.height: 2 border.width: 1 window.client.padding.width: 1 window.client.padding.height: 0 window.handle.width: 3 #Menu geometry menu.border.width: 1 menu.overlap.x: 0 menu.overlap.y: 0 # Border colors window.active.border.color: #000000 window.inactive.border.color: #000000 menu.border.color: #000000 window.active.client.color: #ffffff window.inactive.client.color: #cccccc # Text shadows window.active.label.text.font: shadow=y:shadowtint=70:shadowoffset=1 window.inactive.label.text.font: shadow=y:shadowtint=20:shadowoffset=1 menu.items.font: shadow=n menu.title.text.font: shadow=y:shadowtint=70:shadowoffset=1 # Window title justification window.label.text.justify: Center # Active window window.active.title.bg: Raised Gradient Vertical Interlaced window.active.title.bg.color: #658fb5 window.active.title.bg.colorTo: #4d6982 window.active.title.bg.interlace.color: #7788cc window.active.label.bg: Parentrelative window.active.label.text.color: #ffffff window.active.handle.bg: Raised Gradient Vertical window.active.handle.bg.color: #658fb5 window.active.handle.bg.colorTo: #4d6982 window.active.grip.bg: Raised Gradient Vertical window.active.grip.bg.color: #658fb5 window.active.grip.bg.colorTo: #4d6982 window.active.button.unpressed.bg: Flat Gradient Vertical Border window.active.button.unpressed.bg.color: #6993b9 window.active.button.unpressed.bg.colorTo: #55799a window.active.button.unpressed.bg.border.color: #3d4c5a window.active.button.unpressed.image.color: #ffffff window.active.button.pressed.bg: Flat Gradient Vertical Border window.active.button.pressed.bg.color: #537797 window.active.button.pressed.bg.colorTo: #50708e window.active.button.pressed.bg.border.color: #3d4c5a window.active.button.pressed.image.color: #ffffff window.active.button.disabled.bg: Flat Gradient Vertical Border window.active.button.disabled.bg.color: #537797 window.active.button.disabled.bg.colorTo: #50708e window.active.button.disabled.bg.border.color: #3d4c5a window.active.button.disabled.image.color: #3d4c5a window.active.button.hover.bg: Flat Gradient Vertical Border window.active.button.hover.bg.color: #6993b9 window.active.button.hover.bg.colorTo: #55799a window.active.button.hover.bg.border.color: #3d4c5a window.active.button.hover.image.color: #ffffff window.active.button.toggled.unpressed.bg: Flat Gradient Vertical Border window.active.button.toggled.unpressed.bg.color: #6993b9 window.active.button.toggled.unpressed.bg.colorTo: #55799a window.active.button.toggled.unpressed.bg.border.color: #3d4c5a window.active.button.toggled.unpressed.image.color: #cccccc window.active.button.toggled.pressed.bg: Flat Gradient Vertical Border window.active.button.toggled.pressed.bg.color: #537797 window.active.button.toggled.pressed.bg.colorTo: #50708e window.active.button.toggled.pressed.bg.border.color: #3d4c5a window.active.button.toggled.pressed.image.color: #ffffff window.active.button.toggled.hover.bg: Flat Gradient Vertical Border window.active.button.toggled.hover.bg.color: #6993b9 window.active.button.toggled.hover.bg.colorTo: #55799a window.active.button.toggled.hover.bg.border.color: #3d4c5a window.active.button.toggled.hover.image.color: #ffffff # Inactive windows window.inactive.title.bg: Raised Gradient Vertical window.inactive.title.bg.color: #f1eeea window.inactive.title.bg.colorTo: #d8cfc7 window.inactive.label.bg: Parentrelative window.inactive.label.text.color: #000000 window.inactive.handle.bg: Raised Gradient Vertical window.inactive.handle.bg.color: #f1eeea window.inactive.handle.bg.colorTo: #d8cfc7 window.inactive.grip.bg: Raised Gradient Vertical window.inactive.grip.bg.color: #f1eeea window.inactive.grip.bg.colorTo: #d8cfc7 window.inactive.button.unpressed.bg: Flat Gradient Vertical Border window.inactive.button.unpressed.bg.color: #efebe7 window.inactive.button.unpressed.bg.colorTo: #ddd6ce window.inactive.button.unpressed.bg.border.color: #8f8173 window.inactive.button.unpressed.image.color: #000000 window.inactive.button.pressed.bg: Flat Gradient Vertical Border window.inactive.button.pressed.bg.color: #efebe7 window.inactive.button.pressed.bg.colorTo: #ddd6ce window.inactive.button.pressed.bg.border.color: #8f8173 window.inactive.button.pressed.image.color: #000000 window.inactive.button.disabled.bg: Flat Gradient Vertical Border window.inactive.button.disabled.bg.color: #efebe7 window.inactive.button.disabled.bg.colorTo: #ddd6ce window.inactive.button.disabled.bg.border.color: #8f8173 window.inactive.button.disabled.image.color: #8f8173 window.inactive.button.toggled.bg: Flat Gradient Vertical Border window.inactive.button.toggled.bg.color: #efebe7 window.inactive.button.toggled.bg.colorTo: #ddd6ce window.inactive.button.toggled.bg.border.color: #8f8173 window.inactive.button.toggled.image.color: #000000 window.inactive.button.hover.bg: Flat Gradient Vertical Border window.inactive.button.hover.bg.color: #efebe7 window.inactive.button.hover.bg.colorTo: #ddd6ce window.inactive.button.hover.bg.border.color: #8f8173 window.inactive.button.hover.image.color: #000000 window.inactive.button.toggled.unpressed.bg: Flat Gradient Vertical Border window.inactive.button.toggled.unpressed.bg.color: #efebe7 window.inactive.button.toggled.unpressed.bg.colorTo: #ddd6ce window.inactive.button.toggled.unpressed.bg.border.color: #8f8173 window.inactive.button.toggled.unpressed.image.color: #000000 window.inactive.button.toggled.pressed.bg: Flat Gradient Vertical Border window.inactive.button.toggled.pressed.bg.color: #efebe7 window.inactive.button.toggled.pressed.bg.colorTo: #ddd6ce window.inactive.button.toggled.pressed.bg.border.color: #8f8173 window.inactive.button.pressed.toggled.image.color: #000000 window.inactive.button.toggled.hover.bg: Flat Gradient Vertical Border window.inactive.button.toggled.hover.bg.color: #efebe7 window.inactive.button.toggled.hover.bg.colorTo: #ddd6ce window.inactive.button.toggled.hover.bg.border.color: #8f8173 window.inactive.button.toggled.hover.image.color: #000000 # Menus menu.title.bg: Raised Gradient Vertical menu.title.bg.color: #658fb5 menu.title.bg.colorTo: #4d6982 menu.title.text.color: #ffffff menu.title.text.justify: Left
menu.separator.color: #444444 menu.separator.width: 1 menu.separator.padding.width: 6 menu.separator.padding.height: 3 menu.items.bg: Flat Solid menu.items.bg.color: #f8f5f2 menu.items.text.color: #000000 menu.items.disabled.text.color: #aaaaaa menu.items.active.bg: Flat Gradient Vertical menu.items.active.bg.color: #628cb2 menu.items.active.bg.colorTo: #50708d menu.items.active.text.color: #ffffff menu.items.active.disabled.text.color: #aaaaaa
[edit] Data types
[edit] Integers
These are simply numbers like 1
or 42
. They can be prime, composite, or zero.
Example:
window.handle.width: 3
[edit] Justification
These determines how to justify text. Valid options are Left
, Center
and Right
.
Example:
menu.title.text.justify: Left
[edit] Textures
These determine the visual look of an element. They are the most complicated part of a theme file, but they are still not too tricky.
Textures are specified through a text string with a number of fields. Capitalization is not significant. The format is as follows (|
stands for "or" and []
surround optional fields):
parentrelative | ((solid | gradient gradient-type) [border] [interlaced])
We'll dissect what that means exactly.
[edit] Parentrelative
Parentrelative means that the element inherits its colors from the textures behind it. It is, in essence, completely transparent . Some theme elements can be parentrelative, and some can not. The documentation for each one will tell you if you can use parentrelative for it or not.
Example:
window.active.label.bg: Parentrelative
window.inactive.label.bg: Parentrelative Raised
[edit] Solid
Solid means that the background of the texture is filled with a single color. The texture must be accompanied by a single color field.
Example:
menu.items.bg: Solid Flat
menu.items.bg.color: #f8f5f2
[edit] Gradients
When a gradient is specified, it must be followed by the gradient's type. Gradients all use two color fields: color
and colorTo
and must also be accompanied by these.
Valid gradient types are:
- Diagonal - A gradient from the top left corner to the bottom right corner
- CrossDiagonal - A gradient from the top right corner to the bottom left corner
- Pyramid - A gradient that starts in all four corners and smooths to the center of the texture
- Horizontal - A gradient from the left edge to the right
- MirrorHorizontal - A gradient from the left edge to the middle, and then reversed to the right edge
- Vertical - A gradient from the top edge to the bottom
- SplitVertical - A gradient split in the middle that goes out toward the top and bottom edges
Example:
menu.title.bg: Gradient Vertical Raised
menu.title.bg.color: #658fb5
menu.title.bg.colorTo: #4d6982
[edit] SplitVertical gradients
SplitVertical gradients have 2 optional, addition color fields: color.splitTo
and colorTo.splitTo
. These colors are the light colors used on the far top and bottom of the SplitVertical gradient. When these are omitted, then the default values for these are color
* 5/4, and colorTo
* 17/16.
Example:
menu.title.bg: Gradient SplitVertical Raised
menu.title.bg.color: #658fb5
menu.title.bg.color.splitTo: #7595b9
menu.title.bg.colorTo: #4d6982
menu.title.bg.colorTo.splitTo: #557485
[edit] Border
Borders can be used on both solid and gradient textures. Valid options for the border are Flat
, Raised
and Sunken
. When a border is not specified, Raised
is assumed.
Flat, by default, means no border at all. To add a flat solid border, use Flat Border
. When using a flat border, the texture must be accompanied by a border color.
Example:
window.active.button.unpressed.bg: Gradient Vertical Flat Border
window.active.button.unpressed.bg.border.color: #3d4c5a
Raised and Sunken have two bevel options available to them. By default, a bevel is drawn around the very outside of the texture. If Bevel2
is specified, then the bevel is drawn slightly in from the edge. This can be used to animate button presses/toggled states.
The strength of the bevel highlights can also be determined by the theme, by using the highlight
and shadow
fields:
The highlight
field specifies the strength of the light bevel. It is a value above or equal to 0, where 0 makes no highlight at all, 256 makes the highlight color 100% brighter, 512 makes the highlight color 200% brighter, and so on. The default highlight
is 128 (which is a 50% increase in brightness).
The shadow
field specifies the strength of the dark bevel. It is a value between 0 and 256, where 0 makes no shadow at all, and 256 makes a completely black shadow (100% decreased brightness). The default shadow
is 64 (which is a 25% decrease in brightness).
Example:
window.inactive.button.disabled.bg: Gradient Diagonal Raised
window.inactive.button.disabled.bg.color: rgb:50/54/58
window.inactive.button.disabled.bg.colorTo: black
window.inactive.button.disabled.bg.highlight: 128
window.inactive.button.disabled.bg.shadow: 64
window.inactive.button.toggled.pressed.bg: Gradient Diagonal Raised Bevel2
window.inactive.button.toggled.pressed.bg.color: rgb:50/54/58
window.inactive.button.toggled.pressed.bg.colorTo: black
[edit] Interlaced
Interlaced textures have a solid line drawn horizontally every second row. When you specify interlaced
, the texture must be accompanied by an interlaced color.
Example:
window.inactive.title.bg: Solid Flat Interlaced
window.inactive.title.bg.color: #f5f5f5
window.inactive.title.bg.interlace.color: #f6f6f6
[edit] Colors
Colors can be specified by name or by their hexadecimal RGB value.
[edit] Color names
Wikipedia has a list of X11 color names, and further details here.
Example:
menu.items.active.text.color: white
window.active.grip.bg.color: grey40
[edit] RGB values
Colors can be specified by hexadecimal RGB values in two ways. The most familiar is through syntax similar to HTML, #rrggbb
. However you may also use the format rgb:rr/bb/gg
. What goes inside them for the rr
, gg
and bb
values is identical.
Example:
window.active.grip.bg.color: #658fb5
window.active.label.text.color: #fff
menu.items.active.bg.color: rgb:90/94/98
window.active.title.bg.color: rgb:6/9/c
Note that #fff
is equivalent to #f0f0f0
, not to #ffffff
.
[edit] Text shadow strings
Text shadows are specified through a specially formatted text string.
There are three properties that can be placed in the string: shadow
, shadowtint
and shadowoffset
.
Shadow is a boolean value. It defaults to no. You can enable a shadow for text by using shadow=y
.
Shadowtint specifies the alpha value for the shadow as well as its color (black or white). It defaults to black and 50% opacity. You can specify the shadowtint by using shadowtint=70
. The tint can be any integer between -100 and 100. 0 means 0% opacity (invisible), 100 means 100% opacity and black, -100 means 100% opacity and white.
Shadowoffset specifies how far the shadow is should be offset from the text. It defaults to 1. It can be positive to move the shadow and and right from the text, or negative to move it up and left from the text. You can set the shadowoffset by using shadowoffset=2
. A shadowoffset of 0 will place it exactly behind the text and it will not be visible.
The text shadow string used to be for choosing a font for the theme as well. Any other properties in the string, such as those for choosing a font, are ignored.
Example:
window.active.label.text.font:shadow=y:shadowtint=70:shadowoffset=1
[edit] Theme elements
Each theme element corresponds to one part of a window or a menu. We'll start be discussing the elements that let you change the size and placement of things, and then talk about how to change the textures used to render everything.
We're going to use a table such as this to describe each element:
Type: | integer |
---|---|
Default: | 1 |
Valid: | 0-100 |
Parentrelative: | no |
Type shows the type of the value for the element.
Default gives the default value for the element if it is not listed in the theme. When Default refers to another theme element, then it means that element's values are used.
Valid gives valid ranges for elements that this is applicable for, such as integer values.
Parentrelative specifies if a given texture may use the Parentrelative visual type, when applicable.
[edit] Geometry
[edit] border.width
Type: | integer |
---|---|
Default: | 1 |
Valid: | 0 - 100 |
Specifies the size of the border drawn around window frames.
See also: window.active.border.color, window.inactive.border.color
[edit]
Type: | integer |
---|---|
Default: | border.width |
Valid: | 0 - 100 |
Specifies the size of the border drawn around menus.
See also: menu.border.color
[edit]
Type: | integer |
---|---|
Default: | 1 |
Valid: | 1 - 100 |
Specifies the size of menu line separators. (As of version 3.4.7)
[edit]
Type: | integer |
---|---|
Default: | 6 |
Valid: | 0 - 100 |
Specifies the space on the left and right side of menu line separators. (As of version 3.4.7)
See also: menu.separator.padding.height
[edit]
Type: | integer |
---|---|
Default: | 3 |
Valid: | 0 - 100 |
Specifies the space on the top and bottom of menu line separators. (As of version 3.4.7)
See also: menu.separator.padding.width
[edit] osd.border.width
Type: | integer |
---|---|
Default: | border.width |
Valid: | 0 - 100 |
Specifies the size of the border drawn on-screen-dialogs, such as the focus cycling (Alt-Tab) dialog.
See also: osd.border.color
[edit] window.client.padding.width
Type: | integer |
---|---|
Default: | padding.width |
Valid: | 0 - 100 |
Specifies the size of the left and right sides of the inner border. The inner border is drawn around the window, but inside the other decorations.
See also: window.active.client.color, window.inactive.client.color window.client.padding.height
[edit] window.client.padding.height
Type: | integer |
---|---|
Default: | window.client.padding.width |
Valid: | 0 - 100 |
Specifies the size of the top and bottom sides of the inner border. The inner border is drawn around the window, but inside the other decorations.
See also: window.active.client.color, window.inactive.client.color window.client.padding.width
[edit] window.handle.width
Type: | integer |
---|---|
Default: | 6 |
Valid: | 0 - 100 |
Specifies the size of the window handle. The window handle is the piece of decorations on the bottom of windows. A value of 0 means that no handle is shown.
See also: window.active.handle.bg, window.inactive.handle.bg, window.active.grip.bg, window.inactive.grip.bg
[edit] padding.width
Type: | integer |
---|---|
Default: | 3 |
Valid: | 0 - 100 |
Specifies the padding size, used for spacing out elements in the window decorations. This can be used to give a theme a more compact or a more relaxed feel. This specifies padding in the horizontal direction (and vertical direction if padding.height is not explicitly set).
See also: padding.height
[edit] padding.height
Type: | integer |
---|---|
Default: | padding.width |
Valid: | 0 - 100 |
Specifies the padding size, used for spacing out elements in the window decorations. This can be used to give a theme a more compact or a more relaxed feel. This specifies padding in only the vertical direction.
See also: padding.width
[edit]
Type: | integer |
---|---|
Default: | menu.overlap |
Valid: | -100 - 100 |
Specifies how sub menus should overlap their parents. A positive value moves the submenu over top of their parent by that amount. A negative value moves the submenu away from their parent by that amount. (As of version 3.4.7)
See also: menu.overlap.y
[edit]
Type: | integer |
---|---|
Default: | menu.overlap |
Valid: | -100 - 100 |
Specifies how sub menus should be positioned relative to their parents. A positive value moves the submenu vertically down by that amount, a negative value moves it up by that amount. (As of version 3.4.7)
See also: menu.overlap.x
[edit]
Type: | integer |
---|---|
Default: | 0 |
Valid: | -100 - 100 |
This property is obsolete and only present for backwards compatibility.
See also: menu.overlap.x, menu.overlap.y
[edit] Border colors
[edit] window.active.border.color
Type: | color |
---|---|
Default: | border.color |
Specifies the border color for the focused window.
See also: border.width, window.inactive.border.color
[edit] window.active.title.separator.color
Type: | color |
---|---|
Default: | window.active.border.color |
Specifies the border color for the border between the titlebar and the window, for the focused window.
See also: window.inactive.title.separator.color
[edit] window.inactive.border.color
Type: | color |
---|---|
Default: | window.active.border.color |
Specifies the border color for all non-focused windows.
See also: border.width, window.active.border.color
[edit] window.inactive.title.separator.color
Type: | color |
---|---|
Default: | window.inactive.border.color |
Specifies the border color for the border between the titlebar and the window, for non-focused windows.
See also: window.active.title.separator.color
[edit] border.color
Type: | color |
---|---|
Default: | black |
This property is obsolete and only present for backwards compatibility.
See also: window.active.border.color, window.inactive.border.color, menu.border.color
[edit] window.active.client.color
Type: | color |
---|---|
Default: | white |
Specifies the color of the inner border for the focused window, drawn around the window but inside the other decorations.
See also: window.client.padding.width, window.inactive.client.color
[edit] window.inactive.client.color
Type: | color |
---|---|
Default: | white |
Specifies the color of the inner border for non-focused windows, drawn around the window but inside the other decorations.
See also: window.client.padding.width, window.active.client.color
[edit]
Type: | color |
---|---|
Default: | window.active.border.color |
Specifies the border color for menus.
See also: menu.border.width
[edit] osd.border.color
Type: | color |
---|---|
Default: | window.active.border.color |
Specifies the border color for on-screen-dialogs, such as the focus cycling (Alt-Tab) dialog.
See also: osd.border.width
[edit] Titlebar colors
[edit] window.active.label.text.color
Type: | color |
---|---|
Default: | black |
Specifies the color of the titlebar text for the focused window.
See also: window.inactive.label.text.color
[edit] window.inactive.label.text.color
Type: | color |
---|---|
Default: | white |
Specifies the color of the titlebar text for non-focused windows.
See also: window.active.label.text.color
[edit] window.active.button.unpressed.image.color
Type: | color |
---|---|
Default: | black |
Specifies the color of the images in titlebar buttons in their default, unpressed, state. This element is for the focused window.
See also: window.inactive.button.unpressed.image.color
[edit] window.active.button.pressed.image.color
Type: | color |
---|---|
Default: | window.active.button.unpressed.image.color |
Specifies the color of the images in titlebar buttons when they are being pressed by the user. This element is for the focused window.
See also: window.inactive.button.pressed.image.color
[edit] window.active.button.disabled.image.color
Type: | color |
---|---|
Default: | white |
Specifies the color of the images in titlebar buttons when they are disabled for the window. This element is for the focused window.
See also: window.inactive.button.disabled.image.color
[edit] window.active.button.hover.image.color
Type: | color |
---|---|
Default: | window.active.button.unpressed.image.color |
Specifies the color of the images in titlebar buttons when the mouse is over top of the button. This element is for the focused window.
See also: window.inactive.button.hover.image.color
[edit] window.active.button.toggled.unpressed.image.color
Type: | color |
---|---|
Default: | window.active.button.toggled.image.color |
Specifies the color of the images in titlebar buttons when the button is toggled - such as when a window is maximized. This element is for the focused window.
See also: window.inactive.button.toggled.unpressed.image.color
[edit] window.active.button.toggled.pressed.image.color
Type: | color |
---|---|
Default: | window.active.button.pressed.image.color |
Specifies the color of the images in the titlebar buttons if they are pressed on with the mouse while they are in the toggled state - such as when a window is maximized. This element is for the focused window.
See also: window.inactive.button.toggled.pressed.image.color
[edit] window.active.button.toggled.hover.image.color
Type: | color |
---|---|
Default: | window.active.button.toggled.unpressed.image.color |
Specifies the color of the images in the titlebar buttons when the mouse is hovered over them while they are in the toggled state - such as when a window is maximized. This element is for the focused window.
See also: window.inactive.button.toggled.hover.image.color
[edit] window.active.button.toggled.image.color
Type: | color |
---|---|
Default: | window.active.button.pressed.image.color |
This property is obsolete and only present for backwards compatibility.
[edit] window.inactive.button.unpressed.image.color
Type: | color |
---|---|
Default: | white |
Specifies the color of the images in titlebar buttons in their default, unpressed, state. This element is for non-focused windows.
See also: window.active.button.unpressed.image.color
[edit] window.inactive.button.pressed.image.color
Type: | color |
---|---|
Default: | window.inactive.button.unpressed.image.color |
Specifies the color of the images in titlebar buttons when they are being pressed by the user. This element is for non-focused windows.
This color is also used for pressed color when the button is toggled.
See also: window.active.button.pressed.image.color
[edit] window.inactive.button.disabled.image.color
Type: | color |
---|---|
Default: | black |
Specifies the color of the images in titlebar buttons when they are disabled for the window. This element is for non-focused windows.
See also: window.active.button.disabled.image.color
[edit] window.inactive.button.hover.image.color
Type: | color |
---|---|
Default: | window.inactive.button.unpressed.image.color |
Specifies the color of the images in titlebar buttons when the mouse is over top of the button. This element is for non-focused windows.
See also: window.active.button.hover.image.color
[edit] window.inactive.button.toggled.unpressed.image.color
Type: | color |
---|---|
Default: | window.inactive.button.toggled.image.color |
Specifies the color of the images in titlebar buttons when the button is toggled - such as when a window is maximized. This element is for non-focused windows.
See also: window.active.button.toggled.unpressed.image.color
[edit] window.inactive.button.toggled.pressed.image.color
Type: | color |
---|---|
Default: | window.inactive.button.pressed.image.color |
Specifies the color of the images in the titlebar buttons if they are pressed on with the mouse while they are in the toggled state - such as when a window is maximized. This element is for non-focused windows.
See also: window.active.button.toggled.pressed.image.color
[edit] window.inactive.button.toggled.hover.image.color
Type: | color |
---|---|
Default: | window.inactive.button.toggled.unpressed.image.color |
Specifies the color of the images in the titlebar buttons when the mouse is hovered over them while they are in the toggled state - such as when a window is maximized. This element is for non-focused windows.
See also: window.active.button.toggled.hover.image.color
[edit] window.inactive.button.toggled.image.color
Type: | color |
---|---|
Default: | window.active.button.pressed.image.color |
This property is obsolete and only present for backwards compatibility.
[edit] Active window textures
[edit] window.active.title.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | no |
Specifies the background for the focused window's titlebar.
See also: window.inactive.title.bg
[edit] window.active.label.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for the focused window's titlebar label. The label is the container for the window title. When it is parentrelative, then it uses the window.active.title.bg which is underneath it.
See also: titlebar colors, window.inactive.label.bg, window.active.title.bg
[edit] window.active.handle.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | no |
Specifies the background for the focused window's handle. The handle is the window decorations placed on the bottom of windows.
See also: window.handle.width, window.inactive.handle.bg
[edit] window.active.grip.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for the focused window's grips. The grips are located at the left and right sides of the window's handle. When it is parentrelative, then it uses the window.active.handle.bg which is underneath it.
See also: window.handle.width, window.inactive.grip.bg, window.active.handle.bg
[edit] Inactive window textures
[edit] window.inactive.title.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | no |
Specifies the background for non-focused windows' titlebars.
See also: window.active.title.bg
[edit] window.inactive.label.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for non-focused windows' titlebar labels. The label is the container for the window title. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.active.label.bg, window.inactive.title.bg
[edit] window.inactive.handle.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | no |
Specifies the background for non-focused windows' handles. The handle is the window decorations placed on the bottom of windows.
See also: window.handle.width, window.active.handle.bg
[edit] window.inactive.grip.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for non-focused windows' grips. The grips are located at the left and right sides of the window's handle. When it is parentrelative, then it uses the window.inactive.handle.bg which is underneath it.
See also: window.handle.width, window.active.grip.bg, window.inactive.handle.bg
[edit] Active window button textures
[edit] window.active.button.unpressed.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for titlebar buttons in their default, unpressed, state. This element is for the focused window. When it is parentrelative, then it uses the window.active.title.bg which is underneath it.
See also: titlebar colors, window.active.title.bg, window.inactive.button.unpressed.bg
[edit] window.active.button.pressed.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for titlebar buttons when they are being pressed by the user. This element is for the focused window. When it is parentrelative, then it uses the window.active.title.bg which is underneath it.
See also: titlebar colors, window.active.title.bg, window.inactive.button.pressed.bg
[edit] window.active.button.hover.bg
Type: | texture |
---|---|
Default: | window.active.button.unpressed.bg |
Parentrelative: | yes |
Specifies the background for titlebar buttons when the mouse is over them. This element is for the focused window. When it is parentrelative, then it uses the window.active.title.bg which is underneath it.
See also: titlebar colors, window.active.title.bg, window.inactive.button.hover.bg
[edit] window.active.button.disabled.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for titlebar buttons when they are disabled for the window. This element is for the focused window. When it is parentrelative, then it uses the window.active.title.bg which is underneath it.
See also: titlebar colors, window.active.title.bg, window.inactive.button.disabled.bg
[edit] window.active.button.toggled.unpressed.bg
Type: | texture |
---|---|
Default: | window.active.button.toggled.bg |
Parentrelative: | yes |
Specifies the default background for titlebar buttons when they are toggled - such as when a window is maximized. This element is for the focused window. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.active.title.bg, window.inactive.button.toggled.unpressed.bg
[edit] window.active.button.toggled.pressed.bg
Type: | texture |
---|---|
Default: | window.active.button.pressed.bg |
Parentrelative: | yes |
Specifies the default background for titlebar buttons if the user is pressing them with the mouse while they are toggled - such as when a window is maximized. This element is for the focused window. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.active.title.bg, window.inactive.button.toggled.pressed.bg
[edit] window.active.button.toggled.hover.bg
Type: | texture |
---|---|
Default: | window.active.button.toggled.unpressed.bg |
Parentrelative: | yes |
Specifies the default background for titlebar buttons if the user is pressing them with the mouse while they are toggled - such as when a window is maximized. This element is for the focused window. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.active.title.bg, window.inactive.button.toggled.hover.bg
[edit] window.active.button.toggled.bg
Type: | texture |
---|---|
Default: | window.active.button.pressed.bg |
Parentrelative: | yes |
This property is obsolete and only present for backwards compatibility.
[edit] Inactive window button textures
[edit] window.inactive.button.unpressed.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for titlebar buttons in their default, unpressed, state. This element is for non-focused windows. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.inactive.title.bg, window.active.button.unpressed.bg
[edit] window.inactive.button.pressed.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for titlebar buttons when they are being pressed by the user. This element is for non-focused windows. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.inactive.title.bg, window.active.button.pressed.bg
[edit] window.inactive.button.hover.bg
Type: | texture |
---|---|
Default: | window.inactive.button.unpressed.bg |
Parentrelative: | yes |
Specifies the background for titlebar buttons when the mouse is over them. This element is for non-focused windows. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.inactive.title.bg, window.active.button.hover.bg
[edit] window.inactive.button.disabled.bg
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for titlebar buttons when they are disabled for the window. This element is for non-focused windows. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.inactive.title.bg, window.active.button.disabled.bg
[edit] window.inactive.button.toggled.unpressed.bg
Type: | texture |
---|---|
Default: | window.inactive.button.toggled.bg |
Parentrelative: | yes |
Specifies the default background for titlebar buttons when they are toggled - such as when a window is maximized. This element is for non-focused windows. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.inactive.title.bg, window.active.button.toggled.unpressed.bg
[edit] window.inactive.button.toggled.pressed.bg
Type: | texture |
---|---|
Default: | window.inactive.button.pressed.bg |
Parentrelative: | yes |
Specifies the default background for titlebar buttons if the user is pressing them with the mouse while they are toggled - such as when a window is maximized. This element is for non-focused windows. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.inactive.title.bg, window.active.button.toggled.pressed.bg
[edit] window.inactive.button.toggled.hover.bg
Type: | texture |
---|---|
Default: | window.inactive.button.toggled.unpressed.bg |
Parentrelative: | yes |
Specifies the default background for titlebar buttons if the user is pressing them with the mouse while they are toggled - such as when a window is maximized. This element is for non-focused windows. When it is parentrelative, then it uses the window.inactive.title.bg which is underneath it.
See also: titlebar colors, window.inactive.title.bg, window.active.button.toggled.hover.bg
[edit] window.inactive.button.toggled.bg
Type: | texture |
---|---|
Default: | window.inactive.button.pressed.bg |
Parentrelative: | yes |
This property is obsolete and only present for backwards compatibility.
[edit] Menu colors
[edit]
Type: | color |
---|---|
Default: | black |
Specifies the text color for menu headers.
[edit]
Type: | color |
---|---|
Default: | white |
Specifies the text color for normal menu entries.
[edit]
Type: | color |
---|---|
Default: | black |
Specifies the text color for disabled menu entries.
[edit]
Type: | color |
---|---|
Default: | black |
Specifies the text color for normal menu entries when they are selected.
[edit]
Type: | color |
---|---|
Default: | menu.items.disabled.text.color |
Specifies the text color for disabled menu entries when they are selected.
[edit]
Type: | color |
---|---|
Default: | menu.items.text.color |
The color of menu line separators. (As of version 3.4.7)
See also: menu.items.text.color
[edit] Menu textures
[edit]
Type: | texture |
---|---|
Default: | none |
Parentrelative: | no |
Specifies the background for menus.
See also: menu.items.active.bg
[edit]
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for the selected menu entry (whether or not it is disabled). When it is parentrelative, then it uses the menu.items.bg which is underneath it.
See also: menu.items.bg
[edit]
Type: | texture |
---|---|
Default: | none |
Parentrelative: | yes |
Specifies the background for menu headers. When it is parentrelative, then it uses the menu.items.bg which is underneath it.
See also: menu.items.bg
[edit] OSD textures
[edit] osd.bg
Type: | texture |
---|---|
Default: | window.active.title.bg |
Parentrelative: | no |
Specifies the background for on-screen-dialogs, such as the focus cycling (Alt-Tab) dialog.
[edit] osd.label.bg
Type: | texture |
---|---|
Default: | window.active.label.bg |
Parentrelative: | yes |
Specifies the background for text in on-screen-dialogs, such as the focus cycling (Alt-Tab) dialog.
[edit] osd.hilight.bg
Type: | texture |
---|---|
Default: | window.active.label.bg, if it is not parentrelative. Otherwise, window.active.title.bg |
Parentrelative: | no |
Specifies the texture for the selected desktop in the desktop cycling (pager) dialog.
[edit] osd.unhilight.bg
Type: | texture |
---|---|
Default: | window.inactive.label.bg, if it is not parentrelative. Otherwise, window.inactive.title.bg |
Parentrelative: | no |
Specifies the texture for unselected desktops in the desktop cycling (pager) dialog.
[edit] OSD colors
[edit] osd.label.text.color
Type: | color |
---|---|
Default: | black |
Specifies the text color for on-screen-dialogs, such as the focus cycling (Alt-Tab) dialog.
[edit] osd.hilight.bg.color
Type: | color |
---|---|
Default: | black |
Specifies the color for selected desktops in the desktop cycling (pager) dialog.
[edit] osd.unhilight.bg.color
Type: | color |
---|---|
Default: | black |
Specifies the color for unselected desktops in the desktop cycling (pager) dialog.
[edit] Text justification
[edit] window.label.text.justify
Type: | justification |
---|---|
Default: | Left |
Specifies how window titles are aligned in the titlebar for both the focused and non-focused windows.
[edit]
Type: | justification |
---|---|
Default: | Left |
Specifies how text is aligned in all menu headers.
[edit] Text shadows
[edit] window.active.label.text.font
Type: | text shadow string |
---|---|
Default: | no shadow |
Specifies the shadow for the focused window's title.
See also: window.inactive.label.text.font
[edit] window.inactive.label.text.font
Type: | text shadow string |
---|---|
Default: | no shadow |
Specifies the shadow for non-focused windows' titles.
See also: window.active.label.text.font
[edit]
Type: | text shadow string |
---|---|
Default: | no shadow |
Specifies the shadow for all menu entries.
[edit]
Type: | text shadow string |
---|---|
Default: | no shadow |
Specifies the shadow for all menu headers.
[edit] osd.label.text.font
Type: | text shadow string |
---|---|
Default: | no shadow |
Specifies the text shadow for on-screen-dialogs, such as the focus cycling (Alt-Tab) dialog.
[edit] Dialogs
Openbox shows dialog boxes in some situations. Two examples are:
- The exit dialog window that appears when the exit action is called.
- When closing a window for a program that is not responding.
These dialogs have buttons, such as Cancel and Exit. These buttons get their background information from window.active.button.*.bg. The buttons' text color comes from window.active.button.*.image.color.
[edit] Button images
The images used for the titlebar buttons and the submenu bullet are 1-bit xbm (X Bitmaps). These are masks where 0 = clear and 1 = colored.
The xbm image files are placed in the same directory within your theme as the themerc
file, as shown in the file structure discussion.
The xbm's which Openbox uses as its internal defaults are distributed with Openbox and installed to /usr/share/doc/openbox/xbm
.
Here are all the possible xbm files which Openbox looks for.
[edit] Maximized button
[edit] max.xbm
Default: | Internal default |
---|
Maximize button in its default, unpressed state.
[edit] max_toggled.xbm
Default: | If max.xbm is present, it uses that. If not, it has a separate internal default |
---|
Maximize button when it is in toggled state.
[edit] max_pressed.xbm
Default: | max.xbm, or its internal default |
---|
Maximized button when pressed.
[edit] max_disabled.xbm
Default: | max.xbm, or its internal default |
---|
Maximized button when disabled.
[edit] max_hover.xbm
Default: | max.xbm, or its internal default |
---|
Maximized button when mouse is over it.
[edit] max_toggled_pressed.xbm
Default: | max_toggled.xbm, or max.xbm, or its internal default |
---|
Maximized button when pressed, in toggled state.
[edit] max_toggled_hover.xbm
Default: | max_toggled.xbm, or max.xbm, or its internal default |
---|
Maximized button when mouse is over it, in toggled state.
[edit] Iconify button
[edit] iconify.xbm
Default: | Internal default |
---|
Iconify button in its default, unpressed state.
[edit] iconify_pressed.xbm
Default: | iconify.xbm, or its internal default |
---|
Iconify button when pressed.
[edit] iconify_disabled.xbm
Default: | iconify.xbm, or its internal default |
---|
Iconify button when disabled.
[edit] iconify_hover.xbm
Default: | iconify.xbm, or its internal default |
---|
Iconify button when mouse is over it.
[edit] Close button
[edit] close.xbm
Default: | Internal default |
---|
Close button in its default, unpressed state.
[edit] close_pressed.xbm
Default: | close.xbm, or its internal default |
---|
Close button when pressed.
[edit] close_disabled.xbm
Default: | close.xbm, or its internal default |
---|
Close button when disabled.
[edit] close_hover.xbm
Default: | close.xbm, or its internal default |
---|
Close button when mouse is over it.
[edit] All-desktops button
[edit] desk.xbm
Default: | Internal default |
---|
All-desktops button in its default, unpressed state.
[edit] desk_toggled.xbm
Default: | If desk.xbm is present, it uses that. If not, it has a separate internal default |
---|
All-desktops button when it is in toggled state.
[edit] desk_pressed.xbm
Default: | desk.xbm, or its internal default |
---|
All-desktops button when pressed.
[edit] desk_disabled.xbm
Default: | desk.xbm, or its internal default |
---|
All-desktops button when disabled.
[edit] desk_hover.xbm
Default: | desk.xbm, or its internal default |
---|
All-desktops button when mouse is over it.
[edit] desk_toggled_pressed.xbm
Default: | desk_toggled.xbm, or desk.xbm, or its internal default |
---|
All-desktops button when pressed, in toggled state.
[edit] desk_toggled_hover.xbm
Default: | desk_toggled.xbm, or desk.xbm, or its internal default |
---|
All-desktops button when mouse is over it, in toggled state.
[edit] Shade button
[edit] shade.xbm
Default: | Internal default |
---|
Shade button in its default, unpressed state.
[edit] shade_toggled.xbm
Default: | If shade.xbm is present, it uses that. If not, it has a separate internal default |
---|
Shade button when it is in toggled state.
[edit] shade_pressed.xbm
Default: | shade.xbm, or its internal default |
---|
Shade button when pressed.
[edit] shade_disabled.xbm
Default: | shade.xbm, or its internal default |
---|
Shade button when disabled.
[edit] shade_hover.xbm
Default: | shade.xbm, or its internal default |
---|
Shade button when mouse is over it.
[edit] shade_toggled_pressed.xbm
Default: | shade_toggled.xbm, or shade.xbm, or its internal default |
---|
Shade button when pressed, in toggled state.
[edit] shade_toggled_hover.xbm
Default: | shade_toggled.xbm, or shade.xbm, or its internal default |
---|
Shade button when mouse is over it, in toggled state.
[edit]
[edit] bullet.xbm
Default: | Internal default |
---|
The bullet shown in a menu for submenu entries.