aboutsummaryrefslogtreecommitdiff
path: root/data/README.style
diff options
context:
space:
mode:
Diffstat (limited to 'data/README.style')
-rw-r--r--data/README.style330
1 files changed, 0 insertions, 330 deletions
diff --git a/data/README.style b/data/README.style
deleted file mode 100644
index 217c893..0000000
--- a/data/README.style
+++ /dev/null
@@ -1,330 +0,0 @@
1-- data/README.style for Blackbox 0.61.x - an X11 Window manager
2
3Creating a new style (aka "theme"):
4-----------------------------------
5After getting Blackbox up and running, the next thing you want to do is change
6the colors/fonts/etc. on the screen. Blackbox uses a "style" to read its
7configuration information. A style in Blackbox consists of X resources placed
8in a file. Just like the menu file (see README.menu), the style file can be
9put anywhere on the filesystem; as long as you have read access to the file,
10Blackbox can use it.
11
12First, we need to decide where to put our style file, and what to name it.
13I recommend using the naming scheme described on http://blackbox.themes.org/
14when creating styles.
15
16Let's get started. Let's put our new style into a file named `results.'
17Following the themes.org naming scheme, this file will go into
18.blackbox/Styles. Same as with the menu file, we use our favorite text editor
19to create the new style.
20
21X resources consist of a key and a value. The key is constructed of several
22smaller keys, delimited by a period (`.'). Keys may also contain a star (`*')
23to serve as a wildcard, which means that one line of typed text will match
24several keys. This is useful for styles that are based on one or two colors.
25
26Blackbox allows you to configure it's three main components: the toolbar, the
27menus and the window decorations. Lets begin by creating a style for our
28toolbar.
29
30First we need to define a "texture" for the toolbar and it's components.
31Textures tell Blackbox how to mold or shape the colors we supply.
32
33A texture is comprised of the following elements:
34
35 Raised / Sunken / Flat give the component a raised, sunken
36 or flat appearance (respectively)
37
38 Solid / Gradient tell Blackbox whether to draw a solid
39 or gradiented texture
40
41 Interlaced tells Blackbox to interlace a
42 gradient (and gradient ONLY) texture
43
44 Bevel1 / Bevel2 tells Blackbox which type of bevel
45 to use.
46
47NOTE on Bevel1 / Bevel2:
48
49Bevel1 is the default bevel. The shading is placed on the edge of the image.
50Bevel2 is an alternative. The shading is placed one pixel in from the edge
51of the image.
52
53Now that we understand that, let's define the textures for the toolbar. The
54toolbar has a main frame, buttons, two labels and a clock label. The buttons
55have 2 states, so we provide textures for both the normal and the pressed
56state.
57
58...
59toolbar: Raised Diagonal Gradient Bevel1
60toolbar.button: Raised Diagonal Gradient Bevel1
61toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
62toolbar.clock: Flat Interlaced Gradient
63toolbar.label: Flat Interlaced Gradient
64...
65
66NOTE: the texture strings don't have to be capitalized like they did in
67previous versions. They are still placed in capitals here, because things like
68the bbtools still use the old method.
69
70Next we define colors for the textures. Colors can be any valid X colorname
71(from the RGB database) or it can be a color specifier, as described by
72'man 1 X.'
73
74Let's see how our file looks after adding colors:
75
76...
77toolbar: Raised Diagonal Gradient Bevel1
78toolbar.button: Raised Diagonal Gradient Bevel1
79toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
80toolbar.clock: Flat Interlaced Gradient
81toolbar.label: Flat Interlaced Gradient
82
83toolbar.color: rgb:8/8/7
84toolbar.colorTo: grey20
85toolbar.button.color: grey
86toolbar.button.colorTo: grey20
87toolbar.button.pressed.color: rgb:4/4/38
88toolbar.button.pressed.colorTo: rgb:f/f/d
89toolbar.clock.color: grey20
90toolbar.clock.colorTo: rgb:8/8/7
91toolbar.label.color: grey20
92toolbar.label.colorTo: rgb:8/8/7
93toolbar.textColor: grey85
94...
95
96As you have noticed, all textures have a color and a colorTo key. These keys
97are required for gradient images. For solids, only color is needed. You will
98also notice that we have supplied the color for the text on the toolbar. Not
99all textures have a text color, just certain base textures.
100
101Next, let's move onto the menus. Since Blackbox was written in C++, all of
102the menus used in it are subclasses of one generic base class. Blackbox reads
103the style for the configuration for that base class, which applies to all
104the menus used in Blackbox.
105
106The menu has two main parts, the title and the frame. There is nothing
107visible under them, so we only configure these two components. The menu frame
108and menu title BOTH have a configurable text color, and the menu frame has a
109highlight color and the corresponding highlighted text color key. Let's assign
110some textures and colors to our menu, and see what our style file looks like
111so far:
112
113...
114toolbar: Raised Diagonal Gradient Bevel1
115toolbar.button: Raised Diagonal Gradient Bevel1
116toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
117toolbar.clock: Flat Interlaced Gradient
118toolbar.label: Flat Interlaced Gradient
119
120toolbar.color: rgb:8/8/7
121toolbar.colorTo: grey20
122toolbar.button.color: grey
123toolbar.button.colorTo: grey20
124toolbar.button.pressed.color: rgb:4/4/38
125toolbar.button.pressed.colorTo: rgb:f/f/d
126toolbar.clock.color: grey20
127toolbar.clock.colorTo: rgb:8/8/7
128toolbar.label.color: grey20
129toolbar.label.colorTo: rgb:8/8/7
130toolbar.textColor: grey85
131
132menu.title: Raised Diagonal Interlaced Gradient Bevel1
133menu.frame: Raised Diagonal Gradient Bevel1
134
135menu.title.color: grey20
136menu.title.colorTo: rgb:8/8/7
137menu.title.textColor: grey85
138menu.frame.color: rgb:8/8/7
139menu.frame.colorTo: grey10
140menu.frame.textColor: white
141menu.frame.highlightColor: grey85
142menu.frame.hiTextColor: grey20
143...
144
145Next, we need to configure our windows. Windows are like buttons, they have
146two states, focused and unfocused. There for we define a separate texture
147for unfocused windows and focused windows. The buttons on the titlebar
148are focus dependant also, so we need to configure them as well. The buttons
149only have one "pressed" state, so we only have to define that once, instead of
150having a focus.pressed state and an unfocus.pressed state. The window frame
151is the thin border around the client window. Let's be sure to catch it as well.
152
153After adding the window config, our style now looks like this:
154
155...
156
157toolbar: Raised Diagonal Gradient Bevel1
158toolbar.button: Raised Diagonal Gradient Bevel1
159toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
160toolbar.clock: Flat Interlaced Gradient
161toolbar.label: Flat Interlaced Gradient
162
163toolbar.color: rgb:8/8/7
164toolbar.colorTo: grey20
165toolbar.button.color: grey
166toolbar.button.colorTo: grey20
167toolbar.button.pressed.color: rgb:4/4/38
168toolbar.button.pressed.colorTo: rgb:f/f/d
169toolbar.clock.color: grey20
170toolbar.clock.colorTo: rgb:8/8/7
171toolbar.label.color: grey20
172toolbar.label.colorTo: rgb:8/8/7
173toolbar.textColor: grey85
174
175menu.title: Raised Diagonal Interlaced Gradient Bevel1
176menu.frame: Raised Diagonal Gradient Bevel1
177
178menu.title.color: grey20
179menu.title.colorTo: rgb:8/8/7
180menu.title.textColor: grey85
181menu.frame.color: rgb:8/8/7
182menu.frame.colorTo: grey10
183menu.frame.textColor: white
184menu.frame.highlightColor: grey85
185menu.frame.hiTextColor: grey20
186
187window.focus: Raised Diagonal Interlaced Gradient Bevel1
188window.focus.button: Raised Diagonal Gradient Bevel1
189window.unfocus: Raised Diagonal Gradient Bevel1
190window.unfocus.button: Sunken Diagonal Gradient Bevel1
191window.button.pressed: Flat Diagonal Interlaced Gradient
192window.frame: Raised Solid Bevel1
193
194window.focus.color: grey
195window.focus.colorTo: grey20
196window.focus.textColor: grey85
197window.focus.button.color: grey
198window.focus.button.colorTo: grey20
199window.unfocus.color: rgb:8/8/7
200window.unfocus.colorTo: grey20
201window.unfocus.textColor: grey
202window.unfocus.button.color: grey20
203window.unfocus.button.colorTo: grey
204window.button.pressed.color: rgb:4/4/38
205window.button.pressed.colorTo: rgb:f/f/d
206window.frame.color: grey85
207...
208
209Now all we have to do is finish off the style with a few miscellanous options.
210These include the title and menu fonts/justification, border color, bevel and
211handle widths, window move style and the root command.
212
213Fonts must be a valid X11 font screen, or a valid font alias. Use a utility
214like `xfontsel' (and others) to preview fonts. Also use the utility
215`xlsfonts' to spit out all the current X font names and aliases stored in
216the X server.
217
218Justification can be one of three things: LeftJustify, CenterJustify or
219RightJustify.
220
221The border color is the color applied to the 1 pixel border around the menu
222frame/title and the window titlebar/buttons/handle/etc. Setting this color
223can have drastic effects on your style, so don't just leave it set to `black'
224all the time. ;)
225
226The bevel and handle widths control the size and spacing of decorations in
227Blackbox. The larger the number, the more space Blackbox takes up.
228
229The window move style tells Blackbox how to move windows when you drag them
230with your mouse. There are two options for it: Opaque or Wire.
231
232The root command is the command run every time the style is loaded (either at
233startup or after a reconfigure/style-change). It is used to run a program
234like xv, Esetroot, wmsetbg, etc. to set an image/color/pattern on the root
235window. Just supply a command and it will be run.
236
237Also, as a note, an X resource file can have comments. Precede the line with
238and exclamation mark `!' and the rest of the line will be ignored.
239
240Let's finish off the details and take a look at our finished style:
241
242...
243! Results - theme for Blackbox 0.51.x
244! by Brad Hughes bhughes@tcac.net
245
246! define the toolbars textures... note that the interlaced option is new
247! in 0.51.x
248toolbar: Raised Diagonal Gradient Bevel1
249toolbar.button: Raised Diagonal Gradient Bevel1
250toolbar.button.pressed: Sunken Diagonal Interlaced Gradient Bevel1
251toolbar.clock: Flat Interlaced Gradient
252toolbar.label: Flat Interlaced Gradient
253
254! toolbar colors
255toolbar.color: rgb:8/8/7
256toolbar.colorTo: grey20
257toolbar.button.color: grey
258toolbar.button.colorTo: grey20
259toolbar.button.pressed.color: rgb:4/4/38
260toolbar.button.pressed.colorTo: rgb:f/f/d
261toolbar.clock.color: grey20
262toolbar.clock.colorTo: rgb:8/8/7
263toolbar.label.color: grey20
264toolbar.label.colorTo: rgb:8/8/7
265toolbar.textColor: grey85
266
267! menu textures
268menu.title: Raised Diagonal Interlaced Gradient Bevel1
269menu.frame: Raised Diagonal Gradient Bevel1
270
271! menu colors
272menu.title.color: grey20
273menu.title.colorTo: rgb:8/8/7
274menu.title.textColor: grey85
275menu.frame.color: rgb:8/8/7
276menu.frame.colorTo: grey10
277menu.frame.textColor: white
278menu.frame.highlightColor: grey85
279menu.frame.hiTextColor: grey20
280
281! window textures
282window.focus: Raised Diagonal Interlaced Gradient Bevel1
283window.focus.button: Raised Diagonal Gradient Bevel1
284window.unfocus: Raised Diagonal Gradient Bevel1
285window.unfocus.button: Sunken Diagonal Gradient Bevel1
286window.button.pressed: Flat Diagonal Interlaced Gradient
287window.frame: Raised Solid Bevel1
288
289! window colors
290window.focus.color: grey
291window.focus.colorTo: grey20
292window.focus.textColor: grey85
293window.focus.button.color: grey
294window.focus.button.colorTo: grey20
295window.unfocus.color: rgb:8/8/7
296window.unfocus.colorTo: grey20
297window.unfocus.textColor: grey
298window.unfocus.button.color: grey20
299window.unfocus.button.colorTo: grey
300window.button.pressed.color: rgb:4/4/38
301window.button.pressed.colorTo: rgb:f/f/d
302window.frame.color: grey85
303
304! misc...
305borderColor: rgb:2/2/1c
306
307moveStyle: Opaque
308
309menuJustify: CenterJustify
310titleJustify: CenterJustify
311
312bevelWidth: 2
313handleWidth: 4
314
315menuFont: lucidasans-10
316titleFont: lucidasans-bold-10
317
318rootCommand: fbsetroot -mod 4 4 -fg rgb:6/6/5c -bg grey20
319...
320
321Alright! Our style is finished. Let's see how the sucker looks. First we
322need to tell Blackbox to use the new style. The way to do that is to edit
323your menu (refer to README.menu for this) and add:
324
325[style] (Results) {~/.blackbox/Styles/results}
326
327somewhere in our menu. Taking advantage of Blackbox 0.51.x's (and up)
328automagic menu updates, all we have to do is close and reopen the root menu
329and our new style entry will be visible. Select it and Blackbox will apply
330the new style we just created.