PatternSkin CSS Cookbook

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

On this page:

First Read: How to modify PatternSkin styles
- When you need lots of graphic changes: Rewriting CSS
- When you need to make small adjustments: Adding to existing CSS
Recipes
Style sheet documentation

First Read: How to modify PatternSkin styles

PatternSkin uses 3 style sheets (attached to PatternSkinTheme):

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

When customizing your Foswiki 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.

When you need lots of graphic 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 preference settings in System.DefaultPreferences or Main.SitePreferences to your new files:

   * Set FOSWIKI_LAYOUT_URL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/layout.css
   * Set FOSWIKI_STYLE_URL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
   * Set FOSWIKI_COLORS_URL = %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 override existing styles.
Overriding default CSS is done with 3 preference settings: 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 preference settings in System.DefaultPreferences or Main.SitePreferences to your new files (below the USERXXXURL preferences):

   * Set USERLAYOUTURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/layout.css
   * Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
   * Set USERCOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/colors.css

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

   * Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css

Instead of setting these preferences in System.DefaultPreferences or Main.SitePreferences, you can set these in your home topic, or in any other topic. Setting style URL preferences in:

System.DefaultPreferences or Main.SitePreferences: 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 Foswiki styles.

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

Recipes

I want to change the height of the top bar

This is the complete style definition to set the height of the top bar:

#patternTopBar,
#patternTopBarContents {
 height:75px; /* top bar height; make room for header columns */
 overflow:hidden;
}

Change the number from 75px to your value.

Create a new stylesheet (preferably a 'theme variant' file (see for instance http://biostat1478.dhcp.mc.vanderbilt.edu/foswiki/pub/System/PatternSkinTheme/variant_foswiki_noframe.css with above definition in it)
Attach the file to a topic
Set the value of macro PATTERNSKIN_THEME_VARIANT to that topic attachment url using %PUBURL%/YourWebName/YourTopicName/your_theme_variant_file.css

Note: If using %WEBHEADERART% to customize the top bar, some #patternTopBarContents CSS is expanded inline from templates/css.pattern.tmpl. Override of some attributes, such as background color and repeat are not possible from the CSS files.