-## <a name="TWiki Skins"></a> TWiki Skins
+<div>
+ <ul>
+ <li><a href="#TWiki Skins"> TWiki Skins</a><ul>
+ <li><a href="#Overview"> Overview</a></li>
+ <li><a href="#Defining Skins"> Defining Skins</a></li>
+ <li><a href="#Variables in Skins"> Variables in Skins</a><ul>
+ <li><a href="#The "Go" Box and Navigation Box"> The "Go" Box and Navigation Box</a></li>
+ </ul>
+ </li>
+ <li><a href="#Packaging and Publishing Skins"> Packaging and Publishing Skins</a></li>
+ <li><a href="#Activating Skins"> Activating Skins</a></li>
+ </ul>
+ </li>
+ </ul>
+</div>
-Skins are customized [[TWikiTemplate|Main/TWikiTemplates]] files. You can use skins to change the look of a %WIKITOOLNAME% topic, for example the layout of the header and footer. Note that the renderd text between header and footer does **_not_** change. You can use skins also to define an alternate view, i.e. a view optimized for printing.
+# <a name="TWiki Skins"></a> TWiki Skins
-A skin file is located in the <code>**twiki/template**</code> directory and has a name like <code>**<scriptname>.<skin>.tmpl**</code>. For example, the <code>**print**</code> skin for the <code>**view**</code> template is <code>**view<font>.print</font>.tmpl**</code> (red color added for clarification).
+_Skins overlay regular templates with alternate header/footer layouts; topic text is not affected_
+
+## <a name="Overview"></a> Overview
+
+Skins are customized [[TWikiTemplates]] files. You can use skins to change the look of a %WIKITOOLNAME% topic, for example, the layout of the header and footer. Rendered text between header and footer does **_not_** change. You can also use skins to define an alternate view, like a view optimized for printing.
+
+## <a name="Defining Skins"></a> Defining Skins
+
+Skin files are located in the `twiki/templates` directory and are named with the syntax: <code>**<scriptname>.<skin>.tmpl**</code>. For example, the **Printable** skin for the `view` template is `view.print.tmpl`.
+
+Use the existing [[TWikiTemplates]] (like `view.tmpl`) or skin files as a base for your own skin, name it for example `view.myskin.tmpl`.
+
+## <a name="Variables in Skins"></a> Variables in Skins
+
+You can use [[template variables|Main/TWikiTemplates#TemplateVariables]], [[TWikiVariables]], and other predefined variables to compose your skins. Some commonly used variables in skins:
+
+<table border="1" cellpadding="0" cellspacing="0">
+ <tr>
+ <th bgcolor="#99CCCC"><strong> Variable: </strong></th>
+ <th bgcolor="#99CCCC"><strong> Expanded to: </strong></th>
+ </tr>
+ <tr>
+ <td><code>%WIKILOGOURL%</code></td>
+ <td> Link of page logo </td>
+ </tr>
+ <tr>
+ <td><code>%WIKILOGOIMG%</code></td>
+ <td> Image URL of page logo </td>
+ </tr>
+ <tr>
+ <td><code>%WIKILOGOALT%</code></td>
+ <td> Alt text of page logo </td>
+ </tr>
+ <tr>
+ <td><code>%WEBBGCOLOR%</code></td>
+ <td> Web specific background color, defined in the [[Main/WebPreferences]]</td>
+ </tr>
+ <tr>
+ <td><code>%WIKITOOLNAME%</code></td>
+ <td> The name of your TWiki site </td>
+ </tr>
+ <tr>
+ <td><code>%SCRIPTURL%</code></td>
+ <td> The script URL of TWiki </td>
+ </tr>
+ <tr>
+ <td><code>%SCRIPTSUFFIX%</code></td>
+ <td> The script suffix, ex: <code>.pl</code>, <code>.cgi</code></td>
+ </tr>
+ <tr>
+ <td><code>%WEB%</code></td>
+ <td> The name of the current web. <strong><em>Note:</em></strong> It is recommended to URL-encode the variable in form actions with <code>%URLENCODE{"%WEB%"}%</code> for proper handling in an internationalized environment </td>
+ </tr>
+ <tr>
+ <td><code>%TOPIC%</code></td>
+ <td> The name of the current topic. <strong><em>Note:</em></strong> It is recommended to URL-encode the variable in form actions with <code>%URLENCODE{"%TOPIC%"}%</code> for proper handling in an internationalized environment </td>
+ </tr>
+ <tr>
+ <td><code>%WEBTOPICLIST%</code></td>
+ <td> Common links of current web, defined in the [[Main/WebPreferences]]. It includes a [[Main/WebHome#GoBox]]</td>
+ </tr>
+ <tr>
+ <td><code>%TEXT%</code></td>
+ <td> The topic text, e.g. the content that can be edited </td>
+ </tr>
+ <tr>
+ <td><code>%META{"form"}%</code></td>
+ <td>[[Main/TWikiForms]], if any </td>
+ </tr>
+ <tr>
+ <td><code>%META{"attachments"}%</code></td>
+ <td>[[Main/FileAttachment]] table </td>
+ </tr>
+ <tr>
+ <td><code>%META{"parent"}%</code></td>
+ <td> The topic parent </td>
+ </tr>
+ <tr>
+ <td><code>%EDITTOPIC%</code></td>
+ <td> Edit link </td>
+ </tr>
+ <tr>
+ <td><code>%REVTITLE%</code></td>
+ <td> The revision title, if any, ex: <code>(r1.6)</code></td>
+ </tr>
+ <tr>
+ <td><code>%REVINFO%</code></td>
+ <td> Revision info, ex: <code>r1.6 - 24 Dec 2002 - 08:12 GMT - Main.admin</code></td>
+ </tr>
+ <tr>
+ <td><code>%WEBCOPYRIGHT%</code></td>
+ <td> Copyright notice, defined in the [[Main/WebPreferences]]</td>
+ </tr>
+</table>
+
+<a name="GoBox"></a>
+
+### <a name="The "Go" Box and Navigation Box"></a> The "Go" Box and Navigation Box
+
+The `%WEBTOPICLIST%` includes a "Go" box to jump to a topic. The box also understand URLs, e.g. you can type <http://www.google.com/> to jump to an external web site. The feature is handy if you build a skin that has a select box of frequently used links, like Intranet home, employee database, sales database and such. A little JavaScript gets into action on the onSelect method of the select tag to fill the selected URL into the "Go" box field, then submits the form.
+
+Here is an example form that has a select box and the "Go" box for illustration purposes. You need to have JavaScript enabled for this to work:
+
+<form action="http://www.dementia.org/twiki//view/%WEB%/%TOPIC%" name="sample">
+ <table border="3">
+ <tr>
+ <td><select name="sel" onchange="this.form.topic.value=this.options[this.selectedIndex].value; this.form.submit()"><option selected value="">Navigate...</option>
+ <option value="http://www.twiki.org/">Intranet home</option>
+ <option value="Main.TWikiUsers">Employee index</option>
+ <option value="Main.WebHome">Main web</option>
+ <option value="TWiki.WebHome">TWiki web</option>
+ <option value="http://www.google.com/">Google</option>
+ <option value="http://www.yahoo.com/">Yahoo!</option></select> Bare bones header for demo only </td>
+ </tr>
+ <tr>
+ <td> %WEBTOPICLIST% </td>
+ </tr>
+ </table>
+</form>
+
+## <a name="Packaging and Publishing Skins"></a> Packaging and Publishing Skins
+
+See TWiki:Plugins/SkinPackagingHowTo
+
+## <a name="Activating Skins"></a> Activating Skins
A skin can be activated in two ways:
-- Define the SKIN preference variable in [[TWikiPreferences]], one of the [[WebPreferences]], or a user preference. I.e.
- - `Set SKIN = wikiwiki`
-- Add `?skin=name` to the URL, i.e. for this topic:
+- Define the `SKIN` Preference variable in [[TWikiPreferences]], one of the [[WebPreferences]], or in a user - Main.admin - topic.
+ - `Set SKIN = print`
+
+- Add `?skin=name` to the URL, for this example:
- <http://www.dementia.org/twiki//view/%WEB%/%TOPIC%?skin=print> (for the print view skin)
- <http://www.dementia.org/twiki//view/%WEB%/%TOPIC%?skin=plain> (for the plain view skin that has no header and footer)
-The <code>**?skin=name**</code> URL parameter overrides the SKIN preference value.
+The <code>**?skin=name**</code> URL parameter overrides the SKIN Preference value.
--- [[PeterThoeny]] - 14 Jul 2001 <br />
+-- [[PeterThoeny]] - 05 Jan 2003
git://git.openafs.org / openafs-wiki.git / blobdiff