Difference: PatternSkinCustomization (6 vs. 7)

Revision 722 Oct 2005 - Main.TWikiContributor

Line: 1 to 1
 
Changed:
<
<

PatternSkin Customization

>
>

PatternSkin Customization

  Questions and answers on configuring page elements. For styling your TWiki, see PatternSkinCssCookbook.
Line: 8 to 8
 

First Read: How to modify PatternSkin templates

Changed:
<
<
If you need to change any of the elements that are visible on the common 'view' pages, you need to change the 'view' template: /templates/view.pattern.tmpl. The quickest way 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.
>
>
Everything you see on the common 'view' page is written by the view template. For pattern skin this file is /templates/view.pattern.tmpl.

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.

  Example
Let's say you want to simplify the bottom toolbar and remove all links except for "More topic actions". You would need to target %TMPL:DEF{"topicactionbuttons"}%, which is located in view.pattern.tmpl.
Line: 16 to 30
 The steps you would need:
  1. Think up a name for your skin. Let us use myskin for now.
  2. Create a new (empty) view template file in /templates called view.myskin.tmpl.
Changed:
<
<
  1. In view.myskin.tmpl you write:
    %TMPL:INCLUDE{"view"}%
    %TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%
  2. Now the skin is set. For testing, view any topic and append to the topic name: ?cover=myskin. You should see an effect now.
>
>
  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.
 
  1. To make the changes visible on all pages, go to Main.TWikiPreferences (to keep TWikiPreferences intact) and write:
   * Set COVER = myskin

Line: 29 to 44
 
  • Set SKIN = myskin,pattern
Added:
>
>
Test by appending ?cover=myskin to the url.

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
 

Logo

Line: 49 to 114
  Using logo.gif:
Changed:
<
<
  • 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.
>
>
  • 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.
 
  • You can also upload the image with FTP to /pub/YourWeb/WebPreferences/.
  • Copy the above instructions ("Redefine your custom variables") and insert your logo name.
Line: 72 to 137
 

My logo does not fit the top bar

Changed:
<
<
The top bar is 64 pixels high by default.
>
>
See I want to change the height of the top bar
 
Changed:
<
<
Using templates:
>
>

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:

 
Changed:
<
<
Change the height of the top bar in templates/viewtopbar.pattern.tmpl:
>
>
<input type="hidden" name="web" value="all" />
 
Changed:
<
<

>
>
To search a couple of webs, for instance the webs Main and TWiki, write:
<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:

 %TMPL:DEF{"topbardimensions"}% #patternTopBar, #patternClearHeaderCenter,
Line: 89 to 189
  overflow:hidden; } %TMPL:END%
Changed:
<
<

Only change the number from 64px to another value.

>
>
And change the number from 64px to a different value.
 

Using style sheets:

Changed:
<
<
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
>
>
Create a new stylesheet with above definition in it, attach it to a topic and point USERLAYOUTURL to that topic attachment. See PatternSkinCssCookbook about creating custom styles.
 
Deleted:
<
<

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

 

I want to set or change the top background image

The image at the top is called "header art" - commonly the top image found on blog sites. The image that is displayed by default is set by the variable WEBHEADERART, defined in TWikiPreferences.

Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):


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

You can also set WEBHEADERART per web, by defining the variable in the Web's WebPreferences.

Line: 121 to 214
  Redefine WEBHEADERBGCOLOR in Main.TWikiPreferences (to keep TWikiPreferences intact):

Changed:
<
<
  • Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
>
>
  • Set WEBHEADERBGCOLOR = %WEBBGCOLOR%
 

I want to remove the Jump and Search boxes from the top bar

If you have localization enabled, you will also see a language dropdown box at the far right.

Changed:
<
<
You can remove these items from WebTopBar.
>
>
You can remove these items from WebTopBar.
 

I want to hide the top bar

Line: 149 to 242
 Each included template draws a part of the screen.
Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar.
Changed:
<
<
Another approach is to clear the contents of module topbar; for example in view.myskin.tmpl:
%TMPL:INCLUDE{"view"}%

>
>
Another approach is to clear the contents of module topbar. Using either a template or a topic template, write in your custom template:
 
Changed:
<
<
%TMPL:INCLUDE{"topbar"}%%TMPL:END%
>
>
%TMPL:INCLUDE{"view"}%
%TMPL:INCLUDE{"topbar"}%%TMPL:END%
  and add:
Changed:
<
<
%TMPL:DEF{"topbardimensions"}%#patternTopBar,

>
>
%TMPL:DEF{"topbardimensions"}%#patternTopBar,
 #patternClearHeaderCenter, #patternClearHeaderLeft, #patternClearHeaderRight, #patternTopBarContentsOuter { height:0px;
Changed:
<
<
}%TMPL:END%
>
>
}%TMPL:END%
 
Changed:
<
<
Using style sheets:
See PatternSkinCssCookbookNoTopBar.
>
>
Using style sheets:
See PatternSkinCssCookbookNoTopBar
 

Left bar

I want to hide the left bar

Changed:
<
<
Using templates:
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:DEF{"viewleftbar"}%%TMPL:END%
>
>
Using templates:
Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a custom template clear it using
%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:

 
Deleted:
<
<
Using style sheets:
 
Changed:
<
<
See PatternSkinCssCookbookNoLeftBar.
>
>
%TMPL:DEF{"leftbardimensions"}%#patternOuter {
   margin-left:12em;
}
#patternLeftBar {
   width:12em;
   margin-left:-12em;
}%TMPL:END%
And change the number from 12em to a different value (3 occurrences).
 
Added:
>
>
 

Other page parts

I want to hide the edit buttons from certain users

Line: 192 to 304
 

I want to hide the edit buttons from certain users

Changed:
<
<
It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for customers.
>
>
It may defy the wiki-ness of your TWiki installation, but in certain circumstances it could be useful to hide the edit buttons from users that are not logged in, for instance for clients that have gotten viewing rights only.
 
Changed:
<
<
Create in the template directory the file view.customer.tmpl. 'Empty' topicaction and toolbar by writing in the template:
>
>
Using either a template or a topic template, 'empty' topicaction and toolbar by writing:
 
%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"topicaction"}%%TMPL:END%
%TMPL:DEF{"toolbar"}%%TMPL:END%
Changed:
<
<
In TWikiGuest, set the cover to
>
>
In the user page of TWikiGuest, set the cover to
 
   * Set COVER = customer
Changed:
<
<
By default this topic is editable only by TWikiAdminGroup members.
>
>
By default this topic is editable only by TWiki admins.
 

I want to remove the History button from the bottom

Changed:
<
<
All action buttons are defined in viewtopicactionbuttons.pattern.tmpl. Remove module revisions from %TMPL:DEF{"topicactionbuttons"}%.
>
>
All action buttons are defined in viewtopicactionbuttons.pattern.tmpl. The history buttons or in module revisions:
 
%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_raw_edit"}%%TMPL:P{"sep"}%
Changed:
<
<
%TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}%%TMPL:P{context="WysiwygPluginEnabled" then="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"}%
Changed:
<
<
%TMPL:P{"revisions"}%%TMPL:P{"sep"}%
>
>
%TMPL:P{"revisions"}%%TMPL:P{"sep"}% < HERE
 %TMPL:P{"activatable_more"}%%TMPL:END%
Deleted:
<
<
In your view.myskin.tmpl file (see above) you write:
%TMPL:INCLUDE{"view"}%

 
Changed:
<
<
%TMPL:DEF{"topicactionbuttons"}%Raw edit |  |  %TMPL:P{context="WysiwygPluginEnabled" then="activatable_edit_wysiwyg"}% |  %TMPL:P{"activatable_attach"}% |  %TMPL:P{"printable"}% |  %TMPL:P{"raw"}% |  %TMPL:P{"backlinks"}% |  %TMPL:P{"activatable_more"}%%TMPL:END%
>
>
If we emptied module revisions we would end up with 2 separators, so we need to remove the line altogether. We do this by copying the block and omitting the line.
Using either a template or a topic template, to remove the history buttons write in your custom template:

%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%
  Remove all newlines if you copy-paste above text.
Deleted:
<
<
Test by appending ?cover=myskin to any topic.
 

I want to insert text outside of the topic content

Line: 247 to 363
 
  • beforetextcontents - wrapped in div of class twikiBeforeText
  • aftertextcontents - wrapped in div of class twikiAfterText

Changed:
<
<
To put contents before the main text, use the custom skin approach as described above.
So our view.myskin.tmpl file contains:
%TMPL:INCLUDE{"view"}%

>
>
To put contents before the main text, use the custom skin approach as described above.
So our custom template contains:
%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%
 
Changed:
<
<
%TMPL:DEF{"beforetextcontents"}%This is the text before%TMPL:END% Test by appending ?cover=myskin to any topic.
>
>

I want to place the form at the top

 
Changed:
<
<
Use the same procedure for contents to be put after the topic text:
%TMPL:INCLUDE{"view"}%

>
>
Pattern skin has 2 buckets for the form: formattop (form-at-the-top) and formatbottom (form-at-the-bottom):

%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

In Main.TWikiPreferences, set COMPOSER to a blank value:
   * Set COMPOSER =

In the topic, set the COMPOSER variable to kupu:

   * Set COMPOSER = kupu
 
Deleted:
<
<
%TMPL:DEF{"aftertextcontents"}%This is the text after%TMPL:END%
 
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinCustomization