1FLUXBOX-STYLE(5) Fluxbox Manual FLUXBOX-STYLE(5)
2
6 fluxbox-style - A comprehensive look at styles/themes for fluxbox(1).
7
9 This document describes various options available for fluxbox styles.
10
12 What is a Style?
13 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 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 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
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 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 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 A more complete reference to this can be found in X(7), section
55 RESOURCES.
56
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 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 $ cd
74 $ mkdir -p ~/.fluxbox/styles/YourStyle/pixmaps
75 $ cd ~/.fluxbox/styles/YourStyle
76 $ nano theme.cfg
77 Output of a packaged style should look like the following:
79 $ 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 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
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 Here are some quick examples to illustrate basic syntax:
99 toolbar.clock.color: green
101 This sets the color resource of the toolbar clock to green. Another
103 example:
104 menu*color: rgb:3/4/5
106 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 *font: -b&h-lucida-medium-r-normal-*-*-140-*
112 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 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 *textColor: rgb:3/4/5
124 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 *textColor: rgb:3/4/5
132 toolbar.clock.textColor: rgb:255/0/0
133 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 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 toolbar.clock: Raised Gradient Diagonal Bevel1
143 toolbar.clock.color: rgb:8/6/4
144 toolbar.clock.colorTo: rgb:4/3/2
145 Don’t worry, we will explain what these mean. A texture description
147 consists of up to five fields, which are as follows:
148 Flat | Raised | Sunken. gives the component either a flat, raised or
150 sunken appearance.
151 Gradient | Solid. tells fluxbox(1) to draw either a solid color or a
153 gradient texture.
154 Horizontal | Vertical | Diagonal | Crossdiagonal | Pipecross | Elliptic
156 | Rectangle | Pyramid. Select one of these texture types. They only
157 work when Gradient is specified.
158 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 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 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 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 toolbar.clock: pixmap
177 toolbar.clock.pixmap: clock_background.xpm
178 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 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
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 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 To set the halo effect:
199 menu.title.font: sans-8:bold
201 menu.title.effect: halo
202 menu.title.halo.color: green
203 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
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
220 Many, many things you can do with window design in fluxbox(1), below
221 are your options. Have fun.
222 -----------------------------------------
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 -----------------------------------------
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
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 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
370 Here are all of the options for the slit.
371 -----------------------------------------
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
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 -----------------------------------------
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
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 -----------------------------------------
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 This sets nice defaults for many components.
458
460 These are the color formats for styles:
461 #000000 (Hexadecimal)
463 rgb:<0-255>/<0-255>/<0-255>
464 See /usr/share/X11/rgb.txt for an explanation.
466
468 Blackbox was written and maintained by Brad Hughes <blackbox at
469 alug.org> and Jeff Raven <jraven at psu.edu>.
470 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 The Official fluxbox(1) website: http://www.fluxbox.org You can find a
476 lot of styles here: http://tenr.de/
477 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
486 fluxbox(1) fbsetbg(1) fbsetroot(1)
487
489 Henrik Kinnunen <fluxgen@fluxbox.org>
490 Author.
491fluxbox-style.txt 08 February 2015 FLUXBOX-STYLE(5)