-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththemes.html
556 lines (484 loc) · 15.6 KB
/
themes.html
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
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>IceWM Theme Creation Howto</title>
<style type="text/css">
<!--
td, ul,dl {
color: black;
font-family: sans-serif;
}
p {
margin-left: 10px;
color: black;
font-family: sans-serif;
}
body {
margin: 40px 40px 10px 40px;
background: white;
background-position: top left;
background-repeat: no-repeat;
}
h1,H1 {
font-family: sans-serif;
color: black;
font-weight: bold;
width: 100%;
font-size: 2em;
}
h2,H2 {
color: black;
font-family: sans-serif;
font-weight: bold;
width: 100%;
font-size: 1.5em;
}
h3,H3 {
color: black;
font-family: sans-serif;
font-weight: bold;
width: 100%;
font-size: 1em;
}
pre { font-family: monospace; }
img { margin-left: 100px; }
//-->
</style>
</head>
<body>
<h1>IceWM Theme Creation Howto</h1>
<b>Adam Pribyl, [email protected]</b><br>
MJ Ray, [email protected]<br>
Last updated for IceWM-1.2.23
<h2>What is an IceWM theme?</h2>
<p>
An <a href="https://ice-wm.org">IceWM</a> theme is made up of these parts:
</p>
<ul>
<li> one or more theme files, including a "default.theme", which should
specify all IceWM options related to appearance (color definitions) and behaviour, in the usual preferences
format of "Option=Value" on each line;
(some of the preferences/values are not allowed to change in theme specification)
</li>
<li> a collection of pixmaps (.xpm files) which are used for
building the window decorations;
</li>
<li> a collection of pixmaps (.xpm files) for cursors, special icons,
mailbox and task bar;
</li>
</ul>
<p>
<b>
It should not contain a large backdrop graphic or
specify any options not related to its appearance.
</b>
</p>
<p>
Both the theme file(s) and the decoration pixmaps live in a single
subdirectory under ICE-LIB/themes, where ICE-LIB is either the
IceWM system directory or a users' .icewm directory. Themes
then appear in the "Themes" item on the program menu. The
default theme on startup is set in the <i>theme</i> file or by
the -t option in the command line.
</p>
<h2>Types of IceWM themes</h2>
<p>
There are several types of theme possible, chosen by setting
the <b>"Look"</b> option to one of the values:
<b><i>warp3</i></b>; <b><i>warp4</i></b>; <b><i>win95</i></b>;
<b><i>motif</i></b>; <b><i>nice</i></b>; <b><i>pixmap</i></b>;
<b><i>metal</i></b>; <b><i>gtk</i></b>.
These each give you different
levels of control over the appearance and require different
numbers of pixmaps. (Actually, pixmap, metal and gtk seem
identical.)
</p><p>
In this howto, we will cover the most general <b><i>pixmap "Look"</i></b>,
because other looks generally need a subset of the pixmaps.
Look in the system ICE-LIB/themes directory at the basic themes
if you want to know how they compare.
</p>
<h2>Pixmaps creation tools</h2>
<p>
Most people use some combination of a paint package - <b>GIMP</b> and
xpaint can create xpm files - and a text editor to create and
correct pixmaps. If the text editor has configurable syntax
highlighting and the pixmaps are smaller than your screen, this
is a simple way to work closely on a zoomed preview.
</p>
<h2>Pixmap requirements</h2>
<p>
(Hint: pixmaps are quite simple files, really. If you don't
know them, try looking at a few: there's a header giving image
and palette sizes, then the palette, then the image.)
</p>
<p>
<b>Pixmap naming</b> is methodical, even if it looks a little
unfriendly. Each part of the window is a separate pixmap and
the start of the name specifies which part (eg "close" is the
close button and "frame" is a window frame section). The next
letter is <b>"A" for an active</b> (focussed) window version or <b>"I"
for an inactive</b> window. Some parts (frame sections and title
bars) then have a character to denote which part it is.
Finally, you have ".xpm" on the end.
</p>
<p>
You can use xpm files with all available features like transparency.
This way you can create particulary transparent frames, titles, buttons etc.
</p>
<h3>Buttons</h3>
<p>
Which <b>buttons</b> are prepared in your theme is specified by the
<b>TitleButtonsSupported</b> option in the theme file.
<b>TitleButtonsLeft</b> and <b>TitleButtonsRight</b> (see preferences
file) says which buttons to place where (you can use less buttons than you
have under TitleButtonsSupported).
The letters are shown after the names. Button file
names are simple: <b>close (x)</b>, <b>hide (h)</b>, <b>maximize and restore
(m)</b>, <b>menuButton (s)</b>, <b>minimize (i)</b>, <b>rollup and rolldown (r)</b> or
<b>depth (d)</b> and are followed by A.xpm or I.xpm as before.
There is one more suffix for button pixmaps only - <b>"O"</b>. It specifies pixmap for button when mouse cursor is over this button. For this feature to work you need to set RolloverButtonsSupported=1.
Please set your theme's TitleButtonsSupported to include all buttons
you have and not more.
</p>
<p>
Each button has two appearances in a pixmap-look theme: a
<i>normal</i> and a <i>pressed</i> version. The pixmaps used are slightly
unusual to accommodate this, being twice the size vertically,
with the pressed version below the normal one. So, if you are
using 16x16 buttons, your pixmaps will be 16x32 and be two
pixmaps in one, effectively.
</p>
<h3>Frames</h3>
<p>
Window <b>frames are "frame"</b> followed by A or I and a location
specifier.
</p>
<p>
<b>Dialogue box frames are "dframe"</b> instead. The
locations are fairly logical and same for both frames and dframes:
</p>
<pre>
,TL --------- T -------- TR.
| |
L R
| |
`BL --------- B -------- BR'
</pre>
<p>
(think <b>T</b>op, <b>B</b>ottom, <b>L</b>eft and <b>R</b>ight)
</p>
<h3>Title</h3>
<p>
The <b>title bar</b> is composed of pixmaps, specified as <b>"title"</b>,
then A or I, then the location:
</p>
<p>
<font color="grey">
This is deprecated in icewm 1.2.7
<br><br>
Since late in the 0.9.x series, a two new forms are supported.
If TitleBarCentered=0 the locations are:
</font>
</p>
<pre>
<font color="grey">
,-----------------------.
| L P T M B R |
`-----------------------'
</font>
</pre>
<p>
<font color="grey">This is deprecated in icewm 1.2.7
or for TitleBarCentered=1:
<br><br>
This can be replaced with option TitleBarJustify=50
</font>
</p>
<p>
Valid pixmaps are now:
<pre>
,-----------------------.
J L S P T M B R Q
`-----------------------'
</pre>
<p>
where the title text appears on top of the T pixmap (think basic letters
<b>L</b>eft, <b>S</b>pace, <b>T</b>itle, <b>M</b>iddle, <b>B</b>ulk, <b>R</b>ight).
Space fills everything between L and P pixmap, same applies for Bulk.
</p>
<p>
You do not need to define all frames and titles as pixmaps. Instead of this you can use
definitions of colors and sizes in default.theme file (then you are defining borders and
border colors for frames etc.)
<h3>Border and frames summary</h3>
<table cellspacing=1>
<tr><td bgcolor=red>frame?TL</td><td bgcolor=red>frame?TL</td><td bgcolor=red width="50%">frame?T</td><td bgcolor=red>frame?TR</td><td bgcolor=red>frame?TR</td></tr>
<tr><td bgcolor=red>frame?TL</td>
<td colspan=3>
<table><tr bgcolor=blue><td>title?J</td>
<td bgcolor=cyan>menuButton</td>
<td>title?L</td><td>title?S fill</td><td>title?P</td>
<td>title?T fill + text</td>
<td>title?M</td><td>title?B fill</td><td>title?R</td>
<td bgcolor=cyan>"buttons"</td>
<td>title?Q</td></tr></table>
</td><td bgcolor=red>frame?TR</td>
</tr>
<tr><td bgcolor=red>frame?L</td><td colspan=3></td><td bgcolor=red>frame?R</td></tr>
<tr><td bgcolor=red>frame?BL</td><td colspan=3></td><td bgcolor=red>frame?BR</td></tr>
<tr><td bgcolor=red>frame?BL</td><td bgcolor=red>frame?BL</td><td bgcolor=red>frame?B</td><td bgcolor=red>frame?BR</td><td bgcolor=red>frame?BR</td></tr>
</table>
<p>
Where ? is either A or I.
</p>
<p>
Here is an example of possible Infadel theme frame and title decomposition:
</p>
<img src="example.png" alt="">
<h2>Taskbar themeability</h2>
<p>
Taskbar in IceWM is also themeable.
</p>
<h3>Pixmaps</h3>
<p>
You need four pixmaps to change
whole taskbar look (the names are self explaining).
</p>
<pre>
taskbarbg.xpm
taskbuttonbg.xpm
taskbuttonactive.xpm
taskbuttonminimized.xpm
</pre>
<p>
You can also change <b>start</b> button.
</p>
<pre>
linux.xpm
</pre>
<p>
and buttons for windows list and show desktop.
</p>
<pre>
windows.xpm
showdesktop.xpm (IceWM > 1.2.13)
</pre>
<p>
Pixmaps for taskbar theme needs to be in directory <b>taskbar</b> under your
theme directory.
</p>
<p>
The size of the pixmaps does not matter, but you need to take in mind that only
appropriate part will be used. E.g. for <i>taskbarbg.xpm</i> only upper 25 pixels
(height of taskbar) will be used from pixmap if single line taskbar.
If pixmap is smaller than required size then it will be reproduced
on whole area which it should fill.
</p>
<table bgcolor="grey"><tr><td>
<table cellspacing=0 cellpadding=2><tr>
<td bgcolor="white">linux.xpm</td>
<td> </td>
<td bgcolor="lightgrey">taskbuttonbg.xpm</td>
<td> </td>
<td bgcolor="red">taskbuttonactive.xpm</td>
<td> </td>
<td bgcolor="blue">taskbuttonminimized.xpm</td>
<td> </td>
<td>taskbarbg.xpm</td>
<td> </td>
<td>12:34</td>
</tr>
</table>
</td></tr></table>
<h3>Clock</h3>
<p>
Even more, you can set clock to use pixmap digits.
If you want to use pixmap digits you need to put:
</p>
<pre>
a.xpm, colon.xpm, dot.xpm, m.xpm, n0.xpm ... n9.xpm, p.xpm, slash.xpm, space.xpm
</pre>
<p>
into <b>ledclock</b> directory under your theme. Pixmaps height should fit to taskbar.<br>
</p>
<h3>APM</h3>
<p>
APM battery status can also use pixmap digits. Except those for clock you can define
</p>
<pre>
percent.xpm
</pre>
<p>
for "%" character. Place it also under <b>ledclock</b>.
</p>
<h3>Mailbox</h3>
<p>
Also mailbox icons are themeable. There are five states for this icon.
</p>
<pre>
errmail.xpm, mail.xpm, newmail.xpm, nomail.xpm, unreadmail.xpm
</pre>
<p>
Pixmaps should be 16x16 pixel for now, stored in <b>mailbox</b> subdirectory.
<h3>Collapse button</h3>
<p>
From 1.2.17 IceWM taskbar has collapse button. This button is from 1.2.22 also themeable.
Use:
</p>
<pre>
collapse.xpm, expand.xpm
</pre>
<p>
and place them under <b>taskbar</b> directory.
</p>
<h3>Resizing taskbar</h3>
<p>
Taskbar height could be changed in two ways. Either increased by making taskbar "linux.xpm" higher (in 1.2.23 it is
broken for TaskBarDoubleHeight=0) or by changing SmallIconSize pref. Taskbar is then height to fit icons of that size.
Remember that while taskbar height is changed not all taskbar parts are changed accordingly (e.g. monitors).
</p>
<h2>Icons</h2>
<p>
Very complex themes can also contain their own icons for folder, file or
other apps in <b>icons</b> subdirectory.
By default 16x16 and 32x32 icons are used. Nameing is just like this:
</p>
<pre>
folder_16x16.xpm for folder icon size 16x16 pixels
folder_32x32.xpm for folder icon size 32x32 pixels
</pre>
<p>
In e.g. menu file then it is enough to say
</p>
<pre>
menu "Mail Agents" folder {
}
</pre>
<p>
and folder icon with appropriate size and name will be used.
IceWM also accepts PNG files as icons, but you have to explicitely put the name and/or path (if you do not add path to icons
to IconPath pref).
</p>
<pre>
menu Applications "/home/test/my icons/myfolder.png" {
}
</pre>
<p>
The default sizes of icons could be set in prefs with *IconSize options.
</p>
<h2>Cursors</h2>
<p>
Pointers for <b>resize</b> begin with <b>"size"</b> followed by frame part name
(e.g. sizeTR.xpm is pointer for resize Top Right).
Pointers for <b>scroll</b> begin with <b>"scroll"</b> followed by L, R, U or D
(think <b>L</b>eft, <b>R</b>ight, <b>U</b>p, <b>D</b>own). Cursors are placed
in <b>cursors</b> subdirectory.
</p>
<h2>Gradients</h2>
<p>If you want to use gradients you have to have IceWM compiled with gradient support.
Then in theme definition file you simply include line like this:
</p>
<pre>
Gradients="menubg.xpm titleAS.xpm titleAT.xpm titleAB.xpm titleIS.xpm titleIT.xpm titleIB.xpm"
</pre>
<p>
Pixmaps for gradient definition can contains only few pixels. These are defining what colors are used to create gradient.
For example this definition (zoomed 1:10):
</p>
<img src="menubg.png" alt="">
<p>
looks like this when used in titleAS.xpm:
</p>
<img src="titlebar.png" alt="">
<p>
You can use almost any picture, but you have to take in mind that this image will be blured
inside e.g. whole S area. (This is difference to non gradient themes - there S images are not blured
but placed many times in S area - it fills area like pattern.)
<h2>Themeability by colors</h2>
<p>
By color settings in preferences you can set color of almost every part of IceWM.
You can set colors of
<i>Normal, Active, Minimized and Invisible</i> buttons and text colors for same
categories of buttons. (Search for <b>Color*TaskBar* options</b> in preferences.)
</p>
<p>
You can also set <b>colors of monitors and clock background and font</b>.
</p>
<p>
Colors for <b>frames, taskbar, menu, tooltips, dialogs, listboxes, scrollbars and desktop</b>.
</p>
<p>
You can combine pixmap and color themeability as you wish.
<p>
For details you need to look trought IceWM preference file.
</p>
<h2>default.theme</h2>
<p>
The <b>default.theme</b> file is actually another preferences file,
just like ICE-LIB/preferences. There are two options which are
customarily put at the top of default.theme, which are
</p>
<pre>
ThemeDescripton="description of theme"
ThemeAuthor="contact details"
</pre>
<p>
and I encourage you to do the same. It can also be useful to
add some comments (lines starting with a hash, #) to the top of
the file, suggesting other resources (eg backdrops) that you
think would go well with the theme.
</p>
<p>
Your default.theme file should set all options concerning
appearance, whether you think they will be used or not. It
should not interfere with the configuration of icewm unless it
is essential to your appearance. For example, it is not
normally OK for a theme to decide to show the TaskBar (this is
usually left to the user's preferences file), but a Windows95
lookalike theme would want to show a single-height task bar for
sure and set the look of the clock, etc.
</p>
<p>
If you wish, you can include other .theme files in your theme.
These will appear on the optional submenu for your theme
(similar to how "Restart" is on the optional submenu of
"Logout") and give the user several possible variations on a
theme.
</p>
<p>
For examples you can see <i>preferences</i> file from IceWM package which
is pretty self explaining.
</p>
<h2>Testing your theme</h2>
<p>
When you are ready to test your theme for the first time, you
need to cause icewm to rebuild its menus, so that your new
theme appears in the "Themes" submenu. You can do this by
either restarting icewm, or by changing themes to something
else, then you can change to your theme. After changing you
theme file, you must do the same.
</p>
<h2>Packaging your theme</h2>
<p>
Change to ICE-LIB/themes and do
</p>
<pre>
tar czvf themename.tar.gz themename
</pre>
<p>
to make a tarball of your theme.
</p>
<p>
The home for IceWM themes is at
<a href="https://www.box-look.org/browse/cat/142/ord/latest/">box-look.org</a>
these days.
<h5>This Document</h5>
<p><font size=-1>
The IceWM Theme Creation HOWTO is copyright 1999-2000 MJ Ray
and 2003 Adam Pribyl, and may be freely reproduced unaltered but with annotations.
The latest version should always be on the IceWM Network. If
you wish to improve this document, please send message to [email protected].
</font>
</p>
</body></html>