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