PatternSkin Customization

Logo questions First Read: How to modify PatternSkin templates

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.

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:

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.
3. In view.myskin.tmpl you write:
   %TMPL:INCLUDE{"view"}%
%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%
4. Now the skin is set. For testing, view any topic and append to the topic name: ?cover=myskin. You should see an effect now.
5. To make the changes visible on all pages, go to Main.TWikiPreferences (to keep TWikiPreferences intact) and write:

   * Set COVER = myskin

or write

   * Set SKIN = myskin,pattern

Logo

		* Set WEBLOGONAME = logo.gif
		* Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
		* Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC%
		* Set WEBLOGOALT = Home

   * Set WEBLOGONAME = logo.gif
   * Set WEBLOGOIMG = %PUBURLPATH%/%BASEWEB%/%WEBPREFSTOPIC%/%WEBLOGONAME%
   * Set WEBLOGOURL = %SCRIPTURLPATH{"view"}%/%BASEWEB%/%HOMETOPIC%
   * Set WEBLOGOALT = Home

There are several 2 ways to change the logo in a web:

• 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/.

Using logo.gif:

or:

• 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.

• Attach whatever image and attach it to the web's WebPreferences topic. Then add to the WebPreferences (under Custom web preferences):

Using a new filename:

		* Set WEBLOGONAME = your-logo-name.gif-or-png

• 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.

	* Set WEBLOGOIMG = %WIKILOGOIMG%

   * Set WEBLOGOIMG = %WIKILOGOIMG%

The top bar is 64 pixels high by default. If you have a bigger logo you might want to change the height of the top bar in layout.css:

/* height of the top bar */
#patternLeftBar {
   top:64px; /*C3*/
}
#patternTopBar,
#patternTopBar table.patternTopBarContents {
   height:64px; /*C3*/
}

Using templates:

(C3 is used as reference to all occurrences with the same value)

Change the height of the top bar in templates/viewtopbar.pattern.tmpl:

%TMPL:DEF{"topbardimensions"}%
#patternTopBar,
#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter {
	height:64px; /* top bar height; make room for header columns */
	overflow:hidden;
}
%TMPL:END%

Only change the number from 64px to another value.

You can change these numbers in Using style sheets:layout.css directly, or create a new stylesheet, 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.

The Change logo is centered vertically be default. If you want to align it to the top, table change the style in topic style.css WebTopBar . The default top padding is 11px.

Change:

Top bar

table.patternTopBarContents td {
   height:100%;
   width:100%;
   vertical-align:middle;
}

to:

table.patternTopBarContents td {
   height:100%;
   width:100%;
   vertical-align:top;
}

You can also define an offset like this:

table.patternTopBarContents td {
   height:100%;
   width:100%;
   vertical-align:top;
   padding-top:12px;
}

Top bar questions

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

	* Set WEBHEADERART = %PUBURLPATH%/%TWIKIWEB%/PatternSkin/TWiki_header.gif
	* Set WEBHEADERBGCOLOR = somehexcolor

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

	* Set WEBHEADERBGCOLOR = %WEBBGCOLOR%

   * Set WEBHEADERBGCOLOR = %WEBBGCOLOR%

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

In If you have localization enabled, you will also see a language dropdown box at the far right. WebTopBar shows a logo, but that does not mean you cannot put other things in there. You can put a table, or divs or images.

You can remove these items from WebTopBar.

I want to have the language selection in the top bar

If you want to have the language selection more prominent, you can put a language selection dropdown box in the top bar. Put this in WebTopBar:

<div class="twikiRight" style="margin-right:2em;">
<form id="topBarChangeLanguage" action="%SCRIPTURLPATH{"oops"}%/%WEB%/%TOPIC%" method="get">
<select name="language" onchange="document.getElementById('topBarChangeLanguage').submit()">
%LANGUAGES{format="<option $marker value='$langtag'>$langname</option>" selection="%LANGUAGE%"}%
</select>
<input type="hidden" name="template" value="oopslanguagechanged" />
<noscript>
<input type="submit" value="%MAKETEXT{"Change language"}%" />
</noscript>
</form>
</div>

This will render:

See Using templates:PatternSkinCssCookbookNoTopBar

Left bar questions

The view template is populated with page elements using template inclusions:

%TMPL:INCLUDE{"page"}%
%TMPL:INCLUDE{"viewtopbar"}%
%TMPL:INCLUDE{"viewtoolbar"}%
%TMPL:INCLUDE{"viewleftbar"}%
%TMPL:INCLUDE{"viewrightbar"}%
%TMPL:INCLUDE{"viewtopicactionbuttons"}%
%TMPL:INCLUDE{"viewbottombar"}%

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; for example in view.myskin.tmpl:

%TMPL:INCLUDE{"view"}%

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

and add:

%TMPL:DEF{"topbardimensions"}%#patternTopBar,
#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter {
	height:0px;
}%TMPL:END%

Using style sheets:

See PatternSkinCssCookbookNoTopBar.

Left bar

See Using templates:PatternSkinCssCookbookNoLeftBar

Omit %TMPL:INCLUDE{"viewleftbar"}% to hide the left bar, or in a view template clear it using %TMPL:DEF{"viewleftbar"}%%TMPL:END%

Using style sheets:

See PatternSkinCssCookbookNoLeftBar.

Other page parts

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 customers.

Create in the template directory the file view.customer.tmpl. 'Empty' topicaction and toolbar by writing in the template:

%TMPL:INCLUDE{"view"}%
%TMPL:DEF{"topicaction"}%%TMPL:END%
%TMPL:DEF{"toolbar"}%%TMPL:END%

In TWikiGuest, set the cover to

   * Set COVER = customer

By default this topic is editable only by TWikiAdminGroup members.

I want to remove the History button from the bottom

All action buttons are defined in viewtopicactionbuttons.pattern.tmpl. Remove module revisions from %TMPL:DEF{"topicactionbuttons"}%.

%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{"revisions"}%%TMPL:P{"sep"}% %TMPL:P{"activatable_more"}%%TMPL:END%

In your view.myskin.tmpl file (see above) you write:

%TMPL:INCLUDE{"view"}%

%TMPL:DEF{"topicactionbuttons"}% | 
%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%

Remove all newlines if you copy-paste above text.

Test by appending ?cover=myskin to any topic.

I want to insert text outside of the topic content

PatternSkin has 2 'buckets' to write additional content to: beforetextcontents and aftertextcontents, 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:

• beforetextcontents - wrapped in div of class twikiBeforeText
• aftertextcontents - wrapped in div of class twikiAfterText

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"}%

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

Test by appending ?cover=myskin to any topic.

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%