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