Tags:
create new tag
, view all tags
ALERT! NOTE: This is a DistributionDocument. Please help maintain high quality documentation: This is a wiki, please fix the documentation if you find errors or incomplete content. Put questions and suggestions concerning the documentation of this topic in the comments section below. Use the Support web for problems you are having using TWiki.

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.

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

  • Create a new topic that will contain your new CSS files
  • Attach 3 new style sheets to the topic
  • Point the CSS variables in TWiki06x00.TWikiPreferences to your new files:
      * 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.
  • 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 TWiki06x00.TWikiPreferences to your new files (below the TWIKIXXXURL variables):
      * 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 variables in TWiki06x00.TWikiPreferences, you can set these in your home topic, or in any other topic. Setting style URL variables in:

  • TWiki06x00.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.

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



Comments & Questions about this Distribution Document Topic

Please use the Support forum if you have questions about TWiki features. This comment section is about the documentation of this topic.
Edit | Attach | Watch | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r4 - 2009-05-13 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2016 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.