PatternSkin Customization

Read-only skin mode

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:

Other page parts

>>

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.

Changed:

<<

Using either a template or a topic template, 'empty' topicaction and toolbar by writing:

>>

Using either a template or a topic template, 'empty' top:toolbarbuttons and topicaction by writing:

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:

>>

All action links and buttons are defined in viewtopicactionbuttons.tmpl. The bottom history link is defined in DEF action_revisions

Other page parts

I want to insert text outside of the topic content

Changed:

<<

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.

>>

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:

Changed:

<<

beforetextcontents - wrapped in div of class twikiBeforeText

aftertextcontents - wrapped in div of class twikiAfterText

>>

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

Changed:

<<

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

>>

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

Changed:

<<

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

>>

%TMPL:DEF{"contentfooter"}%This is the text after%TMPL:END%

I want to place the form at the top

Changed:

<<

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

>>

Pattern skin has 2 buckets for the form: formtop (form at the top) and formbottom (form at the bottom). The default definition is:

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:

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

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:

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.

Changed:

<<

In view.myskin.tmpl you write: %TMPL:INCLUDE{"view"}%%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%

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

Other page parts

I want to hide the edit buttons from certain users

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.

>>

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:

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:

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:

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.

In view.myskin.tmpl you write: %TMPL:INCLUDE{"view"}%%TMPL:DEF{"topicactionbuttons"}%%TMPL:P{"activatable_more"}%%TMPL:END%

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

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%

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.

>>

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 change the white space above and below the logo

Changed:

<<

The logo is centered vertically be default. If you want to align it to the top, change the style in style.css.

Top bar questions

I want to set or change the top background image

Changed:

<<

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

>>

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.

Left bar - site and web navigation, contains a personal link block; may contain a Go box

Bottom bar - copyright, disclaimer

>>

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.

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

>>

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

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.

Changed:

<<

Putting the left bar at the right

>>

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

Changed:

<<

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:

>>

The logo is centered vertically be default. If you want to align it to the top, change the style in style.css.

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:

Top bar questions

Changed:

<<

Fonts

>>

I want to set or change the top background image

Changed:

<<

Font style

>>

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

Font size

>>

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

Changed:

<<

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

>>

I want to have the web color in the top bar

Changed:

<<

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:

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.

Changed:

<<

Topic text table example

>>

I want to have the language selection in the top bar

Changed:

<<

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:

<-- /* -->

>>

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:

Attachment table, Form table

>>

This will render:

Changed:

<<

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 {:

>>

Changed:

<<

<-- /* -->

white-space:nowrap;

<-- */ -->

>>

I want to hide the top bar

Other templates

>>

Left bar questions

Changed:

<<

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.

Screen parts

The PatternSkin view template uses four screen parts:

Line: 40 to 54

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

Added:

>>

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:

Colors

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:

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.

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:

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: