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

• Copy the above instructions ("Redefine your custom variables") and insert your logo name.

• Copy the above instructions ("Redefine your custom variables") and insert your logo name.

Only change the number from 64px to another value.

Top bar

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

Left bar

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

   * Set COVER = customer

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%

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

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%

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

%TMPL:INCLUDE{"view"}%

Using logo.gif:

Using templates:

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

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.

• Set WEBHEADERBGCOLOR = somehexcolor (no quotes, for example: #ffffff)

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

I want to hide the top bar

The view template is populated like this:

%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, or in a view template clear it using %TMPL:INCLUDE{"viewtopbar"}%%TMPL:END%

See PatternSkinCssCookbookNoTopBar.

Left bar questions

I want to hide the left bar

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

See PatternSkinCssCookbookNoLeftBar.

Other page parts

I want to hide the edit buttons from certain users

%TMPL:INCLUDE{"view.pattern"}%
%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.

PatternSkin Customization

Logo questions

How can I change the web logo?

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

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

• 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

How do I set a site-wide logo?

	* Set WEBLOGOIMG = %WIKILOGOIMG%

My logo does not fit the top bar

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:

You can change these numbers in 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.

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

Top bar questions

I want to set or change the top background image

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

I want to have the web color in the top bar

	* Set WEBHEADERBGCOLOR = %WEBBGCOLOR%

I want other items in the top bar

I want to have the language selection in the top bar

I want to hide the top bar

See PatternSkinCssCookbookNoTopBar

Left bar questions

I want to hide the left bar

Your own TWiki look

You can easily create your own TWiki look by attaching modified css files to your home page:

• If you want to change the layout of the page, download layout.css from PatternSkin
• If you want to change the spacing or colors, download style.css from PatternSkin
• modify the CSS in either style sheet, using tips from this page
• attach your modified layout.css and/or style.css to your home page
• as shown below, add the USERLAYOUTURL and USERSTYLEURL settings to your home page

   * Personal TWiki.PatternSkin CSS settings
      * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css
      * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css

Putting the left bar at the right

If you have a low screen resolution of say, 640 by 480 pixels, it can be useful to put the left bar "out of the way", at the right side of the page - at the cost of a horizontal scroll bar to access the left (now right) bar. This CSS does this:

Add this to layout.css:

<-- /* -->

.twikiMain {
   margin-left:0px;
}
.twikiLeftBar {
   margin-left:100%;
}
.twikiBottomBar {
   margin-left:1em;
   margin-right:0;
   padding:0;
}

<-- */ -->

Add this to style.css:

<-- /* -->

.twikiMain {
   padding-left:1em;
   padding-right:1em;
}
.twikiBottomBarContents {
   padding-left:0em;
}

<-- */ -->

This CSS is also attached to this topic, LowRes.css. To use this style, add this to your home page:

   * Personal TWiki.PatternSkin CSS settings
      * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css

Colors

To create a customised palette of colors, see PatternSkinPalette? .

Tables

Tables in topic text

If you have TablePlugin installed, tables in topics take on the properties from TABLEATTRIBUTES. Without TablePlugin (if not installed, or disabled in TWikiPreferences under DISABLEDPLUGINS), the tables have a default appearance that is hardcoded in Render.pm. Styles of topic text tables are not set in a style sheet. If you want to have control over the design of tables, for instance if you work with a style guide, you should add table styles under .twikiTopic. See for an example below.

Topic text table example

This is an example css to give tables in topic text a similar appearance. This will override settings in TablePlugin. This code should be added below the other .twikiTopic code in style.css:

<-- /* -->

.twikiTopic table {
   border-collapse:collapse;
   padding:0px;
   border-spacing:0px;
   empty-cells:show;
   border:0px;
}
.twikiTopic table th {
   background-color:#ccc;
   padding:0.5em 1em;
}
.twikiTopic table td {
   border:1px solid #eee;
}
/* override hardcoded font color */
.twikiTopic table font {
   color:#1e5bbd;
}
.twikiTopic table th a:link,
.twikiTopic table th a:visited {
   color:#1e5bbd;
   text-decoration:none;
}
/* don't show hover background color because we have a table header background */
.twikiTopic table th a:hover {
   background-color:transparent;
   text-decoration:underline;
   border-width:1px;
}
/* no underline if a sort indicator (line) is displayed */
.twikiTopic table th.twikiSortedDescendingCol a:hover,
.twikiTopic table th.twikiSortedAscendingCol a:hover {
   text-decoration:none;
}
/* hide sort icons */
.twikiTopic table th img,
.twikiTopic table th a:link img,
.twikiTopic table th a:visited img {
   display:none;
}

<-- */ -->

Attachment table, Form table

The appearance of the form table and the attachment table are set in style.css under .twikiForm and .twikiAttachments. Text in these tables is set to wrap, so often the dates are wrapped to two lines. If you prefer to have text on one line and are not disturbed by an extra wide attachment table (or when you screen resolution is big enough), add this code to .twikiAttachments td, .twikiForm td {:

<-- /* -->

   white-space:nowrap;

<-- */ -->

Other templates

Other templates than view use the style .twikiVersatileTable for, as the name says, tables with versatile functions. Versatile tables appear a little diffent in each template page (differences are created using multiple classes). Versatile tables are mostly used to format forms to highlight important parts and to dim less important parts. See style.css for specific settings for each template.

-- TWiki:Main.ArthurClemens - 28 Aug 2004

Customization of PatternSkin

This page describes ways to change the layout, fonts and colors of PatternSkin.

Screen parts

The PatternSkin view template uses four screen parts:

• The topic part - contains besides the topic content: action buttons, form table, attachment table, topic info
• Top bar - used for a logo, contains Go box
• Left bar - site and web navigation, contains a personal link block; may contain a Go box
• Bottom bar - copyright, disclaimer

These parts are dynamically included topics:

• Top bar: WebTopBar
• Left bar: included topic WebLeftBar (one WebLeftBar topic per web)
  • Personal links block: Main.%USERNAME%LeftBar. Your own personal leftbar: Main.guestLeftBar
• Bottom bar: included topic WebBottomBar

Top bar

The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo.

Left bar

The menu items are css-formatted bullet lists. So in WebLeftBar you write:

   * *Group*
   * [[SomeTopic][Link 1]]
   * [[AnotherTopic][Link 2]]
   * [[ThirdTopic][Link 3]]

The left bar may contain a Go box instead of the top bar. Use:

   * <input type="text" name="topic" size="16" />

The personal left bar block is formatted like the rest of the left bar.

Bottom bar

The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.

Customizing the logo

The top bar is 60 pixels high, and has a padding of 5 pixels on top, bottom and left, so the logo should be 50 pixels high. If your logo image has a different size, you can either alter the padding in style.css (.twikiTopBarContents) or change the top bar height in layout.css (look for the comment setting the height of the top bar).

You can also choose to set a background image for the top bar. In style.css, add this to .twikiTopBar:

   background-position:top left;
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-image:url(http://absolute_path_to_your_image);

Fonts

Font style

Font styles are defined in style.css in these places:

<--
/*
-->

html body {
   font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
   font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
}
textarea {
   font-family:monospace;
}
input, select {
   font-family:verdana,arial,sans-serif;
}
.twikiSeparator {
   font-family:Arial,sans-serif;
}
.twikiEditPage .twikiSig input {
   font-family:monospace;
}

<--
*/
-->

Font size

Font sizes in PatternSkin are scalable. This means that even on Windows Explorer, the text in the browser can scale with the user settings (in contrast to many sites where texts have a fixes pixel size, these cannot be changed by the user).

Scalable text is a big accessibility asset. If you notwithstanding want to have a fixed font, or if you want to set the default size smaller or bigger, the easiest way is to make a new entry for body, below the 2 other entries:

<-- /* -->

html body {
   ... (keep)
}
html>body {
   ... (keep)   
}
html body {
   font-size:11px;
}

<-- */ -->

-- ArthurClemens? - 15 Aug 2004