326 lines
13 KiB
Text
326 lines
13 KiB
Text
Creating a new style (aka "theme"):
|
|
-----------------------------------
|
|
After getting Openbox up and running, the next thing you want to do is change
|
|
the colors/fonts/etc. on the screen. Openbox uses a "style" to read its
|
|
configuration information. A style in Openbox consists of X resources placed
|
|
in a file. Just like the menu file (see README.menu), the style file can be
|
|
put anywhere on the filesystem; as long as you have read access to the file,
|
|
Openbox can use it.
|
|
|
|
First, we need to decide where to put our style file, and what to name it.
|
|
I recommend using the naming scheme described on http://bb.classic.themes.org/
|
|
when creating styles.
|
|
|
|
Let's get started. Let's put our new style into a file named `results.'
|
|
Following the themes.org naming scheme, this file will go into
|
|
.openbox/styles. Same as with the menu file, we use our favorite text editor
|
|
to create the new style.
|
|
|
|
X resources consist of a key and a value. The key is constructed of several
|
|
smaller keys, delimited by a period (`.'). Keys may also contain a star (`*')
|
|
to serve as a wildcard, which means that one line of typed text will match
|
|
several keys. This is useful for styles that are based on one or two colors.
|
|
|
|
Openbox allows you to configure it's three main components: the toolbar, the
|
|
menus and the window decorations. Lets begin by creating a style for our
|
|
toolbar.
|
|
|
|
First we need to define a "texture" for the toolbar and it's components.
|
|
Textures tell Openbox how to mold or shape the colors we supply.
|
|
|
|
A texture is comprised of the following elements:
|
|
|
|
Raised / Sunken / Flat give the component a raised, sunken
|
|
or flat appearance (respectively)
|
|
|
|
Solid / Gradient tell Openbox whether to draw a solid
|
|
or gradiented texture
|
|
|
|
Interlaced tells Openbox to interlace a
|
|
gradient (and gradient ONLY) texture
|
|
|
|
Bevel1 / Bevel2 tells Openbox which type of bevel
|
|
to use.
|
|
|
|
NOTE on Bevel1 / Bevel2:
|
|
|
|
Bevel1 is the default bevel. The shading is placed on the edge of the image.
|
|
Bevel2 is an alternative. The shading is placed one pixel in from the edge
|
|
of the image.
|
|
|
|
Now that we understand that, let's define the textures for the toolbar. The
|
|
toolbar has a main frame, buttons, two labels and a clock label. The buttons
|
|
have 2 states, so we provide textures for both the normal and the pressed
|
|
state.
|
|
|
|
...
|
|
toolbar: Raised Diagonal Gradient Bevel1
|
|
toolbar.button: Raised Diagonal Gradient Bevel1
|
|
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
|
|
toolbar.clock: Flat Interlaced Gradient
|
|
toolbar.label: Flat Interlaced Gradient
|
|
...
|
|
|
|
NOTE: the texture strings don't have to be capitalized like they did in
|
|
previous versions. They are still placed in capitals here, because things like
|
|
the bbtools still use the old method.
|
|
|
|
Next we define colors for the textures. Colors can be any valid X colorname
|
|
(from the RGB database) or it can be a color specifier, as described by
|
|
'man 1 X.'
|
|
|
|
Let's see how our file looks after adding colors:
|
|
|
|
...
|
|
toolbar: Raised Diagonal Gradient Bevel1
|
|
toolbar.button: Raised Diagonal Gradient Bevel1
|
|
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
|
|
toolbar.clock: Flat Interlaced Gradient
|
|
toolbar.label: Flat Interlaced Gradient
|
|
|
|
toolbar.color: rgb:8/8/7
|
|
toolbar.colorTo: grey20
|
|
toolbar.button.color: grey
|
|
toolbar.button.colorTo: grey20
|
|
toolbar.button.pressed.color: rgb:4/4/38
|
|
toolbar.button.pressed.colorTo: rgb:f/f/d
|
|
toolbar.clock.color: grey20
|
|
toolbar.clock.colorTo: rgb:8/8/7
|
|
toolbar.label.color: grey20
|
|
toolbar.label.colorTo: rgb:8/8/7
|
|
toolbar.textColor: grey85
|
|
...
|
|
|
|
As you have noticed, all textures have a color and a colorTo key. These keys
|
|
are required for gradient images. For solids, only color is needed. You will
|
|
also notice that we have supplied the color for the text on the toolbar. Not
|
|
all textures have a text color, just certain base textures.
|
|
|
|
Next, let's move onto the menus. Since Openbox was written in C++, all of
|
|
the menus used in it are subclasses of one generic base class. Openbox reads
|
|
the style for the configuration for that base class, which applies to all
|
|
the menus used in Openbox.
|
|
|
|
The menu has two main parts, the title and the frame. There is nothing
|
|
visible under them, so we only configure these two components. The menu frame
|
|
and menu title BOTH have a configurable text color, and the menu frame has a
|
|
highlight color and the corresponding highlighted text color key. Let's assign
|
|
some textures and colors to our menu, and see what our style file looks like
|
|
so far:
|
|
|
|
...
|
|
toolbar: Raised Diagonal Gradient Bevel1
|
|
toolbar.button: Raised Diagonal Gradient Bevel1
|
|
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
|
|
toolbar.clock: Flat Interlaced Gradient
|
|
toolbar.label: Flat Interlaced Gradient
|
|
|
|
toolbar.color: rgb:8/8/7
|
|
toolbar.colorTo: grey20
|
|
toolbar.button.color: grey
|
|
toolbar.button.colorTo: grey20
|
|
toolbar.button.pressed.color: rgb:4/4/38
|
|
toolbar.button.pressed.colorTo: rgb:f/f/d
|
|
toolbar.clock.color: grey20
|
|
toolbar.clock.colorTo: rgb:8/8/7
|
|
toolbar.label.color: grey20
|
|
toolbar.label.colorTo: rgb:8/8/7
|
|
toolbar.textColor: grey85
|
|
|
|
menu.title: Raised Diagonal Interlaced Gradient Bevel1
|
|
menu.frame: Raised Diagonal Gradient Bevel1
|
|
|
|
menu.title.color: grey20
|
|
menu.title.colorTo: rgb:8/8/7
|
|
menu.title.textColor: grey85
|
|
menu.frame.color: rgb:8/8/7
|
|
menu.frame.colorTo: grey10
|
|
menu.frame.textColor: white
|
|
menu.frame.highlightColor: grey85
|
|
menu.frame.hiTextColor: grey20
|
|
...
|
|
|
|
Next, we need to configure our windows. Windows are like buttons, they have
|
|
two states, focused and unfocused. There for we define a separate texture
|
|
for unfocused windows and focused windows. The buttons on the titlebar
|
|
are focus dependant also, so we need to configure them as well. The buttons
|
|
only have one "pressed" state, so we only have to define that once, instead of
|
|
having a focus.pressed state and an unfocus.pressed state. The window frame
|
|
is the thin border around the client window. Let's be sure to catch it as well.
|
|
|
|
After adding the window config, our style now looks like this:
|
|
|
|
...
|
|
|
|
toolbar: Raised Diagonal Gradient Bevel1
|
|
toolbar.button: Raised Diagonal Gradient Bevel1
|
|
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
|
|
toolbar.clock: Flat Interlaced Gradient
|
|
toolbar.label: Flat Interlaced Gradient
|
|
|
|
toolbar.color: rgb:8/8/7
|
|
toolbar.colorTo: grey20
|
|
toolbar.button.color: grey
|
|
toolbar.button.colorTo: grey20
|
|
toolbar.button.pressed.color: rgb:4/4/38
|
|
toolbar.button.pressed.colorTo: rgb:f/f/d
|
|
toolbar.clock.color: grey20
|
|
toolbar.clock.colorTo: rgb:8/8/7
|
|
toolbar.label.color: grey20
|
|
toolbar.label.colorTo: rgb:8/8/7
|
|
toolbar.textColor: grey85
|
|
|
|
menu.title: Raised Diagonal Interlaced Gradient Bevel1
|
|
menu.frame: Raised Diagonal Gradient Bevel1
|
|
|
|
menu.title.color: grey20
|
|
menu.title.colorTo: rgb:8/8/7
|
|
menu.title.textColor: grey85
|
|
menu.frame.color: rgb:8/8/7
|
|
menu.frame.colorTo: grey10
|
|
menu.frame.textColor: white
|
|
menu.frame.highlightColor: grey85
|
|
menu.frame.hiTextColor: grey20
|
|
|
|
window.focus: Raised Diagonal Interlaced Gradient Bevel1
|
|
window.focus.button: Raised Diagonal Gradient Bevel1
|
|
window.unfocus: Raised Diagonal Gradient Bevel1
|
|
window.unfocus.button: Sunken Diagonal Gradient Bevel1
|
|
window.button.pressed: Flat Diagonal Interlaced Gradient
|
|
window.frame: Raised Solid Bevel1
|
|
|
|
window.focus.color: grey
|
|
window.focus.colorTo: grey20
|
|
window.focus.textColor: grey85
|
|
window.focus.button.color: grey
|
|
window.focus.button.colorTo: grey20
|
|
window.unfocus.color: rgb:8/8/7
|
|
window.unfocus.colorTo: grey20
|
|
window.unfocus.textColor: grey
|
|
window.unfocus.button.color: grey20
|
|
window.unfocus.button.colorTo: grey
|
|
window.button.pressed.color: rgb:4/4/38
|
|
window.button.pressed.colorTo: rgb:f/f/d
|
|
window.frame.color: grey85
|
|
...
|
|
|
|
Now all we have to do is finish off the style with a few miscellanous options.
|
|
These include the title and menu fonts/justification, border color, bevel and
|
|
handle widths, window move style and the root command.
|
|
|
|
Fonts must be a valid X11 font screen, or a valid font alias. Use a utility
|
|
like `xfontsel' (and others) to preview fonts. Also use the utility
|
|
`xlsfonts' to spit out all the current X font names and aliases stored in
|
|
the X server.
|
|
|
|
Justification can be one of three things: LeftJustify, CenterJustify or
|
|
RightJustify.
|
|
|
|
The border color is the color applied to the 1 pixel border around the menu
|
|
frame/title and the window titlebar/buttons/handle/etc. Setting this color
|
|
can have drastic effects on your style, so don't just leave it set to `black'
|
|
all the time. ;)
|
|
|
|
The bevel and handle widths control the size and spacing of decorations in
|
|
Openbox. The larger the number, the more space Openbox takes up.
|
|
|
|
The window move style tells Openbox how to move windows when you drag them
|
|
with your mouse. There are two options for it: Opaque or Wire.
|
|
|
|
The root command is the command run every time the style is loaded (either at
|
|
startup or after a reconfigure/style-change). It is used to run a program
|
|
like xv, Esetroot, wmsetbg, etc. to set an image/color/pattern on the root
|
|
window. Just supply a command and it will be run.
|
|
|
|
Also, as a note, an X resource file can have comments. Precede the line with
|
|
and exclamation mark `!' and the rest of the line will be ignored.
|
|
|
|
Let's finish off the details and take a look at our finished style:
|
|
|
|
...
|
|
! Results - theme for Openbox
|
|
! by Brad Hughes bhughes@tcac.net
|
|
|
|
toolbar: Raised Diagonal Gradient Bevel1
|
|
toolbar.button: Raised Diagonal Gradient Bevel1
|
|
toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
|
|
toolbar.clock: Flat Interlaced Gradient
|
|
toolbar.label: Flat Interlaced Gradient
|
|
|
|
! toolbar colors
|
|
toolbar.color: rgb:8/8/7
|
|
toolbar.colorTo: grey20
|
|
toolbar.button.color: grey
|
|
toolbar.button.colorTo: grey20
|
|
toolbar.button.pressed.color: rgb:4/4/38
|
|
toolbar.button.pressed.colorTo: rgb:f/f/d
|
|
toolbar.clock.color: grey20
|
|
toolbar.clock.colorTo: rgb:8/8/7
|
|
toolbar.label.color: grey20
|
|
toolbar.label.colorTo: rgb:8/8/7
|
|
toolbar.textColor: grey85
|
|
|
|
! menu textures
|
|
menu.title: Raised Diagonal Interlaced Gradient Bevel1
|
|
menu.frame: Raised Diagonal Gradient Bevel1
|
|
|
|
! menu colors
|
|
menu.title.color: grey20
|
|
menu.title.colorTo: rgb:8/8/7
|
|
menu.title.textColor: grey85
|
|
menu.frame.color: rgb:8/8/7
|
|
menu.frame.colorTo: grey10
|
|
menu.frame.textColor: white
|
|
menu.frame.highlightColor: grey85
|
|
menu.frame.hiTextColor: grey20
|
|
|
|
! window textures
|
|
window.focus: Raised Diagonal Interlaced Gradient Bevel1
|
|
window.focus.button: Raised Diagonal Gradient Bevel1
|
|
window.unfocus: Raised Diagonal Gradient Bevel1
|
|
window.unfocus.button: Sunken Diagonal Gradient Bevel1
|
|
window.button.pressed: Flat Diagonal Interlaced Gradient
|
|
window.frame: Raised Solid Bevel1
|
|
|
|
! window colors
|
|
window.focus.color: grey
|
|
window.focus.colorTo: grey20
|
|
window.focus.textColor: grey85
|
|
window.focus.button.color: grey
|
|
window.focus.button.colorTo: grey20
|
|
window.unfocus.color: rgb:8/8/7
|
|
window.unfocus.colorTo: grey20
|
|
window.unfocus.textColor: grey
|
|
window.unfocus.button.color: grey20
|
|
window.unfocus.button.colorTo: grey
|
|
window.button.pressed.color: rgb:4/4/38
|
|
window.button.pressed.colorTo: rgb:f/f/d
|
|
window.frame.color: grey85
|
|
|
|
! misc...
|
|
borderColor: rgb:2/2/1c
|
|
|
|
moveStyle: Opaque
|
|
|
|
menuJustify: CenterJustify
|
|
titleJustify: CenterJustify
|
|
|
|
bevelWidth: 2
|
|
handleWidth: 4
|
|
|
|
menuFont: lucidasans-10
|
|
titleFont: lucidasans-bold-10
|
|
|
|
rootCommand: bsetroot -mod 4 4 -fg rgb:6/6/5c -bg grey20
|
|
...
|
|
|
|
Alright! Our style is finished. Let's see how the sucker looks. First we
|
|
need to tell Openbox to use the new style. The way to do that is to edit
|
|
your menu (refer to README.menu for this) and add:
|
|
|
|
[style] (Results) {~/.openbox/styles/results}
|
|
|
|
somewhere in our menu. Taking advantage of Openbox' automagic menu updates,
|
|
all we have to do is close and reopen the root menu and our new style entry
|
|
will be visible. Select it and Openbox will apply the new style we just
|
|
created.
|