fluxstyle(1) fluxstyle(1)
NAME
fluxstyle - A comprehensive look at styles/themes for Fluxbox
DESCRIPTION
What is a Style?
Styles, sometimes referred to as Themes, are a graphical overlay for
the Fluxbox(1) window manager. If you wanted to get to know Fluxbox,
the styles would be the ’look’ of the ’look and feel’.
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 stan‐
dard 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 ini‐
tial grab.
STRUCTURE
A style is made up of a few major components which then have their own
sub-directives. The major components are as follows:
The window.* directives control the appearance of the window frames,
window.tab.* controls the appearance of the window tabs, menu.* con‐
trols 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 lit‐
tle 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.
LOCATION
$ 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. :)
CREATING YOUR STYLE
As discussed above, Fluxbox allows you to configure its four main com‐
ponents: the toolbar, menus, slit and window decorations. Remember
that you can customize the slit with its own directives, otherwise the
slit 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).)
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:
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:
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 tex‐
ture.
Horizontal | Vertical | Diagonal | Crossdiagonal | Pipecross | Elliptic
| Rectangle | Pyramid
Select one of these texture types. They only work when Gradient
is specified.
Interlaced
tells Fluxbox to interlace the texture (darken every other
line). This option is most commonly used with gradiented tex‐
tures, 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 speci‐
fied 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
for these text options. The possibilities are as follows: Shadow
color=<colorname> offsetx=<integer> offsety=<integer> Halo color=<col‐
orname> For the case of completeness, here are some real world exam‐
ples:
*.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.
FONT PROBLEMS
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 exhaustive component list for Fluxbox styles. Each one is
listed with their type of value required. Comments in a style file are
preceded with an exclamation point (!) which we also use here so that
these can be pasted into a new theme.cfg to be customized appropiately.
Please note that in order to keep styles consistent it is often the
practice of stylists to provide all of the theme-items in their style
file even if they are not used. This allows the user the ease of
changing different components.
WINDOW OPTIONS
Many, many things you can do with window design in Fluxbox, below are
your options. Have fun.
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.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 OPTIONS
Everything you need to make your menu look pretty.
menu.bevelWidth: <integer>
menu.borderColor: <color>
menu.borderWidth: <integer>
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>
ROOT COMMAND
Rarely are you going to want to use this option. There is a command
that is similar that is used in the init file. It is bad style to use
this in your style as it forces the user to use your background. So
note that it is good practice to leave this blank or out of the style
altogether.
rootCommand: <string>
SLIT
Here are all of the options for the slit.
slit: <texture type>
slit.bevelWidth: <integer>
slit.borderColor: <color>
slit.borderWidth: <integer>
slit.color: <color>
slit.colorTo: <color>
slit.pixmap: <filename>
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.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.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>
EXAMPLES
This list may seem intimidating, but remember, when you create your own
style you can easily set a majority of these keys with a single compo‐
nent. For an example of this:
*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.
COLOR FORMATS
These are the color formats for styles:
#000000 (Hexadecimal)
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 con‐
tributions of <grubert@users.sourceforge.net>. Numerous other
languages could be available if someone jumps in.
SEE ALSO
fluxbox(1) fbsetbg(1) fbsetroot(1)
0.9.10 November 29th, 2004 fluxstyle(1)
TechZilla.biz | TechZilla.info | SlicerUnderground | techzilla.50megs.com | Tohigherground | NextOnStage | EMUslax | GNUlinx | GamesOfDaPast | WorldCrimeWars | Fistula | Asus-Z81k | Riding-Gear | UniformDiscount | WorkWearIt | NuZilla