fluxstyle

NAME

fluxstyle - all you need to know about Fluxbox styles

DESCRIPTION

What is a Style?

A style is basically a theme for the Fluxbox(1) window manager. It is a simple ASCII text file that tells Fluxbox how to generate the appearance of the different components of the window manager. The default installation of Fluxbox is shipped with many classic styles that show the customization of current Fluxbox versions. They are usually located in ~/.fluxbox/styles and in the global Fluxbox share directory /usr/local/share/fluxbox/styles which may vary depending on the method of installation used. To use one of the styles shipped with Fluxbox, look in your root menu under the configure part of the menu for 'System Styles'.

Fluxbox uses its own graphics class to render its images on the fly. By using style files, you can determine at a great level of configurability what your desktop will look like. Fluxbox styles are compatible with those of the Blackbox window manager (where Fluxbox originated). Users migrating from Blackbox can use their current favourite themes.

STRUCTURE OF STYLES

The style is made up of a few major components which then have their own sub-directives. The toolbar, menu, slit and window are the major components. The window.* directives control the appearance of your window frames, window.tab.* controls the appearance of the window tabs. menu.* controls the appearance of the popup menu that you see when you right click on the desktop. toolbar.* is the bar you will see at the top or bottom of your screen. Finally the slit.* has options you can use to customize the appearance of the slit. However if you don't set the slit directives specifically, the slit's appearance is controlled by the toolbar.* directives instead.

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

X11 resources consist of a key and a value. The key si 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.

LOCATION OF STYLES

We'll cover quickly where styles can be found and placed after you create your own.

There are a number of default styles that come with the installation, while we have already covered this, we will again just provide a central location for all style locations. These default styles are located in /usr/local/share/fluxbox/styles providing a default configureation at installation.

Once you create your own, you can create a directory in ~/.fluxbox/ called 'styles'. While there isn't an official structure of how to package your style, one way that is recommended is creating a directory named after your style and placing your pixmaps directory in there along with a theme.cfg. The theme.cfg file being your created style. So for example if I created a style called 'MyStyle' I would create the following:

mkdir -p ~/.fluxbox/styles/MyStyle
cd ~/.fluxbox/styles/MyStyle
mkdir pixmaps
vi theme.cfg (this being where you design your style with
              the necessary components)

If you follow this, the path to your pixmaps will be: ~/fluxbox/styles/MyStyle/pixmaps which makes it a bit easier to setup up and distribute your style.

CREATING STYLES

As discussed in the STRUCTURE section of this man page, Fluxbox allows you to configure its four main components: the toolbar, the menus, the slit and the window decorations. Remember that you can customize the slit with its own directives, but if you don't, it will take the appearance of the toolbar.

Here are some quick examples to illustrate basic syntax:

toolbar.clock.color: green

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

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 X(1).) So this one also applies to menu.title.color and menu.frame.color. And with

*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(1), gtkfontsel, or xlsfonts(1).)

This last example brings up wildcards and overrides. In a Fluxbox style you can set a value with a wild card. The previous example means that every font in the style will be what is specified. You can do this with any value. For example if you wanted all of the text to be one color you could do:

*textColor:  rgb:3/4/5

This means you can setup a very simple style with very few properties. See EXAMPLES below for an example of this in practice. You can also override wildcards in the style file. Lets take our example above and add an override for the toolbar.clock.textColor:

*textColor: rgb:3/4/5
toolbar.clock.textColor: rgb:255/0/0

With that all of the text will be 'rgb:3/4/5' except the toolbar clock text which will be 'rgb:255/0/0'

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.:

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 right now! A texture description consists of up to five fields, which are as follows:

Flat / Raised / Sunken: gives the component either a flat, raised or sunken appearance.
Gradient / Solid: tells Fluxbox to draw either a solid color or a gradient texture.
Horizontal / Vertical / Diagonal / Crossdiagonal / Pipecross / Elliptic / Rectangle / Pyramid: Select one of these texture types. They only work when also Gradient is specified!
Interlaced: tells Fluxbox to interlace the texture (darken every other line). This option is most commonly used with gradiented textures, but from Fluxbox version 0.60.3 on, it also works in solid textures.
Bevel1 / Bevel2: tells Fluxbox which type 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.

Instead of a texture description, also the option ParentRelative is available, which makes the component appear as a part of its parent, e.g. totally transparent.

Or for even more possibilities Pixmap . If pixmap texture is specified (it might not be necessary on every occasion) the pixmap file is specified in a separate pixmap resource.

toolbar.clock: pixmap
toolbar.clock.pixmap: .fluxbox/styles/mine/clock_background.xpm

This feature might need some investigation, reports say that sometimes the resources color and colorTo must be set and then they may not be set.

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.

A WORD ABOUT FONTS

We should comment about fonts before we move on to the complete component list.

Fluxbox supports different options for text. These options currently include bold and shadow. To set these do this, fontname-size:options, for any of the font components in the style file. For example:

menu.title.font: sans-8:bold,shadow

If you have problems installing fonts or getting them to work, you should read the docs page at xfree.org. Here is a link to one of these: http://xfree.org/4.3.0/fonts2.html#3.

FULL COMPONENT LIST

Here is the complete component list, together with which kind of value they take. Comments are preceded with an exclamation sign (!), which is also used for comments in Fluxbox style c.q. X resource files.

WINDOW OPTIONS

Many, many things you can do with window design in Fluxbox, below are your options. Have fun.

window.label.focus: <texture type>
window.label.focus.pixmap:  <filename>
window.label.focus.color:  <color>
window.label.focus.colorTo: <color>
window.label.unfocus: <texture type>
window.label.unfocus.pixmap:  <filename>
window.label.unfocus.color:  <color>
window.label.unfocus.colorTo: <color>
window.title.focus: <texture type>
window.title.focus.pixmap:  <filename>
window.title.focus.color:  <color>
window.title.focus.colorTo: <color>
window.title.unfocus: <texture type>
window.title.unfocus.pixmap:  <filename>
window.title.unfocus.color:  <color>
window.title.unfocus.colorTo: <color>
window.handle.focus: <texture type>
window.handle.focus.pixmap:  <filename>
window.handle.focus.color:  <color>
window.handle.focus.colorTo: <color>
window.handle.unfocus: <texture type>
window.handle.unfocus.pixmap:  <filename>
window.handle.unfocus.color:  <color>
window.handle.unfocus.colorTo: <color>
window.button.focus: <texture type>
window.button.focus.pixmap:  <filename>
window.button.focus.color:  <color>
window.button.focus.colorTo: <color>
window.button.unfocus: <texture type>
window.button.unfocus.pixmap:  <filename>
window.button.unfocus.color:  <color>
window.button.unfocus.colorTo: <color>
window.button.pressed: <texture type>
window.button.pressed.pixmap:  <filename>
window.button.pressed.color:  <color>
window.button.pressed.colorTo: <color>
window.grip.focus: <texture type>
window.grip.focus.pixmap:  <filename>
window.grip.focus.color:  <color>
window.grip.focus.colorTo: <color>
window.grip.unfocus: <texture type>
window.grip.unfocus.pixmap:  <filename>
window.grip.unfocus.color:  <color>
window.grip.unfocus.colorTo: <color>
window.label.focus.textColor: <color>
window.label.unfocus.textColor: <color>
window.frame.focusColor: <color>
window.frame.unfocusColor: <color>
window.button.focus.picColor: <color>
window.button.unfocus.picColor: <color>
window.font: <font>
window.justify:
window.roundCorners:
window.alpha: <integer>
window.title.height: <integer>
window.bevelWidth: <integer>
window.handleWidth: <integer>
window.borderWidth: <integer>
window.borderColor: <color>
window.close.pixmap: <filename>
window.close.unfocus.pixmap: <filename>
window.close.pressed.pixmap: <filename>
window.maximize.pixmap: <filename>
window.maximize.unfocus.pixmap: <filename>
window.maximize.pressed.pixmap: <filename>
window.iconify.pixmap: <filename>
window.iconify.unfocus.pixmap: <filename>
window.iconify.pressed.pixmap: <filename>
window.shade.pixmap: <filename>
window.shade.unfocus.pixmap: <filename>
window.shade.pressed.pixmap: <filename>
window.stick.pixmap: <filename>
window.stick.unfocus.pixmap: <filename>
window.stick.pressed.pixmap: <filename>
window.stuck.pixmap: <filename>
window.stuck.unfocus.pixmap: <filename>

MENU OPTIONS

Everything you need to make your menu look pretty.

menu.title.textColor: <color>
menu.frame.textColor: <color>
menu.hilite.textColor: <color>
menu.frame.disableColor: <color>
menu.title: <texture type>
menu.title.pixmap:  <filename>
menu.title.color:  <color>
menu.title.colorTo: <color>
menu.frame: <texture type>
menu.frame.pixmap:  <filename>
menu.frame.color:  <color>
menu.frame.colorTo: <color>
menu.hilite: <texture type>
menu.hilite.pixmap:  <filename>
menu.hilite.color:  <color>
menu.hilite.colorTo: <color>
menu.title.font: <font>
menu.frame.font: <font>
menu.frame.justify:
menu.title.justify:
menu.bullet.position:
menu.bullet:
menu.borderWidth:
menu.bevelWidth:
menu.borderColor: <color>
menu.submenu.pixmap: <filename>
menu.selected.pixmap: <filename>
menu.unselected.pixmap: <filename>
menu.roundCorners:

ROOT COMMAND OPTION

This is how you set your background within your style. Use the official fluxbox background program, fbsetbg. It is distributed with Fluxbox, and can also be downloaded from here: http://www.xs4all.nl/~hanb/software/fluxbox/fbsetbg.html

rootCommand: <string>

SLIT

Here are all of the options for the slit.

slit: <texture type>
slit.pixmap:  <filename>
slit.color:  <color>
slit.colorTo: <color>
slit.borderWidth: <integer>
slit.bevelWidth: <integer>
slit.borderColor: <color>

TOOLBAR OPTIONS

Below you will find all of the configuration possibilities for the toolbar. The list is pretty extensive and offers you many options to make your toolbar look just the way you want it.

toolbar: <texture type>
toolbar.pixmap:  <filename>
toolbar.color:  <color>
toolbar.colorTo: <color>
toolbar.borderWidth: <integer>
toolbar.borderColor: <color>
toolbar.bevelWidth: <0-255>
toolbar.shaped: <boolean>
toolbar.alpha: <integer>
toolbar.height: <integer>
toolbar.clock.font: <font>
toolbar.clock.textColor: <color>
toolbar.clock.justify:
toolbar.clock: <texture type>
toolbar.clock.pixmap:  <filename>
toolbar.clock.color:  <color>
toolbar.clock.colorTo: <color>
toolbar.clock.borderWidth: <integer>
toolbar.clock.borderColor: <color>
toolbar.workspace.font: <font>
toolbar.workspace.textColor: <color>
toolbar.workspace.justify:
toolbar.workspace: <texture type>
toolbar.workspace.pixmap:  <filename>
toolbar.workspace.color:  <color>
toolbar.workspace.colorTo: <color>
toolbar.workspace.borderWidth: <integer>
toolbar.workspace.borderColor: <color>
toolbar.iconbar.focused: <texture type>
toolbar.iconbar.focused.pixmap:  <filename>
toolbar.iconbar.focused.color:  <color>
toolbar.iconbar.focused.colorTo: <color>
toolbar.iconbar.unfocused: <texture type>
toolbar.iconbar.unfocused.pixmap:  <filename>
toolbar.iconbar.unfocused.color:  <color>
toolbar.iconbar.unfocused.colorTo: <color>
toolbar.iconbar.empty: <texture type>
toolbar.iconbar.empty.pixmap:  <filename>
toolbar.iconbar.empty.color:  <color>
toolbar.iconbar.empty.colorTo: <color>
toolbar.iconbar.focused.borderWidth: <integer>
toolbar.iconbar.focused.borderColor: <color>
toolbar.iconbar.unfocused.borderWidth: <integer>
toolbar.iconbar.unfocused.borderColor: <color>
toolbar.iconbar.borderWidth: <integer>
toolbar.iconbar.borderColor: <color>
toolbar.iconbar.focused.font: <font>
toolbar.iconbar.focused.textColor: <color>
toolbar.iconbar.focused.justify:
toolbar.iconbar.unfocused.font: <font>
toolbar.iconbar.unfocused.textColor: <color>
toolbar.iconbar.unfocused.justify:

EXAMPLES

This may seem like a long list, but remember, when you create your own style, you can easily set lots of keys with a single command, e.g.


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

This sets already nice defaults for many components.

COLOR FORMATS

These are the color formats for styles:

#000000 (Hexadecimal)
/usr/X11R6/lib/X11/rgb.txt

AUTHOR and CREDITS

Blackbox was written and maintained by Brad Hughes <blackbox@alug.org> and Jeff Raven <jraven@psu.edu>,

Fluxbox is written and maintained by Henrik Kinnunen <fluxgen@linuxmail.org> with contributions and patches merged from many individuals around the world.

The Official Fluxbox website: http://www.fluxbox.org/

Flumod is a Fluxbox community site where you can find many new styles that work with this version of Fluxbox and take advantage of all the new features. You can find Fluxmod here: http://www.fluxmod.dk/

You can also find more styles here: http://themes.freshmeat.net/

This manpage was composed from various resources including the documentation, fluxbox man page and numerous other resources by Curt Micol <asenchi@asenchi.com> and using the great contributions of <grubert@users.sourceforge.net>. Numerous other languages could be available if someone jumps in.