tazpanel view README.icons @ rev 638

boot.iso: allow /dev/cdrom
author Pascal Bellard <pascal.bellard@slitaz.org>
date Wed Jan 05 15:14:01 2022 +0000 (2022-01-05)
parents
children
line source
1 TazPanel icons
2 ==============
3
4 The default TazPanel theme includes monochrome icons. Currently, there is no
5 other themes (note, 'sandfive' theme designed for TazPanel in SliTaz-4.0).
6
7
8 Add an icon to the element
9 --------------------------
10
11 To add an ordinary png icon to the button, link, span or any other item, we can
12 use the following technique:
13
14 1. In the HTML source code we add custom 'data-icon' attribute to the element:
15
16 <button data-icon="slitaz">Continue...</button>
17
18 2. In the CSS we assign an icon for the item:
19
20 [data-icon="slitaz"]::before {
21 content: url('images/slitaz.png');
22 }
23
24 You will see the 'images/slitaz.png' icon in the button to the left of its
25 label.
26
27 We can use 'data-img' attribute in addition to the 'data-icon' when we need
28 **only** image without label:
29
30 <a href="?back" data-img="back"></a>
31
32 [data-img="back"]:: before {
33 content: url('images/back.png');
34 }
35
36
37 Iconic font
38 -----------
39
40 It was designed font that contains all the icons needed for TazPanel and all its
41 scripts. If necessary, the font can be expanded with new icons. All available
42 icons are in [Private Use Area]
43 (<https://en.wikipedia.org/wiki/Private_Use_Areas>), starting from U+F100.
44
45 To view the icons you can use `gucharmap`:
46
47 1. Select font 'TazPanel'.
48 2. Click menu View - By Unicode Block.
49 3. Click menu View - Show only glyphs from this font.
50 4. In the 'Unicode Block' select 'Private Use Area'.
51 5. Scroll right pane up to U+F100.
52
53 (Starting from U+F200 you'll see additional font elements used to combine with
54 some font icons.)
55
56 Now we can change our CSS rules to display icons from our font:
57
58 @font-face {
59 font-family: TazPanelWeb;
60 src: url('/styles/default/tazpanel.ttf');
61 }
62 [data-icon]:before, [data-img] {
63 vertical-align: baseline;
64 padding: 0;
65 margin: 0;
66 font-size: 1.2em;
67 font-family: TazPanelWeb;
68 }
69 [data-img="back"]:: before {
70 content: '\f102';
71 }
72
73 In the first rule we defined web-font we name 'TazPanelWeb' and use it in the
74 second rule. In the third rule we print 'back' icon using its Unicode number.
75
76 **First pitfall:** not all web browsers can display web fonts :-( Solution: make
77 our web-font system-wide available via putting it to the `/usr/share/fonts/` and
78 forge our second rule a bit:
79
80 [data-icon]:before, [data-img] {
81 . . .
82 font-family: TazPanel, TazPanelWeb;
83 }
84
85
86 Ligatures
87 ---------
88
89 Fortunately, we can use [ligatures]
90 (https://en.wikipedia.org/wiki/Typographic_ligature#Stylistic_ligatures) in our
91 font and considerably simplify the CSS rules. One rule for all data-icons:
92
93 [data-icon]::before {
94 content: attr(data-icon);
95 }
96
97 For example, for `data-icon="back"` we just type word "back" using our web-font,
98 and font rendering application automatically changed word "back" into icon
99 "back" (U+F102) and we see icon.
100
101 **Second pitfall:** Opera web browser used original Presto engine not supported
102 font ligatures. Solutions: at first package "tazpanel-ttf-css" was created, that
103 added CSS rules to use with the Opera web browser. Then we have been made the
104 global replacement throughout TazPanel code and code of its applets:
105
106 1. For example, where we need 'back' icon, we mark it in the TazPanel sources:
107 `@back@`.
108 2. When we `make` tazpanel package, special script `stripall.sh` changes all
109 the `@icon@` entries to the Unicode symbols representing icon itself.
110
111 Sources are available in the [repository](http://hg.slitaz.org/tazpanel), and
112 compiled scripts you can see in your SliTaz in `/var/www/tazpanel/`.
113
114 We have some colors in the icons: for example, `cancel`, `remove`, and `delete`
115 icons are red, while `ok` is green. Note that because CSS rules change at
116 "compile" time, the icon color will be appointed by its Unicode value; you need
117 to use `stripall.sh` on your TazPanel applets too to change "ligatures" values
118 into icon symbol itself, or you'll lose colors.
119
120
121 Font development
122 ----------------
123
124 To develop icon font you need FontForge and Inkscape (both are available in our
125 repository). You can draw your icons or grab few free icons from the place like
126 [Fontello](http://fontello.com/).
127
128 My workflow:
129
130 1. Open icon font (probably, saved from Fontello) in FontForge, and export
131 icon you need into SVG file.
132 2. Open SVG in Inkscape (it is more suitable for editing vectors).
133 3. Change icon:
134 * Make sure the canvas is 1024x1024, scale your icon if need;
135 * Simplify curves, remove excess points;
136 * Snap straight elements to the 16x16 grid (for best icon look while icon
137 is displayed in 16x16px size in the most cases).
138 4. Save SVG and import it into web font using FontForge (note, [TrueType uses
139 quadratic Bézier splines](https://fontforge.github.io/bezier.html), while
140 Inkscape uses cubic Bézier splines, so your curves are changed after you
141 export SVG into TTF).
142 5. Save web font as TTF.
143 6. Don't forget to add your new icon into `test.cgi` to see how it looks in
144 the TazPanel interface.
145
146 TazPanel font sources are now available among other TazPanel stuff.
147
148
149 Regular icons theme development
150 -------------------------------
151
152 You can create your own TazPanel theme with the png icons.
153 Let name it "colorful".
154
155 1. Make new folder `/var/www/tazpanel/styles/colorful`.
156 2. Copy all stuff from default TazPanel theme:
157
158 cp /var/www/tazpanel/styles/default/* /var/www/tazpanel/styles/colorful
159
160 3. Put your icons into sub-folder (for example, `icons`).
161 4. Edit CSS styles relating to the icons in the `base.css` and `tweaks.css`:
162 change all the CSS rules with "data-icon" or "data-img" to your rules as it
163 was shown before:
164
165 [data-icon="back"]::before, [data-img="back"]::before {
166 content: url('icons/back.png');
167 }
168
169 And so on.
170 5. Change icon theme to 'colorful' inside the TazPanel and open test.cgi
171 (available in the "tazpanel-extra" package): <http://tazpanel:82/test.cgi>
172 6. Share your theme with other SliTaz users :-)