Home | Gifts

PatternSkin CSS Cookbook

Questions and answers on how to customize the default look of TWiki for your own needs, using style sheets. For configuring page elements, see PatternSkinCustomization.

On this page:

First Read: How to modify PatternSkin styles

PatternSkin uses 3 style sheets (attached to PatternSkin):

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.

Changing the color scheme

Have a look at PatternSkinColorSettings.

When you need lots of graphic changes: Rewriting CSS

      * Set TWIKILAYOUTURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/layout.css
      * Set TWIKISTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
      * Set TWIKICOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/colors.css
 

When you need to make small adjustments: 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.
      * Set USERLAYOUTURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/layout.css
      * Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
      * Set USERCOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/colors.css
 
      * Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/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:

User styles are always loaded after TWiki styles.

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

Recipes

Hide the left bar

See example at: PatternSkinCssCookbookNoLeftBar

Use different fonts

See example at: PatternSkinCssCookbookFonts

No top bar

See example at: PatternSkinCssCookbookNoTopBar

Centered page

See example at: PatternSkinCssCookbookCenterPage

Centered page (with a border around the page)

See example at: PatternSkinCssCookbookCenterPageBorder

Setting EditTablePlugin styles

See example at: PatternSkinCssCookbookEditTableStyle

Style sheet documentation

See PatternSkinCss for documentation of PatternSkin CSS classes

Revision r5 - 2005-10-14 - 23:41:34 - TWikiContributor Edit