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