1FLUXSTYLE(1) FLUXSTYLE(1)
2
6 fluxstyle - A comprehensive look at styles/themes for fluxbox(1).
7
9 This document describes various options available for fluxbox styles.
10
13 What is a Style?
14 Styles, sometimes referred to as Themes, are a graphical overlay for
16 the fluxbox(1) window manager. If you wanted to get to know fluxbox,
17 the styles would be the look of the look and feel.
18 Styles are simple ASCII text files that tell fluxbox(1) how to generate
20 the appearance of different components of the window manager. The
21 default installation of fluxbox(1) is shipped with many classic
22 examples that show a great deal of what one could do. To use one of the
23 standard styles navigate to the System Styles menu under your main
24 fluxbox(1) menu.
25 fluxbox(1) uses its own graphics class to render its images on the fly.
27 By using styles you can determine, at a great level of configurability,
28 what your desktop will look like. Since fluxbox(1) was derived from
29 blackbox many often wonder if old themes will work on the latest
30 releases of fluxbox(1). Well they basically do, but you will have to
31 tune them since the fluxbox(1) code has changed quite a bit since the
32 initial grab.
33
36 A style is made up of a few major components which then have their own
37 sub-directives. The major components are as follows:
38 The window.* directives control the appearance of the window frames,
40 window.tab.* controls the appearance of the window tabs, menu.*
41 controls the appearance of the popup menu that you see when you right
42 click on the desktop. toolbar.* is the bar you will see at the top or
43 bottom of your screen. Finally the slit.* has options you can use to
44 customize the appearance of the slit. However if you don't set the slit
45 directives specifically, the slit's appearance is controlled by the
46 toolbar directives instead.
47 To understand how the style mechanism works, it is nice to know a
49 little about how X11 resources work. X11 resources consist of a key and
50 a value. The key is constructed of several smaller keys (sometimes
51 referred to as children), delimited by a period (.). Keys may also
52 contain an asterisk (*) to serve as a wildcard, which means that one
53 line of text will match several keys. This is useful for styles that
54 are based on one or two colors.
55 A more complete reference to this can be found in X(7), section
57 RESOURCES.
58
61 There are many places to store your styles, the most common is in your
62 ~/.fluxbox/styles directory. The initial installation will place the
63 default styles in @pkg_datadir@/styles providing a basic usable
64 configuration.
65 When creating your own style, create a directory (normally the name of
67 your style) in ~/.fluxbox/styles/ (If the styles directory doesn't
68 exist, create that also). While there isn't an official structure, it
69 is common to create a directory named after your style and place your
70 pixmaps directory (if required) in there along with a file called
71 theme.cfg (may also be named style.cfg). This file is where you will
72 construct your style using the components covered later in this manual
73 page. An example of steps taken when beginning a style project of your
74 own may look like:
75 $ cd
78 $ mkdir -p ~/.fluxbox/styles/YourStyle/pixmaps
79 $ cd ~/.fluxbox/styles/YourStyle
80 $ nano theme.cfg
81 Output of a packaged style should look like the following:
82 $ cd
85 $ tar -tjvf YourStyle.tar.bz2
86 .fluxbox/styles/YourStyle/theme.cfg
87 .fluxbox/styles/YourStyle/pixmaps
88 .fluxbox/styles/YourStyle/pixmaps/stick.xpm
89 ...
90 Of course, all of these are just preferences, fluxbox(1) allows for the
91 customization of many things, including how you handle your styles.
92 Just remember, however, that if you plan to distribute your style you
93 may find some community bickering if you don't follow practices. :)
94
97 As discussed above, fluxbox(1) allows you to configure its four main
98 components: the toolbar, menus, slit and window decorations. Remember
99 that you can customize the slit with its own directives, otherwise the
100 slit will take the appearance of the toolbar.
101 Here are some quick examples to illustrate basic syntax:
103 toolbar.clock.color: green
106 This sets the color resource of the toolbar clock to green. Another
107 example:
108 menu*color: rgb:3/4/5
111 This sets the color resource of the menu and all of its children to
112 `rgb:3/4/5'. (For a description of color names, see X(1).) So this one
113 also applies to menu.title.color and menu.frame.color. And with
114 *font: -b&h-lucida-medium-r-normal-*-*-140-*
117 you set the font resource for all keys to this font name all at once
118 (For information about the fonts installed on your system, you can use
119 a program like xfontsel(1), gtkfontsel, or xlsfonts(1).)
120 In the last example you will notice the wildcard (*) before font. In a
122 Fluxbox style you can set a value with a wildcard. The example means
123 that every font in the style will be what is specified. You can do this
124 with any component/value. For example if you wanted all of the text to
125 be one color you would do:
126 *textColor: rgb:3/4/5
129 This means that you can setup a very simple style with very few
130 properties. See the EXAMPLES below for an example of this in practice.
131 fluxbox(1) also allows you to override wildcards in your style. Lets
132 take our example above and add an override for the
133 toolbar.clock.textColor component:
134 *textColor: rgb:3/4/5
137 toolbar.clock.textColor: rgb:255/0/0
138 With that all of the text will be rgb:3/4/5 except the toolbar clock
139 text which will be rgb:255/0/0.
140 Now what makes fluxbox(1) so spectacular is its ability to render
142 textures on the fly. A texture is a fillpattern that you see on some
143 styles. Texture descriptions are specified directly to the key that
144 they should apply to, e.g.:
145 toolbar.clock: Raised Gradient Diagonal Bevel1
148 toolbar.clock.color: rgb:8/6/4
149 toolbar.clock.colorTo: rgb:4/3/2
150 Don't worry, we will explain what these mean. A texture description
151 consists of up to five fields, which are as follows:
152 Flat | Raised | Sunken. gives the component either a flat, raised or
155 sunken appearance.
156 Gradient | Solid. tells fluxbox(1) to draw either a solid color or a
158 gradient texture.
159 Horizontal | Vertical | Diagonal | Crossdiagonal | Pipecross | Elliptic
161 | Rectangle | Pyramid. Select one of these texture types. They only
162 work when Gradient is specified.
163 Interlaced. tells fluxbox(1) to interlace the texture (darken every
165 other line). This option is most commonly used with gradiented
166 textures, but it also works in solid textures.
167 Bevel1 | Bevel2. tells fluxbox(1) which type of bevel to use. Bevel1 is
169 the default bevel. The shading is placed on the edge of the image.
170 Bevel2 is an alternative. The shading is placed one pixel in from the
171 edge of the image. Instead of a texture description, also the option
172 ParentRelative is available, which makes the component appear as a part
173 of its parent, e.g. totally transparent.
174 Or for even more possibilities Pixmap. If pixmap texture is specified
176 (it might not be necessary on every occasion) the pixmap file is
177 specified in a separate pixmap resource.
178 toolbar.clock: pixmap
181 toolbar.clock.pixmap: clock_background.xpm
182 This feature might need some investigation, reports say that sometimes
183 the resources color and colorTo must be set and then they may not be
184 set.
185 All gradiented textures are composed of two color values: the color and
187 colorTo resources. When Interlaced is used in Solid mode, the colorTo
188 resource is used to find the interlacing color.
189
192 We should comment about fonts before we move on to the complete
193 component list. fluxbox(1) supports different options for text. These
194 options currently include bold, halo and shadow. To set these do this:
195 fontname-size:options for any of the font components in the style file.
196 For example:
197 menu.title.font: sans-8:bold,shadow
200 The latest versions of fluxbox(1) (> 0.9.8) also support different
201 values for these text options. The possibilities are as follows:
202 --------
205 Shadow color=<colorname> offsetx=<integer> offsety=<integer> Halo color=<colorname>
206 --------
207 For the case of completeness, here are some real world examples:
208 *.font: Verdana-10:bold,shadow:offsetx=2;offsety=4;color=green
211 *.font: Verdana-10:halo:color=blue
212 Of course this could all be placed on one line. Also note that for the
213 offset options, negative integers are allowed.
214 FONT PROBLEMS
217 If you have problems installing fonts or getting them to work, you
218 should read the docs page at xfree.org. Here is a link to one of these:
219 http://xfree.org/4.3.0/fonts2.html#3
220
223 Here is the exhaustive component list for fluxbox(1) styles. Each one
224 is listed with their type of value required. Comments in a style file
225 are preceded with an exclamation point (!) which we also use here so
226 that these can be pasted into a new theme.cfg to be customized
227 appropiately. Please note that in order to keep styles consistent it is
228 often the practice of stylists to provide all of the theme-items in
229 their style file even if they are not used. This allows the user the
230 ease of changing different components.
231
234 Many, many things you can do with window design in fluxbox(1), below
235 are your options. Have fun.
236 -----------------------------------------
239 window.bevelWidth: <integer>
240 window.borderColor: <color>
241 window.borderWidth: <integer>
242 window.button.focus: <texture type>
243 window.button.focus.color: <color>
244 window.button.focus.colorTo: <color>
245 window.button.focus.picColor: <color>
246 window.button.focus.pixmap: <filename>
247 window.button.pressed: <texture type>
248 window.button.pressed.color: <color>
249 window.button.pressed.colorTo: <color>
250 window.button.pressed.pixmap: <filename>
251 window.button.unfocus: <texture type>
252 window.button.unfocus.color: <color>
253 window.button.unfocus.colorTo: <color>
254 window.button.unfocus.picColor: <color>
255 window.button.unfocus.pixmap: <filename>
256 window.close.pixmap: <filename>
257 window.close.pressed.pixmap: <filename>
258 window.close.unfocus.pixmap: <filename>
259 window.font: <font>
260 window.frame.focusColor: <color>
261 window.frame.unfocusColor: <color>
262 window.grip.focus: <texture type>
263 window.grip.focus.color: <color>
264 window.grip.focus.colorTo: <color>
265 window.grip.focus.pixmap: <filename>
266 window.grip.unfocus: <texture type>
267 window.grip.unfocus.color: <color>
268 window.grip.unfocus.colorTo: <color>
269 window.grip.unfocus.pixmap: <filename>
270 window.handle.focus: <texture type>
271 window.handle.focus.color: <color>
272 window.handle.focus.colorTo: <color>
273 window.handle.focus.pixmap: <filename>
274 window.handle.unfocus: <texture type>
275 window.handle.unfocus.color: <color>
276 window.handle.unfocus.colorTo: <color>
277 window.handle.unfocus.pixmap: <filename>
278 window.handleWidth: <integer>
279 window.iconify.pixmap: <filename>
280 window.iconify.pressed.pixmap: <filename>
281 window.iconify.unfocus.pixmap: <filename>
282 window.justify: <{Left|Right|Center}>
283 window.label.active: <texture type>
284 window.label.active.textColor: <color>
285 window.label.focus: <texture type>
286 window.label.focus.color: <color>
287 window.label.focus.colorTo: <color>
288 window.label.focus.pixmap: <filename>
289 window.label.unfocus: <texture type>
290 window.label.unfocus.color: <color>
291 window.label.unfocus.colorTo: <color>
292 window.label.unfocus.pixmap: <filename>
293 window.label.focus.textColor: <color>
294 window.label.unfocus.textColor: <color>
295 window.maximize.pixmap: <filename>
296 window.maximize.pressed.pixmap: <filename>
297 window.maximize.unfocus.pixmap: <filename>
298 window.roundCorners: <{Top|Bottom}{Left|Right}>
299 window.shade.pixmap: <filename>
300 window.shade.pressed.pixmap: <filename>
301 window.shade.unfocus.pixmap: <filename>
302 window.stick.pixmap: <filename>
303 window.stick.pressed.pixmap: <filename>
304 window.stick.unfocus.pixmap: <filename>
305 window.stuck.pixmap: <filename>
306 window.stuck.unfocus.pixmap: <filename>
307 window.title.focus: <texture type>
308 window.title.focus.color: <color>
309 window.title.focus.colorTo: <color>
310 window.title.focus.pixmap: <filename>
311 window.title.height: <integer>
312 window.title.unfocus: <texture type>
313 window.title.unfocus.color: <color>
314 window.title.unfocus.colorTo: <color>
315 window.title.unfocus.pixmap: <filename>
316 -----------------------------------------
317
319 Everything you need to make your menu look pretty.
320 -----------------------------------------
323 menu.bevelWidth: <integer>
324 menu.borderColor: <color>
325 menu.borderWidth: <integer>
326 menu.bullet: <{empty|square|triangle|diamond}>
327 menu.bullet.position: <{left|right}>
328 menu.frame: <texture type>
329 menu.frame.color: <color>
330 menu.frame.colorTo: <color>
331 menu.frame.disableColor: <color>
332 menu.frame.font: <font>
333 menu.frame.justify: <{Left|Right|Center}>
334 menu.frame.pixmap: <filename>
335 menu.frame.textColor: <color>
336 menu.hilite: <texture type>
337 menu.hilite.color: <color>
338 menu.hilite.colorTo: <color>
339 menu.hilite.pixmap: <filename>
340 menu.hilite.textColor: <color>
341 menu.itemHeight: <integer>
342 menu.title: <texture type>
343 menu.title.color: <color>
344 menu.title.colorTo: <color>
345 menu.title.font: <font>
346 menu.title.pixmap: <filename>
347 menu.title.textColor: <color>
348 menu.title.justify: <{Left|Right|Center}>
349 menu.titleHeight: <integer>
350 menu.roundCorners: <{Top|Bottom}{Left|Right}>
351 menu.selected.pixmap: <filename>
352 menu.submenu.pixmap: <filename>
353 menu.unselected.pixmap: <filename>
354 -----------------------------------------
355
357 Every style must specify the background option. If you don't want your
358 style to change the user's background, then use `background: none'. The
359 options `centered', `aspect', `tiled', and `fullscreen' require the
360 `background.pixmap' resource to contain a valid file name. The `random'
361 option requires `background.pixmap' to contain a valid directory name.
362 For these options, fluxbox(1) will call fbsetbg(1) to set the
363 background. The options `gradient', `solid', and `mod' all require
364 `background.color' to be set. `gradient' and `mod' both require
365 `background.colorTo'. `mod' requires `background.modX' and
366 `background.modY' to be set as well. These options will be passed to
367 fbsetroot(1) to set the background.
368 background: centered|aspect|tiled|fullscreen|random|solid|gradient <texture>|mod|none
371 background.pixmap: <file or directory>
372 background.color: <color>
373 background.colorTo: <color>
374 background.modX: <integer>
375 background.modY: <integer>
376
378 Here are all of the options for the slit.
379 -----------------------------------------
382 slit: <texture type>
383 slit.bevelWidth: <integer>
384 slit.borderColor: <color>
385 slit.borderWidth: <integer>
386 slit.color: <color>
387 slit.colorTo: <color>
388 slit.pixmap: <filename>
389 -----------------------------------------
390
392 Below you will find all of the configuration possibilities for the
393 toolbar. The list is pretty extensive and offers you many options to
394 make your toolbar look just the way you want it.
395 -----------------------------------------
398 toolbar: <texture type>
399 toolbar.bevelWidth: <integer (0-255)>
400 toolbar.borderColor: <color>
401 toolbar.borderWidth: <integer>
402 toolbar.button.scale: <integer>
403 toolbar.color: <color>
404 toolbar.colorTo: <color>
405 toolbar.clock: <texture type>
406 toolbar.clock.borderColor: <color>
407 toolbar.clock.borderWidth: <integer>
408 toolbar.clock.font: <font>
409 toolbar.clock.justify: <{Left|Right|Center}>
410 toolbar.clock.pixmap: <filename>
411 toolbar.clock.color: <color>
412 toolbar.clock.colorTo: <color>
413 toolbar.clock.textColor: <color>
414 toolbar.height: <integer>
415 toolbar.iconbar.focused: <texture type>
416 toolbar.iconbar.focused.color: <color>
417 toolbar.iconbar.focused.colorTo:<color>
418 toolbar.iconbar.focused.pixmap: <filename>
419 toolbar.iconbar.unfocused: <texture type>
420 toolbar.iconbar.unfocused.color: <color>
421 toolbar.iconbar.unfocused.colorTo: <color>
422 toolbar.iconbar.unfocused.pixmap: <filename>
423 toolbar.iconbar.empty: <texture type>
424 toolbar.iconbar.empty.color: <color>
425 toolbar.iconbar.empty.colorTo: <color>
426 toolbar.iconbar.empty.pixmap: <filename>
427 toolbar.iconbar.focused.borderColor: <color>
428 toolbar.iconbar.focused.borderWidth: <integer>
429 toolbar.iconbar.unfocused.borderColor: <color>
430 toolbar.iconbar.unfocused.borderWidth: <integer>
431 toolbar.iconbar.borderColor: <color>
432 toolbar.iconbar.borderWidth: <integer>
433 toolbar.iconbar.focused.font: <font>
434 toolbar.iconbar.focused.justify: <{Left|Right|Center}>
435 toolbar.iconbar.focused.textColor: <color>
436 toolbar.iconbar.unfocused.font: <font>
437 toolbar.iconbar.unfocused.justify: <{Left|Right|Center}>
438 toolbar.iconbar.unfocused.textColor: <color>
439 toolbar.pixmap: <filename>
440 toolbar.shaped: <boolean>
441 toolbar.workspace.font: <font>
442 toolbar.workspace.justify: <{Left|Right|Center}>
443 toolbar.workspace.textColor: <color>
444 toolbar.workspace: <texture type>
445 toolbar.workspace.borderColor: <color>
446 toolbar.workspace.borderWidth: <integer>
447 toolbar.workspace.color: <color>
448 toolbar.workspace.colorTo: <color>
449 toolbar.workspace.pixmap: <filename>
450 -----------------------------------------
451
453 This list may seem intimidating, but remember, when you create your own
454 style you can easily set a majority of these keys with a single
455 component. For an example of this:
456 -----------------------------------------
459 *color: slategrey
460 *colorTo: darkslategrey
461 *unfocus.color: darkslategrey
462 *unfocus.colorTo: black
463 *textColor: white
464 *unfocus.textColor: lightgrey
465 *font: lucidasans-10
466 -----------------------------------------
467 This sets nice defaults for many components.
468
471 These are the color formats for styles:
472 #000000 (Hexadecimal)
475 rgb:<0-255>/<0-255>/<0-255>
476 See /usr/X11R6/lib/X11/rgb.txt for an explaination.
477
480 Blackbox was written and maintained by Brad Hughes <blackbox@alug.org>
481 and Jeff Raven <jraven@psu.edu>.
482 fluxbox(1) is written and maintained by Henrik Kinnunen
484 <fluxgen@fluxbox.org> with contributions and patches merged from many
485 individuals around the world.
486 The Official fluxbox(1) website: http://www.fluxbox.org You can find a
488 lot of styles here: http://tenr.de/
489 This manpage was composed from various resources including the official
491 documentation, fluxbox(1) man page and numerous other resources by Curt
492 "Asenchi" Micol. If you notice any errors or problems with this page,
493 please contact him here: <asenchi@asenchi.com> and using the great
494 contributions of <grubert@users.sourceforge.net>. Numerous other
495 languages could be available if someone jumps in.
496
499 fluxbox(1) fbsetbg(1) fbsetroot(1)
500 04/21/2007 FLUXSTYLE(1)