none
[openafs-wiki.git] / TWiki / TWikiDocGraphics.mdwn
1 # <a name="TWiki Documentation Graphics"></a> TWiki Documentation Graphics
2
3 This is one way to create a library of common icons, accessible through user-defined [[TWikiVariables]] set in [[WebPreferences]], or in [[TWikiPreferences]] for site-wide use.
4
5 There are other approaches as well:
6
7 - In any topic, write `%PUBURL%/%TWIKIWEB%/%TOPIC%/help.gif` to show the ![help.gif](http://www.dementia.org/twiki//view/TWiki/%TOPIC%/help.gif) icon
8 - The TWiki:Plugins/TopicVarsPlugin lets you set variables in any topic, not just in [[WebPreferences]], for use in the same topic
9 - The TWiki:Plugins/SmiliesPlugin, using a different short hand than `%VARIABLES%`, may be worth checking out for extended use
10 - **_Related:_** TWiki's [[FileAttachments]] show their own icons for many different file types. As documented in [[TWikiVariables]], write `%ICON{"pdf"}%` to show the <img src="http://www.dementia.org/twiki//view/Main/WebHome/pdf.gif" width="16" height="16" alt="pdf" /> icon
11
12 In this example, %TOPIC% - this topic - acts as the icon library. Graphics are uploaded and displayed. Then, the paths are set in [[TWiki.TWikiPreferences#DocGraphics|TWiki/TWikiPreferences#DocGraphics]] for site-wide access. You can also create individual library pages in each web. And you don't have to restrict yourself to graphics: Preferences Variables can include text and links to any type of file.
13
14 <table border="1" cellpadding="0" cellspacing="0">
15   <tr>
16     <th bgcolor="#99CCCC"><strong> Icon </strong></th>
17     <th bgcolor="#99CCCC"><strong> File Name </strong></th>
18     <th bgcolor="#99CCCC"><strong> Comment </strong></th>
19   </tr>
20   <tr>
21     <td align="center"><img alt="help.gif" height="16" src="http://www.dementia.org/twiki//view/help.gif" width="16" /></td>
22     <td><code>help.gif</code></td>
23     <td> Help </td>
24   </tr>
25   <tr>
26     <td align="center"><img alt="note.gif" height="16" src="http://www.dementia.org/twiki//view/note.gif" width="16" /></td>
27     <td><code>note.gif</code></td>
28     <td> Note </td>
29   </tr>
30   <tr>
31     <td align="center"><img alt="bubble.gif" height="16" src="http://www.dementia.org/twiki//view/bubble.gif" width="16" /></td>
32     <td><code>bubble.gif</code></td>
33     <td> Speech bubble </td>
34   </tr>
35   <tr>
36     <td align="center"><img alt="tip.gif" height="16" src="http://www.dementia.org/twiki//view/tip.gif" width="16" /></td>
37     <td><code>tip.gif</code></td>
38     <td> Tip / Idea </td>
39   </tr>
40   <tr>
41     <td align="center"><img alt="warning.gif" height="16" src="http://www.dementia.org/twiki//view/warning.gif" width="16" /></td>
42     <td><code>warning.gif</code></td>
43     <td> Warning / Important </td>
44   </tr>
45   <tr>
46     <td align="center"><img alt="stop.gif" height="16" src="http://www.dementia.org/twiki//view/stop.gif" width="16" /></td>
47     <td><code>stop.gif</code></td>
48     <td> Stop </td>
49   </tr>
50   <tr>
51     <td align="center"><img alt="target.gif" height="16" src="http://www.dementia.org/twiki//view/target.gif" width="16" /></td>
52     <td><code>target.gif</code></td>
53     <td> Blue target </td>
54   </tr>
55   <tr>
56     <td align="center"><img alt="pencil.gif" height="16" src="http://www.dementia.org/twiki//view/pencil.gif" width="16" /></td>
57     <td><code>pencil.gif</code></td>
58     <td> Refactor / Edit </td>
59   </tr>
60   <tr>
61     <td align="center"><img alt="choice-yes.gif" height="16" src="http://www.dementia.org/twiki//view/choice-yes.gif" width="16" /></td>
62     <td><code>choice-yes.gif</code></td>
63     <td> Yes / Done </td>
64   </tr>
65   <tr>
66     <td align="center"><img alt="choice-no.gif" height="16" src="http://www.dementia.org/twiki//view/choice-no.gif" width="16" /></td>
67     <td><code>choice-no.gif</code></td>
68     <td> No </td>
69   </tr>
70   <tr>
71     <td align="center"><img alt="choice-cancel.gif" height="16" src="http://www.dementia.org/twiki//view/choice-cancel.gif" width="16" /></td>
72     <td><code>choice-cancel.gif</code></td>
73     <td> Cancel </td>
74   </tr>
75   <tr>
76     <td align="center"><img alt="updated.gif" height="8" src="http://www.dementia.org/twiki//view/updated.gif" width="56" /></td>
77     <td><code>updated.gif</code></td>
78     <td> Updated </td>
79   </tr>
80   <tr>
81     <td align="center"><img alt="new.gif" height="8" src="http://www.dementia.org/twiki//view/new.gif" width="28" /></td>
82     <td><code>new.gif</code></td>
83     <td> New </td>
84   </tr>
85   <tr>
86     <td align="center"><img alt="starred.gif" height="16" src="http://www.dementia.org/twiki//view/starred.gif" width="16" /></td>
87     <td><code>starred.gif</code></td>
88     <td> Highlight (positive) </td>
89   </tr>
90   <tr>
91     <td align="center"><img alt="stargold.gif" height="16" src="http://www.dementia.org/twiki//view/stargold.gif" width="16" /></td>
92     <td><code>stargold.gif</code></td>
93     <td> Favorites (gold star) </td>
94   </tr>
95   <tr>
96     <td align="center"><img alt="hand.gif" height="16" src="http://www.dementia.org/twiki//view/hand.gif" width="16" /></td>
97     <td><code>hand.gif</code></td>
98     <td> Pointing hand </td>
99   </tr>
100   <tr>
101     <td align="center"><img alt="arrowleft.gif" height="16" src="http://www.dementia.org/twiki//view/arrowleft.gif" width="16" /></td>
102     <td><code>arrowleft.gif</code></td>
103     <td> Arrow red left </td>
104   </tr>
105   <tr>
106     <td align="center"><img alt="arrowright.gif" height="16" src="http://www.dementia.org/twiki//view/arrowright.gif" width="16" /></td>
107     <td><code>arrowright.gif</code></td>
108     <td> Arrow red right </td>
109   </tr>
110   <tr>
111     <td align="center"><img alt="arrowup.gif" height="16" src="http://www.dementia.org/twiki//view/arrowup.gif" width="16" /></td>
112     <td><code>arrowup.gif</code></td>
113     <td> Arrow red up </td>
114   </tr>
115   <tr>
116     <td align="center"><img alt="arrowdown.gif" height="16" src="http://www.dementia.org/twiki//view/arrowdown.gif" width="16" /></td>
117     <td><code>arrowdown.gif</code></td>
118     <td> Arrow red down </td>
119   </tr>
120   <tr>
121     <td align="center"><img alt="arrowbleft.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbleft.gif" width="16" /></td>
122     <td><code>arrowbleft.gif</code></td>
123     <td> Arrow blue left </td>
124   </tr>
125   <tr>
126     <td align="center"><img alt="arrowbright.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbright.gif" width="16" /></td>
127     <td><code>arrowbright.gif</code></td>
128     <td> Arrow blue right </td>
129   </tr>
130   <tr>
131     <td align="center"><img alt="arrowbup.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbup.gif" width="16" /></td>
132     <td><code>arrowbup.gif</code></td>
133     <td> Arrow blue up </td>
134   </tr>
135   <tr>
136     <td align="center"><img alt="arrowbdown.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbdown.gif" width="16" /></td>
137     <td><code>arrowbdown.gif</code></td>
138     <td> Arrow blue down </td>
139   </tr>
140   <tr>
141     <td align="center"><img alt="arrowdot.gif" height="16" src="http://www.dementia.org/twiki//view/arrowdot.gif" width="16" /></td>
142     <td><code>arrowdot.gif</code></td>
143     <td> Meet here (arrows to red dot) </td>
144   </tr>
145   <tr>
146     <td align="center"><img alt="go_start.gif" height="16" src="http://www.dementia.org/twiki//view/go_start.gif" width="16" /></td>
147     <td><code>go_start.gif</code></td>
148     <td> Go start </td>
149   </tr>
150   <tr>
151     <td align="center"><img alt="go_fb.gif" height="16" src="http://www.dementia.org/twiki//view/go_fb.gif" width="16" /></td>
152     <td><code>go_fb.gif</code></td>
153     <td> Go fast back </td>
154   </tr>
155   <tr>
156     <td align="center"><img alt="go_back.gif" height="16" src="http://www.dementia.org/twiki//view/go_back.gif" width="16" /></td>
157     <td><code>go_back.gif</code></td>
158     <td> Go back </td>
159   </tr>
160   <tr>
161     <td align="center"><img alt="go_forward.gif" height="16" src="http://www.dementia.org/twiki//view/go_forward.gif" width="16" /></td>
162     <td><code>go_forward.gif</code></td>
163     <td> Go forward </td>
164   </tr>
165   <tr>
166     <td align="center"><img alt="go_ff.gif" height="16" src="http://www.dementia.org/twiki//view/go_ff.gif" width="16" /></td>
167     <td><code>go_ff.gif</code></td>
168     <td> Go fast forward </td>
169   </tr>
170   <tr>
171     <td align="center"><img alt="go_end.gif" height="16" src="http://www.dementia.org/twiki//view/go_end.gif" width="16" /></td>
172     <td><code>go_end.gif</code></td>
173     <td> Go end </td>
174   </tr>
175   <tr>
176     <td align="center"><img alt="wip.gif" height="16" src="http://www.dementia.org/twiki//view/wip.gif" width="16" /></td>
177     <td><code>wip.gif</code></td>
178     <td> Work in progress </td>
179   </tr>
180   <tr>
181     <td align="center"><img alt="rfc.gif" height="16" src="http://www.dementia.org/twiki//view/rfc.gif" width="16" /></td>
182     <td><code>rfc.gif</code></td>
183     <td> Request for comments </td>
184   </tr>
185   <tr>
186     <td align="center"><img alt="days.gif" height="16" src="http://www.dementia.org/twiki//view/days.gif" width="16" /></td>
187     <td><code>days.gif</code></td>
188     <td> Days </td>
189   </tr>
190   <tr>
191     <td align="center"><img alt="hourglass.gif" height="16" src="http://www.dementia.org/twiki//view/hourglass.gif" width="16" /></td>
192     <td><code>hourglass.gif</code></td>
193     <td> Hour glass </td>
194   </tr>
195   <tr>
196     <td align="center"><img alt="watch.gif" height="16" src="http://www.dementia.org/twiki//view/watch.gif" width="16" /></td>
197     <td><code>watch.gif</code></td>
198     <td> Watch </td>
199   </tr>
200   <tr>
201     <td align="center"><img alt="globe.gif" height="16" src="http://www.dementia.org/twiki//view/globe.gif" width="16" /></td>
202     <td><code>globe.gif</code></td>
203     <td> Globe </td>
204   </tr>
205   <tr>
206     <td align="center"><img alt="home.gif" height="16" src="http://www.dementia.org/twiki//view/home.gif" width="16" /></td>
207     <td><code>home.gif</code></td>
208     <td> Home </td>
209   </tr>
210   <tr>
211     <td align="center"><img alt="group.gif" height="16" src="http://www.dementia.org/twiki//view/group.gif" width="16" /></td>
212     <td><code>group.gif</code></td>
213     <td> Group </td>
214   </tr>
215   <tr>
216     <td align="center"><img alt="person.gif" height="16" src="http://www.dementia.org/twiki//view/person.gif" width="16" /></td>
217     <td><code>person.gif</code></td>
218     <td> Person </td>
219   </tr>
220   <tr>
221     <td align="center"><img alt="persons.gif" height="16" src="http://www.dementia.org/twiki//view/persons.gif" width="16" /></td>
222     <td><code>persons.gif</code></td>
223     <td> Persons </td>
224   </tr>
225   <tr>
226     <td align="center"><img alt="lock.gif" height="16" src="http://www.dementia.org/twiki//view/lock.gif" width="16" /></td>
227     <td><code>lock.gif</code></td>
228     <td> Lock </td>
229   </tr>
230   <tr>
231     <td align="center"><img alt="folder.gif" height="16" src="http://www.dementia.org/twiki//view/folder.gif" width="16" /></td>
232     <td><code>folder.gif</code></td>
233     <td> Folder </td>
234   </tr>
235   <tr>
236     <td align="center"><img alt="lockfolder.gif" height="16" src="http://www.dementia.org/twiki//view/lockfolder.gif" width="16" /></td>
237     <td><code>lockfolder.gif</code></td>
238     <td> Locked folder </td>
239   </tr>
240   <tr>
241     <td align="center"><img alt="lockfoldergray.gif" height="16" src="http://www.dementia.org/twiki//view/lockfoldergray.gif" width="16" /></td>
242     <td><code>lockfoldergray.gif</code></td>
243     <td> Locked folder, gray </td>
244   </tr>
245   <tr>
246     <td align="center"><img alt="locktopic.gif" height="16" src="http://www.dementia.org/twiki//view/locktopic.gif" width="16" /></td>
247     <td><code>locktopic.gif</code></td>
248     <td> Locked topic </td>
249   </tr>
250   <tr>
251     <td align="center"><img alt="locktopicgray.gif" height="16" src="http://www.dementia.org/twiki//view/locktopicgray.gif" width="16" /></td>
252     <td><code>locktopicgray.gif</code></td>
253     <td> Locked topic, gray </td>
254   </tr>
255   <tr>
256     <td align="center"><img alt="refreshtopic.gif" height="16" src="http://www.dementia.org/twiki//view/refreshtopic.gif" width="16" /></td>
257     <td><code>refreshtopic.gif</code></td>
258     <td> Refresh topic </td>
259   </tr>
260   <tr>
261     <td align="center"><img alt="viewtopic.gif" height="16" src="http://www.dementia.org/twiki//view/viewtopic.gif" width="16" /></td>
262     <td><code>viewtopic.gif</code></td>
263     <td> View topic </td>
264   </tr>
265   <tr>
266     <td align="center"><img alt="edittopic.gif" height="16" src="http://www.dementia.org/twiki//view/edittopic.gif" width="16" /></td>
267     <td><code>edittopic.gif</code></td>
268     <td> Edit topic </td>
269   </tr>
270   <tr>
271     <td align="center"><img alt="topicdiffs.gif" height="16" src="http://www.dementia.org/twiki//view/topicdiffs.gif" width="16" /></td>
272     <td><code>topicdiffs.gif</code></td>
273     <td> Topic difference </td>
274   </tr>
275   <tr>
276     <td align="center"><img alt="topicbacklinks.gif" height="16" src="http://www.dementia.org/twiki//view/topicbacklinks.gif" width="16" /></td>
277     <td><code>topicbacklinks.gif</code></td>
278     <td> Topic back-links </td>
279   </tr>
280   <tr>
281     <td align="center"><img alt="newtopic.gif" height="16" src="http://www.dementia.org/twiki//view/newtopic.gif" width="16" /></td>
282     <td><code>newtopic.gif</code></td>
283     <td> New topic </td>
284   </tr>
285   <tr>
286     <td align="center"><img alt="searchtopic.gif" height="16" src="http://www.dementia.org/twiki//view/searchtopic.gif" width="16" /></td>
287     <td><code>searchtopic.gif</code></td>
288     <td> Search topic </td>
289   </tr>
290   <tr>
291     <td align="center"><img alt="printtopic.gif" height="16" src="http://www.dementia.org/twiki//view/printtopic.gif" width="16" /></td>
292     <td><code>printtopic.gif</code></td>
293     <td> Print topic </td>
294   </tr>
295   <tr>
296     <td align="center"><img alt="attachfile.gif" height="16" src="http://www.dementia.org/twiki//view/attachfile.gif" width="16" /></td>
297     <td><code>attachfile.gif</code></td>
298     <td> Attach file </td>
299   </tr>
300   <tr>
301     <td align="center"><img alt="recentchanges.gif" height="16" src="http://www.dementia.org/twiki//view/recentchanges.gif" width="16" /></td>
302     <td><code>recentchanges.gif</code></td>
303     <td> Recent changes </td>
304   </tr>
305   <tr>
306     <td align="center"><img alt="changes.gif" height="16" src="http://www.dementia.org/twiki//view/changes.gif" width="16" /></td>
307     <td><code>changes.gif</code></td>
308     <td> Changes </td>
309   </tr>
310   <tr>
311     <td align="center"><img alt="notify.gif" height="16" src="http://www.dementia.org/twiki//view/notify.gif" width="16" /></td>
312     <td><code>notify.gif</code></td>
313     <td> Notify </td>
314   </tr>
315   <tr>
316     <td align="center"><img alt="mail.gif" height="16" src="http://www.dementia.org/twiki//view/mail.gif" width="16" /></td>
317     <td><code>mail.gif</code></td>
318     <td> Mail </td>
319   </tr>
320   <tr>
321     <td align="center"><img alt="trash.gif" height="16" src="http://www.dementia.org/twiki//view/trash.gif" width="16" /></td>
322     <td><code>trash.gif</code></td>
323     <td> Trash </td>
324   </tr>
325   <tr>
326     <td align="center"><img alt="empty.gif" height="16" src="http://www.dementia.org/twiki//view/empty.gif" width="16" /></td>
327     <td><code>empty.gif</code></td>
328     <td> Empty transparent 16x16 spacer </td>
329   </tr>
330   <tr>
331     <td align="center"><img alt="line_ud.gif" height="16" src="http://www.dementia.org/twiki//view/line_ud.gif" width="16" /></td>
332     <td><code>line_ud.gif</code></td>
333     <td> Line graph up-down </td>
334   </tr>
335   <tr>
336     <td align="center"><img alt="line_lr.gif" height="16" src="http://www.dementia.org/twiki//view/line_lr.gif" width="16" /></td>
337     <td><code>line_lr.gif</code></td>
338     <td> Line graph left-right </td>
339   </tr>
340   <tr>
341     <td align="center"><img alt="line_udlr.gif" height="16" src="http://www.dementia.org/twiki//view/line_udlr.gif" width="16" /></td>
342     <td><code>line_udlr.gif</code></td>
343     <td> Line graph up-down-left-right </td>
344   </tr>
345   <tr>
346     <td align="center"><img alt="line_ur.gif" height="16" src="http://www.dementia.org/twiki//view/line_ur.gif" width="16" /></td>
347     <td><code>line_ur.gif</code></td>
348     <td> Line graph up-right </td>
349   </tr>
350   <tr>
351     <td align="center"><img alt="line_rd.gif" height="16" src="http://www.dementia.org/twiki//view/line_rd.gif" width="16" /></td>
352     <td><code>line_rd.gif</code></td>
353     <td> Line graph right-down </td>
354   </tr>
355   <tr>
356     <td align="center"><img alt="line_ld.gif" height="16" src="http://www.dementia.org/twiki//view/line_ld.gif" width="16" /></td>
357     <td><code>line_ld.gif</code></td>
358     <td> Line graph left-down </td>
359   </tr>
360   <tr>
361     <td align="center"><img alt="line_ul.gif" height="16" src="http://www.dementia.org/twiki//view/line_ul.gif" width="16" /></td>
362     <td><code>line_ul.gif</code></td>
363     <td> Line graph up-left </td>
364   </tr>
365   <tr>
366     <td align="center"><img alt="line_udr.gif" height="16" src="http://www.dementia.org/twiki//view/line_udr.gif" width="16" /></td>
367     <td><code>line_udr.gif</code></td>
368     <td> Line graph up-down-right </td>
369   </tr>
370   <tr>
371     <td align="center"><img alt="line_lrd.gif" height="16" src="http://www.dementia.org/twiki//view/line_lrd.gif" width="16" /></td>
372     <td><code>line_lrd.gif</code></td>
373     <td> Line graph left-right-down </td>
374   </tr>
375   <tr>
376     <td align="center"><img alt="line_udl.gif" height="16" src="http://www.dementia.org/twiki//view/line_udl.gif" width="16" /></td>
377     <td><code>line_udl.gif</code></td>
378     <td> Line graph up-down-left </td>
379   </tr>
380   <tr>
381     <td align="center"><img alt="line_ulr.gif" height="16" src="http://www.dementia.org/twiki//view/line_ulr.gif" width="16" /></td>
382     <td><code>line_ulr.gif</code></td>
383     <td> Line graph up-left-right </td>
384   </tr>
385   <tr>
386     <td align="center"><img alt="dot_ud.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ud.gif" width="16" /></td>
387     <td><code>dot_ud.gif</code></td>
388     <td> Dot graph up-down </td>
389   </tr>
390   <tr>
391     <td align="center"><img alt="dot_lr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_lr.gif" width="16" /></td>
392     <td><code>dot_lr.gif</code></td>
393     <td> Dot graph left-right </td>
394   </tr>
395   <tr>
396     <td align="center"><img alt="dot_udlr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udlr.gif" width="16" /></td>
397     <td><code>dot_udlr.gif</code></td>
398     <td> Dot graph up-down-left-right </td>
399   </tr>
400   <tr>
401     <td align="center"><img alt="dot_ur.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ur.gif" width="16" /></td>
402     <td><code>dot_ur.gif</code></td>
403     <td> Dot graph up-right </td>
404   </tr>
405   <tr>
406     <td align="center"><img alt="dot_rd.gif" height="16" src="http://www.dementia.org/twiki//view/dot_rd.gif" width="16" /></td>
407     <td><code>dot_rd.gif</code></td>
408     <td> Dot graph right-down </td>
409   </tr>
410   <tr>
411     <td align="center"><img alt="dot_ld.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ld.gif" width="16" /></td>
412     <td><code>dot_ld.gif</code></td>
413     <td> Dot graph left-down </td>
414   </tr>
415   <tr>
416     <td align="center"><img alt="dot_ul.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ul.gif" width="16" /></td>
417     <td><code>dot_ul.gif</code></td>
418     <td> Dot graph up-left </td>
419   </tr>
420   <tr>
421     <td align="center"><img alt="dot_udr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udr.gif" width="16" /></td>
422     <td><code>dot_udr.gif</code></td>
423     <td> Dot graph up-down-right </td>
424   </tr>
425   <tr>
426     <td align="center"><img alt="dot_lrd.gif" height="16" src="http://www.dementia.org/twiki//view/dot_lrd.gif" width="16" /></td>
427     <td><code>dot_lrd.gif</code></td>
428     <td> Dot graph left-right-down </td>
429   </tr>
430   <tr>
431     <td align="center"><img alt="dot_udl.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udl.gif" width="16" /></td>
432     <td><code>dot_udl.gif</code></td>
433     <td> Dot graph up-down-left </td>
434   </tr>
435   <tr>
436     <td align="center"><img alt="dot_ulr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ulr.gif" width="16" /></td>
437     <td><code>dot_ulr.gif</code></td>
438     <td> Dot graph up-left-right </td>
439   </tr>
440 </table>
441
442 -- TWiki:Main.PeterThoeny - 23 Mar 2004 %BR% -- TWiki:Main.MikeMannix - 16 May 2002