PatternSkin Customization

We describe two approaches to override this template:

1. By creating a custom skin file in the templates directory
2. By creating a custom topic template

Which approach is best?

• If you want to change the appearance for a lot of pages or even site-wide, the template approach is the easiest.
• If you want to change the appearance of a single topic, or a set of topics, use a topic template.

The template approach

To change templates you will need shell access. If you don't have this read on below in The topic template approach.

The quickest way to change the view template would be to simply change the text in the template. A safer way - strongly recommended, because it will survive a TWiki update - is to create your own custom skin. That may sound like an awful lot of work, but in reality a skin may be as much as 1 file that consists of only a few lines of code.

1. In view.myskin.tmpl you write:

      %TMPL:INCLUDE{"view"}%
      %TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%

2. For testing, view any topic and append to the topic name: ?cover=myskin. You should see an effect now.

The topic template approach (using VIEW_TEMPLATE)

Template overrides can be written in a topic, a so-called topic template. Topic template names end with Template, for instance BlogPostViewTemplate.

Call this template by setting VIEW_TEMPLATE:

   * Set VIEW_TEMPLATE = BlogPostView

• Note that you don't use the Template extension now
• You can make this setting hidden by writing this in the Settings screen: go to More and then Topic Settings
• On topic creation you can set the topic template by passing templatetopic:

     <input type="hidden" name="templatetopic" value="BlogPostViewTemplate" />
     

We can use the same example as above. In a topic write:

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%

You can also test this by appending ?template=PersonalInfoView to the url.

Reference: pattern skin template INCLUDE tree

view
    page
        constants
        javascript
        styles
            stylesdynamic
        body
            viewtopbar
                %SYSTEMWEB%.WebTopBar
            viewtoolbar
            viewleftbar
                %WEB%.WebLeftBar
            viewtopicactionbuttons
            viewbottombar
                %SYSTEMWEB%.WebBottomBar

• Create a new image named logo.gif and attach it to the web's WebPreferences topic. PatternSkin's stylesheet assumes the logo is 40px high. More about that later.

I want to change the white space above and below the logo

Change the table style in topic WebTopBar. The default top padding is 11px.

Top bar

The search box won't find topics in other webs

In WebTopBar you can find the line:

<input type="hidden" name="web" value="%BASEWEB%" />

To search all webs, write:

<input type="hidden" name="web" value="all" />

<input type="hidden" name="web" value="Main,TWiki" />

See also: Search variable

I want to change the height of the top bar

The top bar is 64 pixels high by default.

Using templates:
Using either a template or a topic template, copy this definition in your custom template:

• Set WEBHEADERART = %PUBURLPATH%/%SYSTEMWEB%/PatternSkin/TWiki_header.gif
• Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)

• Set WEBHEADERBGCOLOR = %WEBBGCOLOR%

%TMPL:INCLUDE{"view"}%
%TMPL:INCLUDE{"topbar"}%%TMPL:END%

%TMPL:DEF{"topbardimensions"}%#patternTopBar,

%TMPL:DEF{"viewleftbar"}%%TMPL:END%

Using style sheets:
See PatternSkinCssCookbookNoLeftBar

I want to make the left bar wider

Using templates:

The left bar is 12 em wide by default.

Using templates:
Using either a template or a topic template, copy this definition in your custom template:

%TMPL:DEF{"leftbardimensions"}%#patternOuter {
   margin-left:12em;
}
#patternLeftBar {
   width:12em;
   margin-left:-12em;
}%TMPL:END%

%TMPL:INCLUDE{"view"}%

%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_raw_edit"}%%TMPL:P{"sep"}%
%TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}%
%TMPL:P{context="WysiwygPluginEnabled" then="sep"}%
%TMPL:P{"activatable_attach"}%%TMPL:P{"sep"}%
%TMPL:P{"printable"}%%TMPL:P{"sep"}%
%TMPL:P{"raw"}%%TMPL:P{"sep"}%
%TMPL:P{"backlinks"}%%TMPL:P{"sep"}%
%TMPL:P{"activatable_more"}%%TMPL:END%

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"beforetextcontents"}%This is the text before%TMPL:END%

Use the same procedure for contents to be put after the topic text:

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"aftertextcontents"}%This is the text after%TMPL:END%

I want to place the form at the top

%TMPL:DEF{"formattop"}%%TMPL:END%
%TMPL:DEF{"formatbottom"}%%TMPL:P{"form"}%%TMPL:END%

You simply swap the bucket contents. Using either a template or a topic template, write in your custom template:

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"formattop"}%%TMPL:P{"form"}%%TMPL:END%
%TMPL:DEF{"formatbottom"}%%TMPL:END%

I only want to show the WYSIWYG button on explicit pages

   * Set COMPOSER =

In the topic, set the COMPOSER variable to kupu:

   * Set COMPOSER = kupu