PatternSkin CSS Cookbook

This topic describes how to customize the default look of TWiki for your own needs by changing the default style sheets.

Introduction

PatternSkin uses 3 style sheets (attached to PatternSkin):

• layout.css - the positioning of main page elements (blocks), widths and heights
• stylestyle.css - fonts, sizes, margins and paddings
• colors.css - border colors, text colors and background colors

When customizing your TWiki installation, you can either choose to completely rewrite all css styles, or to selectively override some styles. The latter option is by far less time consuming, but all depends on your graphical wishes.

Major changes: Rewriting CSS

• Create a new topic that will contain your new CSS files
• Attach 3 new style sheets to the topic
• Point the CSS variables in TWiki.TWikiPreferences to your new files:

		* Set TWIKILAYOUTURL = %PUBURL%/%TWIKIWEB%/YourNewTopic/layout.css
		* Set TWIKISTYLEURL = %PUBURL%/%TWIKIWEB%/YourNewTopic/style.css
		* Set TWIKICOLORURL = %PUBURL%/%TWIKIWEB%/YourNewTopic/colors.css
 

• If you use less than these 3 CSS files, let the TWIKIXXXURL variable point to an empty CSS file. For this purpose empty.css is attached to PatternSkin:

		* Set TWIKILAYOUTURL = %PUBURL%/%TWIKIWEB%/PatternSkin/empty.css
		* Set TWIKICOLORURL = %PUBURL%/%TWIKIWEB%/PatternSkin/empty.css
 

Minor changes: Adding to existing CSS

With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles.
Overriding default CSS is done with 3 variables: USERLAYOUTURL, USERSTYLEURL, USERCOLORSURL.

• Create a new topic that will contain your new CSS files
• Attach 1, 2 or 3 new style sheets to the topic, dependent on your CSS setup (if you don't change much, you might as well put everything in one CSS file, layout, margins and colors)
• Point the CSS variables in TWiki.TWikiPreferences to your new files (below the TWIKIXXXURL variables):

		* Set USERLAYOUTURL = %PUBURL%/%TWIKIWEB%/YourNewTopic/layout.css
		* Set USERSTYLEURL = %PUBURL%/%TWIKIWEB%/YourNewTopic/style.css
		* Set USERCOLORSURL = %PUBURL%/%TWIKIWEB%/YourNewTopic/colors.css
 

• If you use only little CSS and you've only attached one file, write:

		* Set USERSTYLEURL = %PUBURL%/%TWIKIWEB%/YourNewTopic/style.css
 

Instead of setting these variables in TWiki.TWikiPreferences, you can set these in your home topic, or in any other topic. Setting style URL variables in:

• TWiki.TWikiPreferences: the style is visible for all users, site-wide
• WebPreferences: the style is visible for all users in one web
• Home topic: the style is visible for that one user when viewing the site
• Some other topic: the style is only visible in that one topic

User styles are always loaded after TWiki styles.

The rest of this topic shows examples of small CSS changes.

Hide the left bar

Use the USERSTYLEURL variable. No, variable is not used for users only; and the order in which variables are read makes that topic variables always take precedence over user variables. So write a USERSTYLEURL in a topic.

Follow these steps:

1. Create a new topic, for instance HideLeftBar^?. You may also want to use a central place for styles - in that case you can choose TWikiPreferences, or a new topic TWiki.CustomStyles^? or something. I'll use the last one for the example below.
2. In that topic, attach a css file (see attached example). Use the file that matches your TWiki installation (current is Cairo).
3. In the topic where you wish to hide the left bar, write

      * Set USERSTYLEURL = %PUBURL%/TWiki/CustomStyles/hideleftbar_Dakar.css

Center the page

See example at: PatternSkinCssCookbookCenterPage

Use different fonts

See example at: PatternSkinCssCookbookFonts

No top bar

See example at: PatternSkinCssCookbookNoTopBar