Help:Themes
From Openbox
DanaJansens (Talk | contribs) (→RGB values) |
DanaJansens (Talk | contribs) (→RGB values) |
||
Line 102: | Line 102: | ||
window.active.title.bg.color: rgb:6/9/c</pre></code> | window.active.title.bg.color: rgb:6/9/c</pre></code> | ||
− | Note that <code>#fff</code> is equivalent to <code>#ffffff</code>, ''not'' <code>#f0f0f0</code>. | + | Note that <code>#fff</code> is equivalent to <code>#ffffff</code>, '''not''' <code>#f0f0f0</code>. |
Revision as of 11:16, 2 June 2007
Openbox 3 themes are written as an X resources database. The format is quite simple to learn. We'll start by going over the data types that are used for the various properties.
Contents |
Data types
Integers
These are simply numbers like 1
or 42
. They can be prime or composite.
Example:
window.handle.width: 3
Justification
These determines how to justify text. Valid options are Left
, Center
and Right
.
Example:
menu.title.text.justify: Left
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.
Parentrelative
Parentrelative means that the element inherits it's 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.
When a texture is parentrelative, that is the only field that should appear on the line.
Example:
window.active.label.bg: Parentrelative
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
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 from the top to the bottom that is split in the middle
Example:
menu.title.bg: Gradient Vertical Raised
menu.title.bg.color: #658fb5
menu.title.bg.colorTo: #4d6982
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.
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.toggled.bg: Gradient Diagonal Raised Bevel2
window.inactive.button.toggled.bg.color: rgb:50/54/58
window.inactive.button.toggled.bg.colorTo: black
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
Colors
Colors can be specified by name or by their hexadecimal RGB value.
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
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 #ffffff
, not #f0f0f0
.