Styles are simple ASCII text files that tell Fluxbox how to generate the appearance of different components of the window manager. The default installation of Fluxbox is shipped with many classic examples that show a great deal of what one could do. To use one of the standard styles navigate to the 'System Styles' menu under your main Fluxbox menu.
Fluxbox uses it's own graphics class to render its images on the fly. By using styles you can determine, at a great level, of configurability what your desktop will look like. Since Fluxbox was derived from Blackbox many often wonder if old themes will work on the latest releases of Blackbox. Well they basically do, but you will have to tune them since the Fluxbox code has changed quite a bit since the initial grab.
The window.* directives control the appearance of the 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 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 an asterisk (*) to serve as a wildcard, which means that one line of text will match several keys. This is useful for styles that are based on one or two colors.
When creating your own style, create a directory (normally the name of your style) in ~/.fluxbox/styles/ (If the 'styles' directory doesn't exist, create that also). While there isn't an official structure, it is common to create a directory named after your style and place your pixmaps directory (if required) in there along with a file called theme.cfg (may also be named style.cfg). This file is where you will construct your style using the components covered later in this manual page. An example of steps taken when beginning a style project of your own may look like:
$ cd $ mkdir -p ~/.fluxbox/styles/YourStyle/pixmaps $ cd ~/.fluxbox/styles/YourStyle $ nano theme.cfg
Output of a packaged style should look like the following:
$ cd $ tar -tjvf YourStyle.tar.bz2 .fluxbox/styles/YourStyle/theme.cfg .fluxbox/styles/YourStyle/pixmaps .fluxbox/styles/YourStyle/pixmaps/stick.xpm ...
Of course, all of these are just preferences, Fluxbox allows for the customization of many things, including how you handle your styles. Just remember, however, that if you plan to distribute your style you may find some community bickering if you don't follow practices. :)
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).)
In the last example you will notice the wildcard (*) before font. In a Fluxbox style you can set a value with a wild card. The example means that every font in the style will be what is specified. You can do this with any component/value. For example if you wanted all of the text to be one color you would do:
*textColor: rgb:3/4/5
This means that you can setup a very simple style with very few properties. See the EXAMPLES below for an example of this in practice. Fluxbox also allows you to override wildcards in your style. Lets take our example above and add an override for the toolbar.clock.textColor component:
*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 so spectacular is its ability to render textures on the fly. A texture is a fillpattern that you see on some styles. 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 what these mean. A texture description consists of up to five fields, which are as follows:
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.
menu.title.font: sans-8:bold,shadow
The latest versions of Fluxbox (> 0.9.8) also support different values for these text options. The possibilities are as follows: Shadow color=<colorname> offsetx=<integer> offsety=<integer> Halo color=<colorname> For the case of completeness, here are some real world examples:
*.font: Verdana-10:bold,shadow:offsetx=2;offsety=4;color=green *.font: Verdana-10:halo:color=blue
Of course this could all be placed on one line. Also note that for the offset options, negative integers are allowed.
window.bevelWidth: <integer>
window.borderColor: <color>
window.borderWidth: <integer>
window.button.focus: <texture type>
window.button.focus.color: <color>
window.button.focus.colorTo: <color>
window.button.focus.picColor: <color>
window.button.focus.pixmap: <filename>
window.button.pressed: <texture type>
window.button.pressed.color: <color>
window.button.pressed.colorTo: <color>
window.button.pressed.pixmap: <filename>
window.button.unfocus: <texture type>
window.button.unfocus.color: <color>
window.button.unfocus.colorTo: <color>
window.button.unfocus.picColor: <color>
window.button.unfocus.pixmap: <filename>
window.close.pixmap: <filename>
window.close.pressed.pixmap: <filename>
window.close.unfocus.pixmap: <filename>
window.font: <font>
window.frame.focusColor: <color>
window.frame.unfocusColor: <color>
window.grip.focus: <texture type>
window.grip.focus.color: <color>
window.grip.focus.colorTo: <color>
window.grip.focus.pixmap: <filename>
window.grip.unfocus: <texture type>
window.grip.unfocus.color: <color>
window.grip.unfocus.colorTo: <color>
window.grip.unfocus.pixmap: <filename>
window.handle.focus: <texture type>
window.handle.focus.color: <color>
window.handle.focus.colorTo: <color>
window.handle.focus.pixmap: <filename>
window.handle.unfocus: <texture type>
window.handle.unfocus.color: <color>
window.handle.unfocus.colorTo: <color>
window.handle.unfocus.pixmap: <filename>
window.handleWidth: <integer>
window.iconify.pixmap: <filename>
window.iconify.pressed.pixmap: <filename>
window.iconify.unfocus.pixmap: <filename>
window.justify: <{Left|Right|Center}>
window.label.active: <texture type>
window.label.active.textColor: <color>
window.label.focus: <texture type>
window.label.focus.color: <color>
window.label.focus.colorTo: <color>
window.label.focus.pixmap: <filename>
window.label.unfocus: <texture type>
window.label.unfocus.color: <color>
window.label.unfocus.colorTo: <color>
window.label.unfocus.pixmap: <filename>
window.label.focus.textColor: <color>
window.label.unfocus.textColor: <color>
window.maximize.pixmap: <filename>
window.maximize.pressed.pixmap: <filename>
window.maximize.unfocus.pixmap: <filename>
window.roundCorners: <{Top|Bottom}{Left|Right}>
window.shade.pixmap: <filename>
window.shade.pressed.pixmap: <filename>
window.shade.unfocus.pixmap: <filename>
window.stick.pixmap: <filename>
window.stick.pressed.pixmap: <filename>
window.stick.unfocus.pixmap: <filename>
window.stuck.pixmap: <filename>
window.stuck.unfocus.pixmap: <filename>
window.title.focus: <texture type>
window.title.focus.color: <color>
window.title.focus.colorTo: <color>
window.title.focus.pixmap: <filename>
window.title.height: <integer>
window.title.unfocus: <texture type>
window.title.unfocus.color: <color>
window.title.unfocus.colorTo: <color>
window.title.unfocus.pixmap: <filename>
menu.bevelWidth: <integer>
menu.borderColor: <color>
menu.borderWidth: <integer>
menu.bullet:
menu.bullet.position:
menu.frame: <texture type>
menu.frame.color: <color>
menu.frame.colorTo: <color>
menu.frame.disableColor: <color>
menu.frame.font: <font>
menu.frame.justify: <{Left|Right|Center}>
menu.frame.pixmap: <filename>
menu.frame.textColor: <color>
menu.hilite: <texture type>
menu.hilite.color: <color>
menu.hilite.colorTo: <color>
menu.hilite.pixmap: <filename>
menu.hilite.textColor: <color>
menu.itemHeight: <integer>
menu.title: <texture type>
menu.title.color: <color>
menu.title.colorTo: <color>
menu.title.font: <font>
menu.title.pixmap: <filename>
menu.title.textColor: <color>
menu.title.justify: <{Left|Right|Center}>
menu.titleHeight: <integer>
menu.roundCorners: <{Top|Bottom}{Left|Right}>
menu.selected.pixmap: <filename>
menu.submenu.pixmap: <filename>
menu.unselected.pixmap: <filename>
rootCommand: <string>
slit: <texture type> slit.bevelWidth: <integer> slit.borderColor: <color> slit.borderWidth: <integer> slit.color: <color> slit.colorTo: <color> slit.pixmap: <filename>
toolbar: <texture type>
toolbar.bevelWidth: <integer (0-255)>
toolbar.borderColor: <color>
toolbar.borderWidth: <integer>
toolbar.button.scale: <integer>
toolbar.color: <color>
toolbar.colorTo: <color>
toolbar.clock: <texture type>
toolbar.clock.borderColor: <color>
toolbar.clock.borderWidth: <integer>
toolbar.clock.font: <font>
toolbar.clock.justify: <{Left|Right|Center}>
toolbar.clock.pixmap: <filename>
toolbar.clock.color: <color>
toolbar.clock.colorTo: <color>
toolbar.clock.textColor: <color>
toolbar.height: <integer>
toolbar.iconbar.focused: <texture type>
toolbar.iconbar.focused.color: <color>
toolbar.iconbar.focused.colorTo:<color>
toolbar.iconbar.focused.pixmap: <filename>
toolbar.iconbar.unfocused: <texture type>
toolbar.iconbar.unfocused.color: <color>
toolbar.iconbar.unfocused.colorTo: <color>
toolbar.iconbar.unfocused.pixmap: <filename>
toolbar.iconbar.empty: <texture type>
toolbar.iconbar.empty.color: <color>
toolbar.iconbar.empty.colorTo: <color>
toolbar.iconbar.empty.pixmap: <filename>
toolbar.iconbar.focused.borderColor: <color>
toolbar.iconbar.focused.borderWidth: <integer>
toolbar.iconbar.unfocused.borderColor: <color>
toolbar.iconbar.unfocused.borderWidth: <integer>
toolbar.iconbar.borderColor: <color>
toolbar.iconbar.borderWidth: <integer>
toolbar.iconbar.focused.font: <font>
toolbar.iconbar.focused.justify: <{Left|Right|Center}>
toolbar.iconbar.focused.textColor: <color>
toolbar.iconbar.unfocused.font: <font>
toolbar.iconbar.unfocused.justify: <{Left|Right|Center}>
toolbar.iconbar.unfocused.textColor: <color>
toolbar.pixmap: <filename>
toolbar.shaped: <boolean>
toolbar.workspace.font: <font>
toolbar.workspace.justify: <{Left|Right|Center}>
toolbar.workspace.textColor: <color>
toolbar.workspace: <texture type>
toolbar.workspace.borderColor: <color>
toolbar.workspace.borderWidth: <integer>
toolbar.workspace.color: <color>
toolbar.workspace.colorTo: <color>
toolbar.workspace.pixmap: <filename>
*color: slategrey *colorTo: darkslategrey *unfocus.color: darkslategrey *unfocus.colorTo: black *textColor: white *unfocus.textColor: lightgrey *font: lucidasans-10
This sets nice defaults for many components.
#000000 (Hexadecimal) rgb:<0-255>/<0-255>/<0-255>
See /usr/X11R6/lib/X11/rgb.txt for an explaination.
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/
Fluxmod was a Fluxbox community site where you could find many new styles that work with this version of Fluxbox and take advantage of all the new features. However, fluxmod is no more, but it's maintainer still dabbles in style creation. You can find his site here: http://www.ikaro.dk
You can also find more styles here: http://themes.freshmeat.net/
This manpage was composed from various resources including the official documentation, fluxbox(1) man page and numerous other resources by Curt "Asenchi" Micol. If you notice any errors or problems with this page, please contact him here: <asenchi@asenchi.com> and using the great contributions of <grubert@users.sourceforge.net>. Numerous other languages could be available if someone jumps in.