PatternSkin CSS CookbookQuestions and answers on how to customize the default look of TWiki for your own needs, using style sheets. For configuring page elements, see PatternSkinCustomization.IntroductionPatternSkin uses 3 style sheets (attached to PatternSkin): | ||||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
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.
When you need lots of graphic changes: Rewriting CSS | ||||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
When you need small adjustments: Adding to existing CSSWith 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 . | ||||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
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: | ||||||||
Changed: | ||||||||
< < |
| |||||||
> > |
| |||||||
User styles are always loaded after TWiki styles.
The rest of this topic shows examples of small CSS changes.
RecipesHide the left bar | ||||||||
Changed: | ||||||||
< < | ||||||||
> > | ||||||||
See example at: PatternSkinCssCookbookNoLeftBar
Use different fontsSee example at: PatternSkinCssCookbookFontsNo top barSee example at: PatternSkinCssCookbookNoTopBarCentered pageSee example at: PatternSkinCssCookbookCenterPageCentered page (with a border around the page)See example at: PatternSkinCssCookbookCenterPageBorderSetting EditTablePlugin stylesSee example at: PatternSkinCssCookbookEditTableStyle |
PatternSkin CSS CookbookQuestions and answers on how to customize the default look of TWiki for your own needs, using style sheets. For configuring page elements, see PatternSkinCustomization.IntroductionPatternSkin uses 3 style sheets (attached to PatternSkin):
When you need lots of graphic changes: Rewriting CSS
* Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css * Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css * Set TWIKICOLORURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css When you need small adjustments: Adding to existing CSSWith 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 .
* 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.cssInstead 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:
RecipesHide the left barSee example at: PatternSkinCssCookbookNoLeftBarUse different fontsSee example at: PatternSkinCssCookbookFontsNo top barSee example at: PatternSkinCssCookbookNoTopBarCentered pageSee example at: PatternSkinCssCookbookCenterPageCentered page (with a border around the page)See example at: PatternSkinCssCookbookCenterPageBorderSetting EditTablePlugin stylesSee example at: PatternSkinCssCookbookEditTableStyle |