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