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:
By creating a custom skin file in the templates directory
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.
The steps you would need:
Think up a name for your skin. Let us use myskin for now.
Create a new (empty) view template file in /templates called view.myskin.tmpl.
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:
The PatternSkin can be turned into read-only mode. This is mainly useful if you have TWiki application pages or dashboards where you do not want regular users to change content. The read-only mode is enabled with a READONLYSKINMODE preferences setting set to 1 in the Main.TWikiPreferences (site level), in a WebPreferences (web level) or in any topic (page level):
* Set READONLYSKINMODE = 1
If set, the edit and attach buttons on top, and the topic action bar at the bottom are removed. There is a hard to find edit link for people who need to edit content: The topic revision info at the bottom has a dash before the WikiName that is turned into an edit link, such as:
Please note that this is not a replacement for access control, use it in addition to TWikiAccessControl.
Logo
How can I change the web logo?
By default the logo at the top left of each web points to the image with name logo.gif that is attached to each web's WebPreferences.
The default variables that cause this behavior are defined in TWikiPreferences.
Redefine your custom variables in Main.TWikiPreferences (to keep TWikiPreferences intact):
* Set WEBLOGONAME = logo.gif
* Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
* Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC%
* Set WEBLOGOALT = Home
There are 2 ways to change the logo in a web:
Using logo.gif:
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.
Using a new filename:
Attach whatever image and attach it to the web's WebPreferences topic. Then add to the WebPreferences (under Custom web preferences):
* Set WEBLOGONAME = your-logo-name.gif-or-png
Copy the above instructions ("Redefine your custom variables") and insert your logo name.
How do I set a site-wide logo?
There is a bunch of site-wide logo variables in Main.TWikiPreferences: WIKILOGOIMG, WIKILOGOURL and WIKILOGOALT.
To change only the web logo image to site-wide, in Main.TWikiPreferences set:
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,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter {
height:64px; /* top bar height; make room for header columns */
overflow:hidden;
}
%TMPL:END%
And change the number from 64px to a different value.
Using style sheets:
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.
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):
* 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.
Each included template draws a part of the screen.
Omit %TMPL:INCLUDE{"viewtopbar"}% to hide the top bar.
Another approach is to clear the contents of module topbar with an empty definition. Using either a template or a topic template, write in your custom template:
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:
And change the number from 12em to a different value (3 occurrences).
Buttons
I want to hide the edit buttons from certain users
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.
Using either a template or a topic template, 'empty' top:toolbarbuttons and topicaction by writing:
View any topic with ?skin=myskin,pattern, or set the SKIN variable to myskin,pattern.
This will remove the Edit and Attach buttons, and place a History button at the top.
You will probably not just want to have the History button there. Other button include names are:
I want to insert text outside of the topic content
PatternSkin has 2 'buckets' to write additional content to: contentheader and contentfooter, both defined in view.pattern.tmpl. These containers can contain text or html and are placed directly before and after the topic text.
Both modules are wrapped in CSS containers:
contentheader - wrapped in div of class twikiContentHeader
contentfooter - wrapped in div of class twikiContentFooter
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{"contentheader"}%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{"contentfooter"}%This is the text after%TMPL:END%
I want to place the form at the top
Pattern skin has 2 buckets for the form: formtop (form at the top) and formbottom (form at the bottom). The default definition is:
The attachment tables are placed in a open/close twisty. You can do the same for the topic form.
Edit templates/formtables.pattern.tmpl to have this code:
%{ These templates define the form attached at the bottom of viewed page. }%
%TMPL:DEF{"starttopicformwisty"}%%TWISTY{id="topicformlist" mode="div" remember="on" link="%MAKETEXT{"Form"}%" showimgleft="%ICONURLPATH{toggleopen}%" hideimgleft="%ICONURLPATH{toggleclose}%"}%%TMPL:END%
%TMPL:DEF{"endtopicformwisty"}%%ENDTWISTY%%TMPL:END%
%{ Start of form table }%
%TMPL:DEF{FORM:display:header}%<div class="twikiForm">%TMPL:P{"starttopicformwisty"}%
<table class='twikiFormTable' border='1'>%TMPL:P{FORM:display:header:headerrow}%%TMPL:END%
%{ Header }%
%TMPL:DEF{FORM:display:header:headerrow}%<tr><th class='twikiFormTableHRow twikiFirstCol' colspan='2'>
[[%A_TITLE%]]
</th></tr>%TMPL:END%
%{ Each row }%
%TMPL:DEF{FORM:display:row}%<tr valign='top'><td class='twikiFormTableRow twikiFirstCol' align='right'> %A_TITLE% </td><td>
%A_VALUE%
</td></tr>%TMPL:END%
%{ Footer }%
%TMPL:DEF{FORM:display:footer}%</table>%TMPL:P{FORM:display:footer:editlink}%
%TMPL:P{"endtopicformwisty"}%</div><!-- /twikiForm -->%TMPL:END%
To give the twisty toggle link the same style as the attachment twisty link, add this to pattern skin's style.css: