Personal Professional Christian Stuff Photographs Miscellaneous Blog email Admin

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 Changing the color scheme When you need lots of graphic changes: Rewriting CSS When you need to make small adjustments: Adding to existing CSS Recipes Hide the left bar Use different fonts No top bar Centered page Centered page (with a border around the page) Setting EditTablePlugin styles Style sheet documentation 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 TWiki.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 TWiki.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 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. 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