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.
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.
* Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css * Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css * Set TWIKICOLORURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
USERLAYOUTURL
, USERSTYLEURL
, USERCOLORSURL
. TWIKIXXXURL
variables):
* Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css * Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css * Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
* Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/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.
See example at: PatternSkinCssCookbookNoLeftBar
See example at: PatternSkinCssCookbookFonts
See example at: PatternSkinCssCookbookNoTopBar
See example at: PatternSkinCssCookbookCenterPage
See example at: PatternSkinCssCookbookCenterPageBorder
See example at: PatternSkinCssCookbookEditTableStyle