none
[openafs-wiki.git] / TWiki / TWikiSkins.mdwn
index 7ce0c0a..cf3d6d0 100644 (file)
-Skins are customized template 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.
+<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="#Using Cascading Style Sheets"> Using Cascading Style Sheets</a></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>
 
-A skin file is located in the `twiki/template` directory and has a name like `<scriptname>.<skin>.tmpl` or `<scriptname>.<topicname>.<skin>.tmpl`. For example, the `print` skin for the `view` template is <code>view<font>.print</font>.tmpl</code> (red color added for clarification).
+# <a name="TWiki Skins"></a> TWiki Skins
+
+_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>**&lt;scriptname&gt;.&lt;skin&gt;.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>%INTURLENCODE{"%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>%INTURLENCODE{"%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>
+  <tr>
+    <td><code>%BROADCASTMESSAGE%</code></td>
+    <td> Broadcast message at the beginning of your view template, can be used to alert users of scheduled downtimes; is set in [[Main/TWikiPreferences]]</td>
+  </tr>
+</table>
+
+<a name="GoBox"></a>
+
+### <a name="The &quot;Go&quot; 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="Using Cascading Style Sheets"></a> Using Cascading Style Sheets
+
+The regular templates files currently do not use style sheets. Many skin developers choose to use them, it helps in separating style from content.
+
+Example: To use a style sheet for the broadcast message, add this to `view.myskin.tmpl`:
+
+    <style type="text/css">
+    .broadcastmessage {
+        background: yellow; display:block;
+        border-style:solid;border-width: 2px;border-color:red;
+    }
+    .broadcastmessage strong {color: red}
+    </style>
+
+Then add a div tag to the `%BROADCASTMESSAGE%` variable located after the `#PageTop` anchor or after the opening form tag:
+
+    <div class="broadcastmessage"> %BROADCASTMESSAGE% </div>
+
+## <a name="Packaging and Publishing Skins"></a> Packaging and Publishing Skins
+
+See TWiki:Plugins/SkinPackagingHowTo and TWiki:Plugins/SkinDeveloperFAQ
+
+## <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 <br />**Note:** Who has time to create the classic `wikiwiki` skin?
-- 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 `?skin=name` URL parameter overrides the SKIN preference value.
+The <code>**?skin=name**</code> URL parameter overrides the SKIN Preference value.
 
--- [[PeterThoeny]] - 20 Jan 2001 <br />
+-- [[PeterThoeny]] - 05 Jan 2003