data/TWiki/PatternSkinCssCookbook.txt
changeset 0 414e01d06fd5
equal deleted inserted replaced
-1:000000000000 0:414e01d06fd5
       
     1 %META:TOPICINFO{author="TWikiContributor" date="1129333294" format="1.1" version="5"}%
       
     2 
       
     3 ---+!! %SYSTEMWEB%.PatternSkin CSS Cookbook
       
     4 
       
     5 *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.
       
     6 
       
     7 %TOC%
       
     8 
       
     9 ---++ First Read: How to modify !PatternSkin styles
       
    10 
       
    11 !PatternSkin uses 3 style sheets (attached to %SYSTEMWEB%.PatternSkin):
       
    12    * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/layout.css][layout.css]] - the positioning of main page elements (blocks), widths and heights
       
    13    * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/style.css][style.css]] - fonts, sizes, margins and paddings
       
    14    * [[%PUBURLPATH%/%SYSTEMWEB%/PatternSkin/colors.css][colors.css]] - border colors, text colors and background colors
       
    15 
       
    16 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.
       
    17 
       
    18 ---+++ Changing the color scheme
       
    19 Have a look at PatternSkinColorSettings.
       
    20 
       
    21 ---+++ When you need lots of graphic changes: Rewriting CSS
       
    22    * Create a new topic that will contain your new CSS files
       
    23    * Attach 3 new style sheets to the topic
       
    24    * Point the CSS variables in [[%SYSTEMWEB%.TWikiPreferences]] to your new files:
       
    25 <pre>
       
    26       * <nop>Set TWIKILAYOUTURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/layout.css
       
    27       * <nop>Set TWIKISTYLEURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/style.css
       
    28       * <nop>Set TWIKICOLORSURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/colors.css
       
    29  </pre>
       
    30 
       
    31 ---+++ When you need to make small adjustments: Adding to existing CSS
       
    32 With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. <br />
       
    33 Overriding default CSS is done with 3 variables: =USERLAYOUTURL=, =USERSTYLEURL=, =USERCOLORSURL=.
       
    34    * Create a new topic that will contain your new CSS files
       
    35    * 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)
       
    36    * Point the CSS variables in [[%SYSTEMWEB%.TWikiPreferences]] to your new files (below the =TWIKIXXXURL= variables):
       
    37 <pre>
       
    38       * <nop>Set USERLAYOUTURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/layout.css
       
    39       * <nop>Set USERSTYLEURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/style.css
       
    40       * <nop>Set USERCOLORSURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/colors.css
       
    41  </pre>
       
    42    * If you use only little CSS and you've only attached one file, write:
       
    43 <pre>
       
    44       * Set USERSTYLEURL = %<nop>PUBURLPATH%/%<nop>SYSTEMWEB%/YourNewTopic/style.css
       
    45  </pre>
       
    46 
       
    47 Instead of setting these variables in [[%SYSTEMWEB%.TWikiPreferences]], you can set these in your home topic, or in any other topic. Setting style URL variables in:
       
    48    * [[%SYSTEMWEB%.TWikiPreferences]]: the style is visible for all users, site-wide
       
    49    * WebPreferences: the style is visible for all users in one web
       
    50    * Home topic: the style is visible for that one user when viewing the site
       
    51    * Some other topic: the style is only visible in that one topic
       
    52 
       
    53 User styles are always loaded after TWiki styles.
       
    54 
       
    55 The rest of this topic shows examples of small CSS changes.
       
    56 
       
    57 ---++ Recipes
       
    58 
       
    59 ---+++ Hide the left bar
       
    60    
       
    61 See example at: PatternSkinCssCookbookNoLeftBar
       
    62 
       
    63 ---+++ Use different fonts
       
    64 
       
    65 See example at: PatternSkinCssCookbookFonts
       
    66 
       
    67 ---+++ No top bar
       
    68 
       
    69 See example at: PatternSkinCssCookbookNoTopBar
       
    70 
       
    71 ---+++ Centered page
       
    72 
       
    73 See example at: PatternSkinCssCookbookCenterPage
       
    74 
       
    75 ---+++ Centered page (with a border around the page)
       
    76 
       
    77 See example at: PatternSkinCssCookbookCenterPageBorder
       
    78 
       
    79 ---+++ Setting !EditTablePlugin styles
       
    80 
       
    81 See example at: PatternSkinCssCookbookEditTableStyle
       
    82 
       
    83 ---++ Style sheet documentation
       
    84 See %SYSTEMWEB%.PatternSkinCss for documentation of !PatternSkin CSS classes