Difference: PatternSkinCssCookbook (4 vs. 5)

Revision 52005-10-14 - TWikiContributor

Line: 1 to 1
 
Changed:
<
<

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.
Line: 8 to 8
 

First Read: How to modify PatternSkin styles

Changed:
<
<
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
>
>
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.
Line: 21 to 21
 

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

Changed:
<
<
    • Set TWIKILAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
    • Set TWIKISTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
    • Set TWIKICOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
>
>
    • 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

Line: 33 to 33
 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)
Changed:
<
<
>
>
 

Changed:
<
<
    • Set USERLAYOUTURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/layout.css
    • Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
    • Set USERCOLORSURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/colors.css
>
>
    • 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:

Changed:
<
<
    • Set USERSTYLEURL = %PUBURLPATH%/%TWIKIWEB%/YourNewTopic/style.css
>
>
    • Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
 
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:
>
>
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:
 
  • 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
Line: 81 to 81
 See example at: PatternSkinCssCookbookEditTableStyle

Style sheet documentation

Changed:
<
<
See PatternSkinCss for documentation of PatternSkin CSS classes
>
>
See PatternSkinCss for documentation of PatternSkin CSS classes
 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 1999-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.PatternSkinCssCookbook.