1FLUXBOX-STYLE(5)                Fluxbox Manual                FLUXBOX-STYLE(5)
2
3
4

NAME

6       fluxbox-style - A comprehensive look at styles/themes for fluxbox(1).
7

SYNOPSIS

9       This document describes various options available for fluxbox styles.
10

DESCRIPTION

12       What is a Style?
13
14       Styles, sometimes referred to as Themes, are a graphical overlay for
15       the fluxbox(1) window manager. If you wanted to get to know fluxbox,
16       the styles would be the look of the look and feel.
17
18       Styles are simple ASCII text files that tell fluxbox(1) how to generate
19       the appearance of different components of the window manager. The
20       default installation of fluxbox(1) is shipped with many classic
21       examples that show a great deal of what one could do. To use one of the
22       standard styles navigate to the System Styles menu under your main
23       fluxbox(1) menu.
24
25       fluxbox(1) uses its own graphics class to render its images on the fly.
26       By using styles you can determine, at a great level of configurability,
27       what your desktop will look like. Since fluxbox(1) was derived from
28       blackbox many often wonder if old themes will work on the latest
29       releases of fluxbox(1). Well they basically do, but you will have to
30       tune them since the fluxbox(1) code has changed quite a bit since the
31       initial grab.
32

STRUCTURE

34       A style is made up of a few major components which then have their own
35       sub-directives. The major components are as follows:
36
37       The window.* directives control the appearance of the window frames,
38       window.tab.* controls the appearance of the window tabs, menu.*
39       controls the appearance of the popup menu that you see when you right
40       click on the desktop. toolbar.* is the bar you will see at the top or
41       bottom of your screen. Finally the slit.* has options you can use to
42       customize the appearance of the slit. However if you don’t set the slit
43       directives specifically, the slit’s appearance is controlled by the
44       toolbar directives instead.
45
46       To understand how the style mechanism works, it is nice to know a
47       little about how X11 resources work. X11 resources consist of a key and
48       a value. The key is constructed of several smaller keys (sometimes
49       referred to as children), delimited by a period (.). Keys may also
50       contain an asterisk (*) to serve as a wildcard, which means that one
51       line of text will match several keys. This is useful for styles that
52       are based on one or two colors.
53
54       A more complete reference to this can be found in X(7), section
55       RESOURCES.
56

LOCATION

58       There are many places to store your styles, the most common is in your
59       ~/.fluxbox/styles directory. The initial installation will place the
60       default styles in /usr/local/share/fluxbox/styles providing a basic
61       usable configuration.
62
63       When creating your own style, create a directory (normally the name of
64       your style) in ~/.fluxbox/styles/ (If the styles directory doesn’t
65       exist, create that also). While there isn’t an official structure, it
66       is common to create a directory named after your style and place your
67       pixmaps directory (if required) in there along with a file called
68       theme.cfg (may also be named style.cfg). This file is where you will
69       construct your style using the components covered later in this manual
70       page. An example of steps taken when beginning a style project of your
71       own may look like:
72
73           $ cd
74           $ mkdir -p ~/.fluxbox/styles/YourStyle/pixmaps
75           $ cd ~/.fluxbox/styles/YourStyle
76           $ nano theme.cfg
77
78       Output of a packaged style should look like the following:
79
80           $ cd
81           $ tar -tjvf YourStyle.tar.bz2
82            .fluxbox/styles/YourStyle/theme.cfg
83            .fluxbox/styles/YourStyle/pixmaps
84            .fluxbox/styles/YourStyle/pixmaps/stick.xpm
85            ...
86
87       Of course, all of these are just preferences, fluxbox(1) allows for the
88       customization of many things, including how you handle your styles.
89       Just remember, however, that if you plan to distribute your style you
90       may find some community bickering if you don’t follow practices. :)
91

CREATING YOUR STYLE

93       As discussed above, fluxbox(1) allows you to configure its four main
94       components: the toolbar, menus, slit and window decorations. Remember
95       that you can customize the slit with its own directives, otherwise the
96       slit will take the appearance of the toolbar.
97
98       Here are some quick examples to illustrate basic syntax:
99
100           toolbar.clock.color: green
101
102       This sets the color resource of the toolbar clock to green. Another
103       example:
104
105           menu*color:     rgb:3/4/5
106
107       This sets the color resource of the menu and all of its children to
108       ‘rgb:3/4/5’. (For a description of color names, see X(1).) So this one
109       also applies to menu.title.color and menu.frame.color. And with
110
111           *font:  -b&h-lucida-medium-r-normal-*-*-140-*
112
113       you set the font resource for all keys to this font name all at once
114       (For information about the fonts installed on your system, you can use
115       a program like xfontsel(1), gtkfontsel, or xlsfonts(1).)
116
117       In the last example you will notice the wildcard (*) before font. In a
118       Fluxbox style you can set a value with a wildcard. The example means
119       that every font in the style will be what is specified. You can do this
120       with any component/value. For example if you wanted all of the text to
121       be one color you would do:
122
123           *textColor:  rgb:3/4/5
124
125       This means that you can setup a very simple style with very few
126       properties. See the EXAMPLES below for an example of this in practice.
127       fluxbox(1) also allows you to override wildcards in your style. Lets
128       take our example above and add an override for the
129       toolbar.clock.textColor component:
130
131           *textColor: rgb:3/4/5
132           toolbar.clock.textColor: rgb:255/0/0
133
134       With that all of the text will be rgb:3/4/5 except the toolbar clock
135       text which will be rgb:255/0/0.
136
137       Now what makes fluxbox(1) so spectacular is its ability to render
138       textures on the fly. A texture is a fillpattern that you see on some
139       styles. Texture descriptions are specified directly to the key that
140       they should apply to, e.g.:
141
142           toolbar.clock:  Raised Gradient Diagonal Bevel1
143           toolbar.clock.color:    rgb:8/6/4
144           toolbar.clock.colorTo:  rgb:4/3/2
145
146       Don’t worry, we will explain what these mean. A texture description
147       consists of up to five fields, which are as follows:
148
149       Flat | Raised | Sunken. gives the component either a flat, raised or
150       sunken appearance.
151
152       Gradient | Solid. tells fluxbox(1) to draw either a solid color or a
153       gradient texture.
154
155       Horizontal | Vertical | Diagonal | Crossdiagonal | Pipecross | Elliptic
156       | Rectangle | Pyramid. Select one of these texture types. They only
157       work when Gradient is specified.
158
159       Interlaced. tells fluxbox(1) to interlace the texture (darken every
160       other line). This option is most commonly used with gradiented
161       textures, but it also works in solid textures.
162
163       Bevel1 | Bevel2. tells fluxbox(1) which type of bevel to use. Bevel1 is
164       the default bevel. The shading is placed on the edge of the image.
165       Bevel2 is an alternative. The shading is placed one pixel in from the
166       edge of the image.
167
168       Instead of a texture description, also the option ParentRelative is
169       available, which makes the component appear as a part of its parent,
170       e.g. totally transparent.
171
172       Or for even more possibilities Pixmap. If pixmap texture is specified
173       (it might not be necessary on every occasion) the pixmap file is
174       specified in a separate pixmap resource.
175
176           toolbar.clock: pixmap
177           toolbar.clock.pixmap: clock_background.xpm
178
179       This feature might need some investigation, reports say that sometimes
180       the resources color and colorTo must be set and then they may not be
181       set.
182
183       All gradiented textures are composed of two color values: the color and
184       colorTo resources. When Interlaced is used in Solid mode, the colorTo
185       resource is used to find the interlacing color.
186

FONT EFFECTS

188       In addition to specifying the font-family and the font-weight via the
189       supported font-rendering-engine (eg, Xft), fluxbox(1) supports some
190       effects: halo and shadow. To set the shadow effect:
191
192           menu.title.font: sans-8:bold
193           menu.title.effect: shadow
194           menu.title.shadow.color: green
195           menu.title.shadow.x: 3
196           menu.title.shadow.y: 3
197
198       To set the halo effect:
199
200           menu.title.font: sans-8:bold
201           menu.title.effect: halo
202           menu.title.halo.color: green
203
204   FONT PROBLEMS
205       If you have problems installing fonts or getting them to work, you
206       should read the docs page at xfree.org. Here is a link to one of these:
207       http://xfree.org/4.3.0/fonts2.html#3
208

FULL COMPONENT LIST

210       Here is the exhaustive component list for fluxbox(1) styles. Each one
211       is listed with their type of value required. Comments in a style file
212       are preceded with an exclamation point (!) which we also use here so
213       that these can be pasted into a new theme.cfg to be customized
214       appropriately. Please note that in order to keep styles consistent it
215       is often the practice of stylists to provide all of the theme-items in
216       their style file even if they are not used. This allows the user the
217       ease of changing different components.
218

WINDOW OPTIONS

220       Many, many things you can do with window design in fluxbox(1), below
221       are your options. Have fun.
222
223           -----------------------------------------
224           window.bevelWidth:              <integer>
225           window.borderColor:             <color>
226           window.borderWidth:             <integer>
227           window.button.focus:            <texture type>
228           window.button.focus.color:      <color>
229           window.button.focus.colorTo:    <color>
230           window.button.focus.picColor:   <color>
231           window.button.focus.pixmap:     <filename>
232           window.button.pressed: <texture type>
233           window.button.pressed.color:    <color>
234           window.button.pressed.colorTo:  <color>
235           window.button.pressed.pixmap:   <filename>
236           window.button.unfocus:          <texture type>
237           window.button.unfocus.color:    <color>
238           window.button.unfocus.colorTo:  <color>
239           window.button.unfocus.picColor: <color>
240           window.button.unfocus.pixmap:   <filename>
241           window.close.pixmap:            <filename>
242           window.close.pressed.pixmap:    <filename>
243           window.close.unfocus.pixmap:    <filename>
244           window.font:                    <font>
245           window.frame.focusColor:        <color>
246           window.frame.unfocusColor:      <color>
247           window.grip.focus:              <texture type>
248           window.grip.focus.color:        <color>
249           window.grip.focus.colorTo:      <color>
250           window.grip.focus.pixmap:       <filename>
251           window.grip.unfocus:            <texture type>
252           window.grip.unfocus.color:      <color>
253           window.grip.unfocus.colorTo:    <color>
254           window.grip.unfocus.pixmap:     <filename>
255           window.handle.focus:            <texture type>
256           window.handle.focus.color:      <color>
257           window.handle.focus.colorTo:    <color>
258           window.handle.focus.pixmap:     <filename>
259           window.handle.unfocus:          <texture type>
260           window.handle.unfocus.color:    <color>
261           window.handle.unfocus.colorTo:  <color>
262           window.handle.unfocus.pixmap:   <filename>
263           window.handleWidth:             <integer>
264           window.iconify.pixmap:          <filename>
265           window.iconify.pressed.pixmap:  <filename>
266           window.iconify.unfocus.pixmap:  <filename>
267           window.justify:                 <{Left|Right|Center}>
268           window.label.active:            <texture type>
269           window.label.active.textColor:  <color>
270           window.label.focus:             <texture type>
271           window.label.focus.color:       <color>
272           window.label.focus.colorTo:     <color>
273           window.label.focus.pixmap:      <filename>
274           window.label.unfocus:           <texture type>
275           window.label.unfocus.color:     <color>
276           window.label.unfocus.colorTo:   <color>
277           window.label.unfocus.pixmap:    <filename>
278           window.label.focus.textColor:   <color>
279           window.label.unfocus.textColor: <color>
280           window.maximize.pixmap:         <filename>
281           window.maximize.pressed.pixmap: <filename>
282           window.maximize.unfocus.pixmap: <filename>
283           window.roundCorners:            <{Top|Bottom}{Left|Right}>
284           window.shade.pixmap:            <filename>
285           window.shade.pressed.pixmap:    <filename>
286           window.shade.unfocus.pixmap:    <filename>
287           window.stick.pixmap:            <filename>
288           window.stick.pressed.pixmap:    <filename>
289           window.stick.unfocus.pixmap:    <filename>
290           window.stuck.pixmap:            <filename>
291           window.stuck.unfocus.pixmap:    <filename>
292           window.lhalf.pixmap:            <filename>
293           window.lhalf.unfocus.pixmap:    <filename>
294           window.rhalf.pixmap:            <filename>
295           window.rhalf.unfocus.pixmap:    <filename>
296           window.title.focus:             <texture type>
297           window.title.focus.color:       <color>
298           window.title.focus.colorTo:     <color>
299           window.title.focus.pixmap:      <filename>
300           window.title.height:            <integer>
301           window.title.unfocus:           <texture type>
302           window.title.unfocus.color:     <color>
303           window.title.unfocus.colorTo:   <color>
304           window.title.unfocus.pixmap:    <filename>
305           -----------------------------------------
306
308       Everything you need to make your menu look pretty.
309
310           -----------------------------------------
311           menu.bevelWidth:                <integer>
312           menu.borderColor:               <color>
313           menu.borderWidth:               <integer>
314           menu.bullet:                    <{empty|square|triangle|diamond}>
315           menu.bullet.position:           <{left|right}>
316           menu.frame:                     <texture type>
317           menu.frame.color:               <color>
318           menu.frame.colorTo:             <color>
319           menu.frame.disableColor:        <color>
320           menu.frame.font:                <font>
321           menu.frame.justify:             <{Left|Right|Center}>
322           menu.frame.pixmap:              <filename>
323           menu.frame.textColor:           <color>
324           menu.hilite:                    <texture type>
325           menu.hilite.color:              <color>
326           menu.hilite.colorTo:            <color>
327           menu.hilite.font:               <font>
328           menu.hilite.justify:            <{left|center|right}>
329           menu.hilite.pixmap:             <filename>
330           menu.hilite.textColor:          <color>
331           menu.itemHeight:                <integer>
332           menu.title:                     <texture type>
333           menu.title.color:               <color>
334           menu.title.colorTo:             <color>
335           menu.title.font:                <font>
336           menu.title.pixmap:              <filename>
337           menu.title.textColor:           <color>
338           menu.title.justify:             <{Left|Right|Center}>
339           menu.titleHeight:               <integer>
340           menu.roundCorners:              <{Top|Bottom}{Left|Right}>
341           menu.selected.pixmap:           <filename>
342           menu.submenu.pixmap:            <filename>
343           menu.unselected.pixmap:         <filename>
344           -----------------------------------------
345

BACKGROUND

347       Every style must specify the background option. If you don’t want your
348       style to change the user’s background, then use ‘background: none’. The
349       options ‘centered’, ‘aspect’, ‘tiled’, and ‘fullscreen’ require the
350       ‘background.pixmap’ resource to contain a valid file name. The ‘random’
351       option requires ‘background.pixmap’ to contain a valid directory name.
352       For these options, fluxbox(1) will call fbsetbg(1) to set the
353       background. The options ‘gradient’, ‘solid’, and ‘mod’ all require
354       ‘background.color’ to be set. ‘gradient’ and ‘mod’ both require
355       ‘background.colorTo’. ‘mod’ requires ‘background.modX’ and
356       ‘background.modY’ to be set as well. These options will be passed to
357       fbsetroot(1) to set the background. The special option ‘unset’ is for
358       use in user overlay files only. It specifies that fbsetbg should never
359       be run (by default, even when ‘none’ is set in the overlay, fluxbox
360       will try to run “fbsetbg -z” to restore the last wallpaper).
361
362           background: centered|aspect|tiled|fullscreen|random|solid|gradient <texture>|mod|none|unset
363           background.pixmap: <file or directory>
364           background.color: <color>
365           background.colorTo: <color>
366           background.modX: <integer>
367           background.modY: <integer>
368

SLIT

370       Here are all of the options for the slit.
371
372           -----------------------------------------
373           slit: <texture type>
374           slit.bevelWidth: <integer>
375           slit.borderColor: <color>
376           slit.borderWidth:               <integer>
377           slit.color:                     <color>
378           slit.colorTo:                   <color>
379           slit.pixmap:                    <filename>
380           -----------------------------------------
381

TOOLBAR OPTIONS

383       Below you will find all of the configuration possibilities for the
384       toolbar. The list is pretty extensive and offers you many options to
385       make your toolbar look just the way you want it.
386
387           -----------------------------------------
388           toolbar: <texture type>
389           toolbar.bevelWidth:             <integer (0-255)>
390           toolbar.borderColor:            <color>
391           toolbar.borderWidth:            <integer>
392           toolbar.button.scale:           <integer>
393           toolbar.color:                  <color>
394           toolbar.colorTo:                <color>
395           toolbar.clock:                  <texture type>
396           toolbar.clock.borderColor:      <color>
397           toolbar.clock.borderWidth:      <integer>
398           toolbar.clock.font:             <font>
399           toolbar.clock.justify:          <{Left|Right|Center}>
400           toolbar.clock.pixmap:           <filename>
401           toolbar.clock.color:            <color>
402           toolbar.clock.colorTo:          <color>
403           toolbar.clock.textColor:        <color>
404           toolbar.height:                 <integer>
405           toolbar.iconbar.focused:        <texture type>
406           toolbar.iconbar.focused.color:  <color>
407           toolbar.iconbar.focused.colorTo:<color>
408           toolbar.iconbar.focused.pixmap: <filename>
409           toolbar.iconbar.unfocused:      <texture type>
410           toolbar.iconbar.unfocused.color:  <color>
411           toolbar.iconbar.unfocused.colorTo: <color>
412           toolbar.iconbar.unfocused.pixmap: <filename>
413           toolbar.iconbar.empty:          <texture type>
414           toolbar.iconbar.empty.color:    <color>
415           toolbar.iconbar.empty.colorTo:  <color>
416           toolbar.iconbar.empty.pixmap:   <filename>
417           toolbar.iconbar.focused.borderColor: <color>
418           toolbar.iconbar.focused.borderWidth:    <integer>
419           toolbar.iconbar.unfocused.borderColor: <color>
420           toolbar.iconbar.unfocused.borderWidth:  <integer>
421           toolbar.iconbar.borderColor:    <color>
422           toolbar.iconbar.borderWidth:    <integer>
423           toolbar.iconbar.focused.font:   <font>
424           toolbar.iconbar.focused.justify:        <{Left|Right|Center}>
425           toolbar.iconbar.focused.textColor: <color>
426           toolbar.iconbar.unfocused.font: <font>
427           toolbar.iconbar.unfocused.justify:      <{Left|Right|Center}>
428           toolbar.iconbar.unfocused.textColor: <color>
429           toolbar.pixmap:                 <filename>
430           toolbar.shaped:                 <boolean>
431           toolbar.workspace.font:         <font>
432           toolbar.workspace.justify:      <{Left|Right|Center}>
433           toolbar.workspace.textColor:    <color>
434           toolbar.workspace:              <texture type>
435           toolbar.workspace.borderColor:  <color>
436           toolbar.workspace.borderWidth:  <integer>
437           toolbar.workspace.color:        <color>
438           toolbar.workspace.colorTo:      <color>
439           toolbar.workspace.pixmap:       <filename>
440           -----------------------------------------
441

EXAMPLES

443       This list may seem intimidating, but remember, when you create your own
444       style you can easily set a majority of these keys with a single
445       component. For an example of this:
446
447           -----------------------------------------
448           *color: slategrey
449           *colorTo:       darkslategrey
450           *unfocus.color: darkslategrey
451           *unfocus.colorTo:       black
452           *textColor:     white
453           *unfocus.textColor:     lightgrey
454           *font:  lucidasans-10
455           -----------------------------------------
456
457       This sets nice defaults for many components.
458

COLOR FORMATS

460       These are the color formats for styles:
461
462           #000000 (Hexadecimal)
463           rgb:<0-255>/<0-255>/<0-255>
464
465       See /usr/share/X11/rgb.txt for an explanation.
466

AUTHORS

468       Blackbox was written and maintained by Brad Hughes <blackbox at
469       alug.org> and Jeff Raven <jraven at psu.edu>.
470
471       fluxbox(1) is written and maintained by Henrik Kinnunen <fluxgen at
472       fluxbox.org> with contributions and patches merged from many
473       individuals around the world.
474
475       The Official fluxbox(1) website: http://www.fluxbox.org You can find a
476       lot of styles here: http://tenr.de/
477
478       This manpage was composed from various resources including the official
479       documentation, fluxbox(1) man page and numerous other resources by Curt
480       "Asenchi" Micol. If you notice any errors or problems with this page,
481       please contact him here: <asenchi at asenchi.com> and using the great
482       contributions of <grubert at users.sourceforge.net>. Numerous other
483       languages could be available if someone jumps in.
484

SEE ALSO

486       fluxbox(1) fbsetbg(1) fbsetroot(1)
487

AUTHOR

489       Henrik Kinnunen <fluxgen@fluxbox.org>
490           Author.
491
492
493
494fluxbox-style.txt              08 February 2015               FLUXBOX-STYLE(5)
Impressum