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.
First Read: How to modify PatternSkin styles
PatternSkin uses 3 style sheets (attached to
PatternSkin):
- 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.
Changing the color scheme
Have a look at
PatternSkinColorSettings.
When you need lots of graphic changes: Rewriting CSS
* 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:
User styles are always loaded after Foswiki 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
I want to change the height of the top bar
The height of the top bar is defined in
theme
CSS files. The default height in
theme_foswiki.css
is 90px, in
theme_twiki.css
it is 64px.
This is the complete style definition to set the height of the top bar:
#patternTopBar,
#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter,
#patternTopBarContents {
height:64px; /* top bar height; make room for header columns */
overflow:hidden;
}
Change the number from 64px to your value.
- Create a new stylesheet (preferably a 'theme' file (see for instance http://wetherby.me/wiki/pub/System/PatternSkin/theme_foswiki.css with above definition in it
- Attach the file to a topic
- Set the value of macro
PATTERNSKIN_THEME
to that topic attachment url using %PUBURL%/YourWebName/YourTopicName/your_theme_file.css
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