path: root/doc/fluxstyle.1.in

.\" AT THE BOTTOM IS ADD ONS TO THE PAGE search /ADDITIONS
.\" Manual page for Fluxbox Styles
.\"
.\" Fluxbox is Copyright (c) 2001-2004 Henrik Kinnunen

.\" Copyright (c) 2003, 2004, Curt "Asenchi" Micol

.\" Permission to use, copy, modify, and distribute this documentation for
.\" any purpose with or without fee is hereby granted, provided that the
.\" above copyright notice and this permission notice appear in all copies.

.\" THE DOCUMENTATION IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL
.\" WARRANTIES WITH REGARD TO THIS DOCUMENTATION INCLUDING ALL IMPLIED
.\" WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE
.\" AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL
.\" DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR
.\" PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
.\" TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
.\" PERFORMANCE OF THIS DOCUMENTATION

.\" Parts of the text are taken from websites and style
.\" files on http://www.fluxbox.org and http://www.fluxmod.dk
.\"
.\" Created and Updated for version 0.9.7 by Curt Micol <asenchi@asenchi.com>

.\" Define this: <blockquote><pre>
.de EX
.ne 5
.if n .sp 1
.if t .sp .5
.nf
.in +.5i
..
.de EE
.fi
.in -.5i
.if n .sp 1
.if t .sp .5
..

.\" Begin actual page

.TH fluxstyle 1 "November 29th, 2004" "0.9.10"
.SH NAME
fluxstyle \- A comprehensive look at styles/themes for Fluxbox
.SH DESCRIPTION

.\" Taken from the documentation

.SS What is a Style?
Styles, sometimes referred to as Themes, are a graphical overlay for the
.IR Fluxbox(1)
window manager.  If you wanted to get to know Fluxbox, the styles
would be the 'look' of the 'look and feel'.
.PP
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.
.PP
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.

.SH STRUCTURE
A style is made up of a few major components which then have their own
sub-directives.  The major components are as follows:
.PP
The
.IR window.*
directives control the appearance of the window frames,
.IR window.tab.*
controls the appearance of the window tabs,
.IR menu.*
controls the appearance of the popup menu that you see when you right click on
the desktop.
.IR toolbar.*
is the bar you will see at the top or bottom of your screen. Finally the
.IR 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.
.PP
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.

.SH LOCATION
There are many places to store your styles, the most common is in your
.IR ~/.fluxbox/styles
directory.  The initial installation will place the default styles in
.IR @pkgdatadir@/styles
providing a basic usable configuration.
.PP
When creating your own style, create a directory (normally the name of your
style) in
.IR ~/.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:
.EX
$ cd
$ mkdir -p ~/.fluxbox/styles/YourStyle/pixmaps
$ cd ~/.fluxbox/styles/YourStyle
$ nano theme.cfg
.EE
Output of a packaged style should look like the following:
.EX
$ cd
$ tar -tjvf YourStyle.tar.bz2
 .fluxbox/styles/YourStyle/theme.cfg
 .fluxbox/styles/YourStyle/pixmaps
 .fluxbox/styles/YourStyle/pixmaps/stick.xpm
 ...
.EE
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. :)

.SH CREATING YOUR STYLE
As discussed above, Fluxbox allows you to configure its four main components:
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.
.PP
Here are some quick examples to illustrate basic syntax:
.EX
toolbar.clock.color: green
.EE
This sets the color resource of the toolbar clock to 'green'.  Another example:
.EX
menu*color:	rgb:3/4/5
.EE
This sets the color resource of the menu
.I and all of its 'children'
to `rgb:3/4/5'.  
(For a description of color names, see
.IR X (1).)
So this one also applies to
.IR menu.title.color " and " menu.frame.color .
And with   
.EX
*font:  -b&h-lucida-medium-r-normal-*-*-140-*
.EE
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
.IR xfontsel "(1), " gtkfontsel ", or " xlsfonts "(1).)"
.PP
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:
.EX
*textColor:  rgb:3/4/5
.EE
This means that you can setup a very simple style with very few properties.
See the
.IR 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
.IR toolbar.clock.textColor
component:
.EX
*textColor: rgb:3/4/5
toolbar.clock.textColor: rgb:255/0/0
.EE
With that all of the text will be 'rgb:3/4/5' except the toolbar clock text
which will be 'rgb:255/0/0'.
.PP
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.:
.ta \w'toolbar.clock.colorTo:\ 'u
.EX
toolbar.clock:  Raised Gradient Diagonal Bevel1
toolbar.clock.color:    rgb:8/6/4
toolbar.clock.colorTo:  rgb:4/3/2
.EE
Don't worry, we will explain what these mean. A texture description consists
of up to five fields, which are as follows:
.TP
.B Flat | Raised | Sunken
gives the component either a flat, raised or sunken appearance.
.TP
.B Gradient | Solid
tells Fluxbox to draw either a solid color or a gradient texture.
.TP
.B Horizontal | Vertical | Diagonal | Crossdiagonal | Pipecross | Elliptic | Rectangle | Pyramid
Select one of these texture types. They only work when
.B Gradient
is specified.
.TP
.B 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.
.TP
.B 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.
.PP
Instead of a texture description, also the option
.B ParentRelative
is available, which makes the component appear as a part of its parent, e.g.
totally transparent.
.PP
Or for even more possibilities
.B Pixmap .
If pixmap texture is specified (it might not be necessary on every occasion)
the pixmap file is specified in a separate pixmap resource.
.EX
toolbar.clock: pixmap
toolbar.clock.pixmap: .fluxbox/styles/mine/clock_background.xpm
.EE
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.
.PP
All gradiented textures are composed of two color values: the
.IR color " and " colorTo " resources."
When
.B Interlaced
is used in
.B Solid
mode, the
.I colorTo
resource is used to find the interlacing color.

.SH 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, halo and shadow.  To set these do this:
.IR fontname-size:options
for any of the font components in the style file.  For example:
.EX
menu.title.font: sans-8:bold,shadow
.EE
The latest versions of Fluxbox (> 0.9.8) also support different values for
these text options.  The possibilities are as follows:
.B Shadow
color=<colorname>
offsetx=<integer>
offsety=<integer>
.B Halo
color=<colorname>
For the case of completeness, here are some real world examples:
.EX
*.font: Verdana-10:bold,shadow:offsetx=2;offsety=4;color=green
*.font: Verdana-10:halo:color=blue
.EE
Of course this could all be placed on one line.  Also note that for the offset
options, negative integers are allowed.

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

.SH 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.
.PP
.\" The comments also to be translated!
.SS WINDOW OPTIONS
Many, many things you can do with window design in Fluxbox, below are your options.  Have fun.
.EX
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>
.EE
.SS MENU OPTIONS
Everything you need to make your menu look pretty.
.EX
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>
.EE
.SS ROOT COMMAND
Rarely are you going to want to use this option.  There is a command that is
similar that is used in the 
.IR 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.
.EX
rootCommand: <string>
.EE
.SS SLIT
Here are all of the options for the slit.
.EX
slit: <texture type>
slit.bevelWidth: <integer>
slit.borderColor: <color>
slit.borderWidth:               <integer>
slit.color:                     <color>
slit.colorTo:                   <color>
slit.pixmap:                    <filename>
.EE
.SS 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.
.EX
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>
.EE

.SH 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 component.  For an
example of this:
.EX
.ta \w'*unfocus.textColor:\ 'u
*color: slategrey
*colorTo:       darkslategrey
*unfocus.color: darkslategrey
*unfocus.colorTo:       black
*textColor:     white
*unfocus.textColor:     lightgrey
*font:  lucidasans-10
.EE
This sets nice defaults for many components.

.SH COLOR FORMATS
These are the color formats for styles:
.EX
#000000 (Hexadecimal)
rgb:<0-255>/<0-255>/<0-255>
.EE
See /usr/X11R6/lib/X11/rgb.txt for an explaination.

.SH AUTHOR and CREDITS
Blackbox was written and maintained by Brad Hughes
.nh \" hyphenation off
<blackbox@alug.org>
.hy \" on again
and Jeff Raven
.nh
<jraven@psu.edu>,
.hy
.PP
Fluxbox is written and maintained by Henrik Kinnunen
.nh
<fluxgen@linuxmail.org>
.hy
with contributions and patches merged from
many individuals around the world.
.PP
The Official Fluxbox website:
.nh
.B http://www.fluxbox.org/
.hy
.PP
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:
.nh
.B http://www.ikaro.dk
.hy
.PP
You can also find more styles here:
.nh
.B http://themes.freshmeat.net/
.PP
This manpage was composed from various resources including the official
documentation,
.IR 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:
.nh
<asenchi@asenchi.com>
.hy 
and using the great contributions of
.hy
<grubert@users.sourceforge.net>.
.nh
Numerous other languages could be available if someone jumps in.
.SH SEE ALSO
.IR fluxbox(1) 
.IR fbsetbg(1)
.IR bsetroot(1)

.\" ADDITIONS TO MAKE