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="arrowleft.gif" height="16" src="http://www.dementia.org/twiki//view/arrowleft.gif" width="16" /></td>
  97     <td><code>arrowleft.gif</code></td>
  98     <td> Arrow red left </td>
  99   </tr>
 100   <tr>
 101     <td align="center"><img alt="arrowright.gif" height="16" src="http://www.dementia.org/twiki//view/arrowright.gif" width="16" /></td>
 102     <td><code>arrowright.gif</code></td>
 103     <td> Arrow red right </td>
 104   </tr>
 105   <tr>
 106     <td align="center"><img alt="arrowup.gif" height="16" src="http://www.dementia.org/twiki//view/arrowup.gif" width="16" /></td>
 107     <td><code>arrowup.gif</code></td>
 108     <td> Arrow red up </td>
 109   </tr>
 110   <tr>
 111     <td align="center"><img alt="arrowdown.gif" height="16" src="http://www.dementia.org/twiki//view/arrowdown.gif" width="16" /></td>
 112     <td><code>arrowdown.gif</code></td>
 113     <td> Arrow red down </td>
 114   </tr>
 115   <tr>
 116     <td align="center"><img alt="arrowbleft.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbleft.gif" width="16" /></td>
 117     <td><code>arrowbleft.gif</code></td>
 118     <td> Arrow blue left </td>
 119   </tr>
 120   <tr>
 121     <td align="center"><img alt="arrowbright.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbright.gif" width="16" /></td>
 122     <td><code>arrowbright.gif</code></td>
 123     <td> Arrow blue right </td>
 124   </tr>
 125   <tr>
 126     <td align="center"><img alt="arrowbup.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbup.gif" width="16" /></td>
 127     <td><code>arrowbup.gif</code></td>
 128     <td> Arrow blue up </td>
 129   </tr>
 130   <tr>
 131     <td align="center"><img alt="arrowbdown.gif" height="16" src="http://www.dementia.org/twiki//view/arrowbdown.gif" width="16" /></td>
 132     <td><code>arrowbdown.gif</code></td>
 133     <td> Arrow blue down </td>
 134   </tr>
 135   <tr>
 136     <td align="center"><img alt="arrowdot.gif" height="16" src="http://www.dementia.org/twiki//view/arrowdot.gif" width="16" /></td>
 137     <td><code>arrowdot.gif</code></td>
 138     <td> Meet here (arrows to red dot) </td>
 139   </tr>
 140   <tr>
 141     <td align="center"><img alt="go_start.gif" height="16" src="http://www.dementia.org/twiki//view/go_start.gif" width="16" /></td>
 142     <td><code>go_start.gif</code></td>
 143     <td> Go start </td>
 144   </tr>
 145   <tr>
 146     <td align="center"><img alt="go_fb.gif" height="16" src="http://www.dementia.org/twiki//view/go_fb.gif" width="16" /></td>
 147     <td><code>go_fb.gif</code></td>
 148     <td> Go fast back </td>
 149   </tr>
 150   <tr>
 151     <td align="center"><img alt="go_back.gif" height="16" src="http://www.dementia.org/twiki//view/go_back.gif" width="16" /></td>
 152     <td><code>go_back.gif</code></td>
 153     <td> Go back </td>
 154   </tr>
 155   <tr>
 156     <td align="center"><img alt="go_forward.gif" height="16" src="http://www.dementia.org/twiki//view/go_forward.gif" width="16" /></td>
 157     <td><code>go_forward.gif</code></td>
 158     <td> Go forward </td>
 159   </tr>
 160   <tr>
 161     <td align="center"><img alt="go_ff.gif" height="16" src="http://www.dementia.org/twiki//view/go_ff.gif" width="16" /></td>
 162     <td><code>go_ff.gif</code></td>
 163     <td> Go fast forward </td>
 164   </tr>
 165   <tr>
 166     <td align="center"><img alt="go_end.gif" height="16" src="http://www.dementia.org/twiki//view/go_end.gif" width="16" /></td>
 167     <td><code>go_end.gif</code></td>
 168     <td> Go end </td>
 169   </tr>
 170   <tr>
 171     <td align="center"><img alt="wip.gif" height="16" src="http://www.dementia.org/twiki//view/wip.gif" width="16" /></td>
 172     <td><code>wip.gif</code></td>
 173     <td> Work in progress </td>
 174   </tr>
 175   <tr>
 176     <td align="center"><img alt="rfc.gif" height="16" src="http://www.dementia.org/twiki//view/rfc.gif" width="16" /></td>
 177     <td><code>rfc.gif</code></td>
 178     <td> Request for comments </td>
 179   </tr>
 180   <tr>
 181     <td align="center"><img alt="days.gif" height="16" src="http://www.dementia.org/twiki//view/days.gif" width="16" /></td>
 182     <td><code>days.gif</code></td>
 183     <td> Days </td>
 184   </tr>
 185   <tr>
 186     <td align="center"><img alt="hourglass.gif" height="16" src="http://www.dementia.org/twiki//view/hourglass.gif" width="16" /></td>
 187     <td><code>hourglass.gif</code></td>
 188     <td> Hour glass </td>
 189   </tr>
 190   <tr>
 191     <td align="center"><img alt="watch.gif" height="16" src="http://www.dementia.org/twiki//view/watch.gif" width="16" /></td>
 192     <td><code>watch.gif</code></td>
 193     <td> Watch </td>
 194   </tr>
 195   <tr>
 196     <td align="center"><img alt="globe.gif" height="16" src="http://www.dementia.org/twiki//view/globe.gif" width="16" /></td>
 197     <td><code>globe.gif</code></td>
 198     <td> Globe </td>
 199   </tr>
 200   <tr>
 201     <td align="center"><img alt="lock.gif" height="16" src="http://www.dementia.org/twiki//view/lock.gif" width="16" /></td>
 202     <td><code>lock.gif</code></td>
 203     <td> Lock </td>
 204   </tr>
 205   <tr>
 206     <td align="center"><img alt="folder.gif" height="16" src="http://www.dementia.org/twiki//view/folder.gif" width="16" /></td>
 207     <td><code>folder.gif</code></td>
 208     <td> Folder </td>
 209   </tr>
 210   <tr>
 211     <td align="center"><img alt="lockfolder.gif" height="16" src="http://www.dementia.org/twiki//view/lockfolder.gif" width="16" /></td>
 212     <td><code>lockfolder.gif</code></td>
 213     <td> Locked folder </td>
 214   </tr>
 215   <tr>
 216     <td align="center"><img alt="lockfoldergray.gif" height="16" src="http://www.dementia.org/twiki//view/lockfoldergray.gif" width="16" /></td>
 217     <td><code>lockfoldergray.gif</code></td>
 218     <td> Locked folder, gray </td>
 219   </tr>
 220   <tr>
 221     <td align="center"><img alt="locktopic.gif" height="16" src="http://www.dementia.org/twiki//view/locktopic.gif" width="16" /></td>
 222     <td><code>locktopic.gif</code></td>
 223     <td> Locked topic </td>
 224   </tr>
 225   <tr>
 226     <td align="center"><img alt="locktopicgray.gif" height="16" src="http://www.dementia.org/twiki//view/locktopicgray.gif" width="16" /></td>
 227     <td><code>locktopicgray.gif</code></td>
 228     <td> Locked topic, gray </td>
 229   </tr>
 230   <tr>
 231     <td align="center"><img alt="refreshtopic.gif" height="16" src="http://www.dementia.org/twiki//view/refreshtopic.gif" width="16" /></td>
 232     <td><code>refreshtopic.gif</code></td>
 233     <td> Refresh topic </td>
 234   </tr>
 235   <tr>
 236     <td align="center"><img alt="viewtopic.gif" height="16" src="http://www.dementia.org/twiki//view/viewtopic.gif" width="16" /></td>
 237     <td><code>viewtopic.gif</code></td>
 238     <td> View topic </td>
 239   </tr>
 240   <tr>
 241     <td align="center"><img alt="edittopic.gif" height="16" src="http://www.dementia.org/twiki//view/edittopic.gif" width="16" /></td>
 242     <td><code>edittopic.gif</code></td>
 243     <td> Edit topic </td>
 244   </tr>
 245   <tr>
 246     <td align="center"><img alt="topicdiffs.gif" height="16" src="http://www.dementia.org/twiki//view/topicdiffs.gif" width="16" /></td>
 247     <td><code>topicdiffs.gif</code></td>
 248     <td> Topic difference </td>
 249   </tr>
 250   <tr>
 251     <td align="center"><img alt="topicbacklinks.gif" height="16" src="http://www.dementia.org/twiki//view/topicbacklinks.gif" width="16" /></td>
 252     <td><code>topicbacklinks.gif</code></td>
 253     <td> Topic back-links </td>
 254   </tr>
 255   <tr>
 256     <td align="center"><img alt="newtopic.gif" height="16" src="http://www.dementia.org/twiki//view/newtopic.gif" width="16" /></td>
 257     <td><code>newtopic.gif</code></td>
 258     <td> New topic </td>
 259   </tr>
 260   <tr>
 261     <td align="center"><img alt="searchtopic.gif" height="16" src="http://www.dementia.org/twiki//view/searchtopic.gif" width="16" /></td>
 262     <td><code>searchtopic.gif</code></td>
 263     <td> Search topic </td>
 264   </tr>
 265   <tr>
 266     <td align="center"><img alt="printtopic.gif" height="16" src="http://www.dementia.org/twiki//view/printtopic.gif" width="16" /></td>
 267     <td><code>printtopic.gif</code></td>
 268     <td> Print topic </td>
 269   </tr>
 270   <tr>
 271     <td align="center"><img alt="attachfile.gif" height="16" src="http://www.dementia.org/twiki//view/attachfile.gif" width="16" /></td>
 272     <td><code>attachfile.gif</code></td>
 273     <td> Attach file </td>
 274   </tr>
 275   <tr>
 276     <td align="center"><img alt="home.gif" height="16" src="http://www.dementia.org/twiki//view/home.gif" width="16" /></td>
 277     <td><code>home.gif</code></td>
 278     <td> Home </td>
 279   </tr>
 280   <tr>
 281     <td align="center"><img alt="recentchanges.gif" height="16" src="http://www.dementia.org/twiki//view/recentchanges.gif" width="16" /></td>
 282     <td><code>recentchanges.gif</code></td>
 283     <td> Recent changes </td>
 284   </tr>
 285   <tr>
 286     <td align="center"><img alt="changes.gif" height="16" src="http://www.dementia.org/twiki//view/changes.gif" width="16" /></td>
 287     <td><code>changes.gif</code></td>
 288     <td> Changes </td>
 289   </tr>
 290   <tr>
 291     <td align="center"><img alt="notify.gif" height="16" src="http://www.dementia.org/twiki//view/notify.gif" width="16" /></td>
 292     <td><code>notify.gif</code></td>
 293     <td> Notify </td>
 294   </tr>
 295   <tr>
 296     <td align="center"><img alt="mail.gif" height="16" src="http://www.dementia.org/twiki//view/mail.gif" width="16" /></td>
 297     <td><code>mail.gif</code></td>
 298     <td> Mail </td>
 299   </tr>
 300   <tr>
 301     <td align="center"><img alt="trash.gif" height="16" src="http://www.dementia.org/twiki//view/trash.gif" width="16" /></td>
 302     <td><code>trash.gif</code></td>
 303     <td> Trash </td>
 304   </tr>
 305   <tr>
 306     <td align="center"><img alt="empty.gif" height="16" src="http://www.dementia.org/twiki//view/empty.gif" width="16" /></td>
 307     <td><code>empty.gif</code></td>
 308     <td> Empty transparent 16x16 spacer </td>
 309   </tr>
 310   <tr>
 311     <td align="center"><img alt="line_ud.gif" height="16" src="http://www.dementia.org/twiki//view/line_ud.gif" width="16" /></td>
 312     <td><code>line_ud.gif</code></td>
 313     <td> Line graph up-down </td>
 314   </tr>
 315   <tr>
 316     <td align="center"><img alt="line_lr.gif" height="16" src="http://www.dementia.org/twiki//view/line_lr.gif" width="16" /></td>
 317     <td><code>line_lr.gif</code></td>
 318     <td> Line graph left-right </td>
 319   </tr>
 320   <tr>
 321     <td align="center"><img alt="line_udlr.gif" height="16" src="http://www.dementia.org/twiki//view/line_udlr.gif" width="16" /></td>
 322     <td><code>line_udlr.gif</code></td>
 323     <td> Line graph up-down-left-right </td>
 324   </tr>
 325   <tr>
 326     <td align="center"><img alt="line_ur.gif" height="16" src="http://www.dementia.org/twiki//view/line_ur.gif" width="16" /></td>
 327     <td><code>line_ur.gif</code></td>
 328     <td> Line graph up-right </td>
 329   </tr>
 330   <tr>
 331     <td align="center"><img alt="line_rd.gif" height="16" src="http://www.dementia.org/twiki//view/line_rd.gif" width="16" /></td>
 332     <td><code>line_rd.gif</code></td>
 333     <td> Line graph right-down </td>
 334   </tr>
 335   <tr>
 336     <td align="center"><img alt="line_ld.gif" height="16" src="http://www.dementia.org/twiki//view/line_ld.gif" width="16" /></td>
 337     <td><code>line_ld.gif</code></td>
 338     <td> Line graph left-down </td>
 339   </tr>
 340   <tr>
 341     <td align="center"><img alt="line_ul.gif" height="16" src="http://www.dementia.org/twiki//view/line_ul.gif" width="16" /></td>
 342     <td><code>line_ul.gif</code></td>
 343     <td> Line graph up-left </td>
 344   </tr>
 345   <tr>
 346     <td align="center"><img alt="line_udr.gif" height="16" src="http://www.dementia.org/twiki//view/line_udr.gif" width="16" /></td>
 347     <td><code>line_udr.gif</code></td>
 348     <td> Line graph up-down-right </td>
 349   </tr>
 350   <tr>
 351     <td align="center"><img alt="line_lrd.gif" height="16" src="http://www.dementia.org/twiki//view/line_lrd.gif" width="16" /></td>
 352     <td><code>line_lrd.gif</code></td>
 353     <td> Line graph left-right-down </td>
 354   </tr>
 355   <tr>
 356     <td align="center"><img alt="line_udl.gif" height="16" src="http://www.dementia.org/twiki//view/line_udl.gif" width="16" /></td>
 357     <td><code>line_udl.gif</code></td>
 358     <td> Line graph up-down-left </td>
 359   </tr>
 360   <tr>
 361     <td align="center"><img alt="line_ulr.gif" height="16" src="http://www.dementia.org/twiki//view/line_ulr.gif" width="16" /></td>
 362     <td><code>line_ulr.gif</code></td>
 363     <td> Line graph up-left-right </td>
 364   </tr>
 365   <tr>
 366     <td align="center"><img alt="dot_ud.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ud.gif" width="16" /></td>
 367     <td><code>dot_ud.gif</code></td>
 368     <td> Dot graph up-down </td>
 369   </tr>
 370   <tr>
 371     <td align="center"><img alt="dot_lr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_lr.gif" width="16" /></td>
 372     <td><code>dot_lr.gif</code></td>
 373     <td> Dot graph left-right </td>
 374   </tr>
 375   <tr>
 376     <td align="center"><img alt="dot_udlr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udlr.gif" width="16" /></td>
 377     <td><code>dot_udlr.gif</code></td>
 378     <td> Dot graph up-down-left-right </td>
 379   </tr>
 380   <tr>
 381     <td align="center"><img alt="dot_ur.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ur.gif" width="16" /></td>
 382     <td><code>dot_ur.gif</code></td>
 383     <td> Dot graph up-right </td>
 384   </tr>
 385   <tr>
 386     <td align="center"><img alt="dot_rd.gif" height="16" src="http://www.dementia.org/twiki//view/dot_rd.gif" width="16" /></td>
 387     <td><code>dot_rd.gif</code></td>
 388     <td> Dot graph right-down </td>
 389   </tr>
 390   <tr>
 391     <td align="center"><img alt="dot_ld.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ld.gif" width="16" /></td>
 392     <td><code>dot_ld.gif</code></td>
 393     <td> Dot graph left-down </td>
 394   </tr>
 395   <tr>
 396     <td align="center"><img alt="dot_ul.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ul.gif" width="16" /></td>
 397     <td><code>dot_ul.gif</code></td>
 398     <td> Dot graph up-left </td>
 399   </tr>
 400   <tr>
 401     <td align="center"><img alt="dot_udr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udr.gif" width="16" /></td>
 402     <td><code>dot_udr.gif</code></td>
 403     <td> Dot graph up-down-right </td>
 404   </tr>
 405   <tr>
 406     <td align="center"><img alt="dot_lrd.gif" height="16" src="http://www.dementia.org/twiki//view/dot_lrd.gif" width="16" /></td>
 407     <td><code>dot_lrd.gif</code></td>
 408     <td> Dot graph left-right-down </td>
 409   </tr>
 410   <tr>
 411     <td align="center"><img alt="dot_udl.gif" height="16" src="http://www.dementia.org/twiki//view/dot_udl.gif" width="16" /></td>
 412     <td><code>dot_udl.gif</code></td>
 413     <td> Dot graph up-down-left </td>
 414   </tr>
 415   <tr>
 416     <td align="center"><img alt="dot_ulr.gif" height="16" src="http://www.dementia.org/twiki//view/dot_ulr.gif" width="16" /></td>
 417     <td><code>dot_ulr.gif</code></td>
 418     <td> Dot graph up-left-right </td>
 419   </tr>
 420 </table>
 421
 422 -- TWiki:Main.PeterThoeny - 23 Mar 2004 %BR% -- TWiki:Main.MikeMannix - 16 May 2002