r4 - 16 Jan 2007 - 04:11 - Main.TWikiContributor | r3 - 25 Jun 2006 - 16:26 - Main.TWikiContributor | ||||
---|---|---|---|---|---|
PatternSkin CSS Cookbook |
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. |
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 |
Introduction |
||||
PatternSkin uses 3 style sheets (attached to PatternSkin): |
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. |
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 |
When you need lots of graphic changes: Rewriting CSS |
||||
|
|
||||
* Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css * Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css * Set TWIKICOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css |
* Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css * Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css * Set TWIKICOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css |
||||
When you need to make small adjustments: Adding to existing CSS |
When you need small adjustments: Adding to existing CSS |
||||
With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. |
With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. |
||||
|
|
||||
* Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css * Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css * Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css |
* 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 |
* 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: |
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. |
User styles are always loaded after TWiki styles. |
||||
The rest of this topic shows examples of small CSS changes. |
The rest of this topic shows examples of small CSS changes. |
||||
Recipes |
Recipes |
||||
Hide the left bar |
Hide the left bar |
||||
See example at: PatternSkinCssCookbookNoLeftBar |
See example at: PatternSkinCssCookbookNoLeftBar |
||||
Use different fonts |
Use different fonts |
||||
See example at: PatternSkinCssCookbookFonts |
See example at: PatternSkinCssCookbookFonts |
||||
No top bar |
No top bar |
||||
See example at: PatternSkinCssCookbookNoTopBar |
See example at: PatternSkinCssCookbookNoTopBar |
||||
Centered page |
Centered page |
||||
See example at: PatternSkinCssCookbookCenterPage |
See example at: PatternSkinCssCookbookCenterPage |
||||
Centered page (with a border around the page) |
Centered page (with a border around the page) |
||||
See example at: PatternSkinCssCookbookCenterPageBorder |
See example at: PatternSkinCssCookbookCenterPageBorder |
||||
Setting EditTablePlugin styles |
Setting EditTablePlugin styles |
||||
See example at: PatternSkinCssCookbookEditTableStyle |
See example at: PatternSkinCssCookbookEditTableStyle |
||||
Style sheet documentation |
|||||
See PatternSkinCss for documentation of PatternSkin CSS classes |
|||||
r4 - 16 Jan 2007 - 04:11 - TWikiContributor | r3 - 25 Jun 2006 - 16:26 - TWikiContributor | ||||
Topic PatternSkinCssCookbook . { View | History | Interweave | r4 < r3 < r2 < r1 | More } |
Revision r4 - 16 Jan 2007 - 04:11 - TWikiContributor Revision r3 - 25 Jun 2006 - 16:26 - TWikiContributor |
This site is powered by the TWiki collaboration platform.
All material on this collaboration platform is the property of the contributing authors. All material marked as authored by Eben Moglen is available under the license terms CC-BY-SA version 4. |