Advanced Theme Editing

The majority of this section is taken from or heavily influenced by the man page as of Fluxbox 0.1.13. Usually, the man page is the definite authority on this matter, but this document might be more enlightening to the beginning style author.

To understand how the style mechanism works, it is nice to know a little about how X11 resources work.

X11 resources consist of a key and a value. The key is constructed of several smaller keys (sometimes referred to as children), delimited by a period (.). Keys may also contain a asterisk (*) 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.

Fluxbox allows you to configure its three main components: the toolbar, the menus and the window decorations. The slit automatically inherits its style from the toolbar but can be styled differently if need be. The little window that shows the x-y position while dragging windows, borrows its style from the window's titlebar.

Here are some quick examples to illustrate the basic syntax:

Example 10-1. Toolbar Clock style

    toolbar.clock.color:  green

This sets the color resource of the toolbar clock to green. Another example:

Example 10-2. Menu style

    menu*color: rgb:3/4/5

This sets the color resource of the menu and all of its children to rgb:3/4/5. For a description of color names, see the X11 man pages. So this one also applies to menu.title.color and menu.frame.color. And with this:

Example 10-3. Font style

    *font: -b&h-lucida-medium-r-normal-*-*-140-*

you set the font resource for all keys to this font name all at once. For information about the fonts installed on your system, you can use a program like xfontsel, gfontsel, or xlsfonts.

Now, what makes Fluxbox just so spectacular, is its ability to render textures on the fly. Texture descriptions are specified directly to the key that they should apply to, e.g.:

Example 10-4. Texture style

    toolbar.clock:   Raised Gradient Diagonal Bevel1
    toolbar.clock.color: rgb:8/6/4
    toolbar.clock.colorTo: rgb:4/3/2

Don't worry, we will explain how these directives work. A texture description consists of up to five fields, which are as follows:

Table 10-1. Texture directives

DirectiveDescription
Flat / Raised / Sunken / Tiled

give the component either a flat, raised or sunken appearance.

Tiled does only affect pixmaps and it will not scale them.

Gradient / Soliddraw either a solid color or a gradiented texture.
Horizontal / Vertical / Diagonal / Crossdiagonal / Pipecross / Elliptic / Rectangle / PyramidSelect one of these texture types. They only work when Gradient is specified, too.
Interlacedinterlace the texture (darken every other line). This option is most commonly used with gradiented textures, but from Blackbox version 0.60.3 on (and thus in all versions of Fluxbox), it also works in solid textures.
Bevel1 / Bevel2type of bevel to use. 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.

Apart from the texture description, the option ParentRelative is also available, which makes the component appear as a part of its parent.

All gradiented textures are composed of two color values: the color and colorTo resources. When Interlaced is used in Solid mode, the colorTo resource is used to find the interlacing color.

The complete list of components and which kind of value they can contain can be found in Appendix C.

Now, that seems a long list, but remember, when you create your own style, you can easily set lots of keys with a single command, e.g.

Example 10-5. Typical short style

    *color:             slategrey
    *colorTo:           darkslategrey
    *unfocus.color:     darkslategrey
    *unfocus.colorTo:   black
    *textColor:         white
    *unfocus.textColor: lightgrey
    *font:              lucidasans-10