TWiki/PatternSkinCssCookbook.mdwn

   1 # <a name="%SYSTEMWEB%._PatternSkin CSS Coo"></a><a name=" %SYSTEMWEB%._PatternSkin CSS Co"></a> %SYSTEMWEB%.PatternSkin CSS Cookbook
   2
   3 **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]].
   4
   5 <div>
   6   <ul>
   7     <li><a href="#First Read: How to modify _Patt"> First Read: How to modify PatternSkin styles</a><ul>
   8         <li><a href="#Changing the color scheme"> Changing the color scheme</a></li>
   9         <li><a href="#When you need lots of graphic ch"> When you need lots of graphic changes: Rewriting CSS</a></li>
  10         <li><a href="#When you need to make small adju"> When you need to make small adjustments: Adding to existing CSS</a></li>
  11       </ul>
  12     </li>
  13     <li><a href="#Recipes"> Recipes</a><ul>
  14         <li><a href="#Hide the left bar"> Hide the left bar</a></li>
  15         <li><a href="#Use different fonts"> Use different fonts</a></li>
  16         <li><a href="#No top bar"> No top bar</a></li>
  17         <li><a href="#Centered page"> Centered page</a></li>
  18         <li><a href="#Centered page (with a border aro"> Centered page (with a border around the page)</a></li>
  19         <li><a href="#Setting _EditTablePlugin styles"> Setting EditTablePlugin styles</a></li>
  20       </ul>
  21     </li>
  22     <li><a href="#Style sheet documentation"> Style sheet documentation</a></li>
  23   </ul>
  24 </div>
  25
  26 ## <a name="First Read: How to modify _Patte"></a> First Read: How to modify PatternSkin styles
  27
  28 PatternSkin uses 3 style sheets (attached to %SYSTEMWEB%.PatternSkin):
  29
  30 - [layout.css](http://www.dementia.org/twiki//view/%SYSTEMWEB%/PatternSkin/layout.css) - the positioning of main page elements (blocks), widths and heights
  31 - [style.css](http://www.dementia.org/twiki//view/%SYSTEMWEB%/PatternSkin/style.css) - fonts, sizes, margins and paddings
  32 - [colors.css](http://www.dementia.org/twiki//view/%SYSTEMWEB%/PatternSkin/colors.css) - border colors, text colors and background colors
  33
  34 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.
  35
  36 ### <a name="Changing the color scheme"></a> Changing the color scheme
  37
  38 Have a look at [[PatternSkinColorSettings]].
  39
  40 ### <a name="When you need lots of graphic ch"></a> When you need lots of graphic changes: Rewriting CSS
  41
  42 - Create a new topic that will contain your new CSS files
  43 - Attach 3 new style sheets to the topic
  44 - Point the CSS variables in [[%SYSTEMWEB%.TWikiPreferences|SYSTEMWEB/TWikiPreferences]] to your new files:
  45
  46           * Set TWIKILAYOUTURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/layout.css
  47           * Set TWIKISTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
  48           * Set TWIKICOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/colors.css
  49
  50 ### <a name="When you need to make small adju"></a> When you need to make small adjustments: Adding to existing CSS
  51
  52 With CSS you cannot remove already defined classes, you can only add to it, or overwrite existing styles. <br /> Overriding default CSS is done with 3 variables: `USERLAYOUTURL`, `USERSTYLEURL`, `USERCOLORSURL`.
  53
  54 - Create a new topic that will contain your new CSS files
  55 - 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)
  56 - Point the CSS variables in [[%SYSTEMWEB%.TWikiPreferences|SYSTEMWEB/TWikiPreferences]] to your new files (below the `TWIKIXXXURL` variables):
  57
  58           * Set USERLAYOUTURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/layout.css
  59           * Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
  60           * Set USERCOLORSURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/colors.css
  61
  62 - If you use only little CSS and you've only attached one file, write:
  63
  64           * Set USERSTYLEURL = %PUBURLPATH%/%SYSTEMWEB%/YourNewTopic/style.css
  65
  66 Instead of setting these variables in [[%SYSTEMWEB%.TWikiPreferences|SYSTEMWEB/TWikiPreferences]], you can set these in your home topic, or in any other topic. Setting style URL variables in:
  67
  68 - [[%SYSTEMWEB%.TWikiPreferences|SYSTEMWEB/TWikiPreferences]]: the style is visible for all users, site-wide
  69 - [[WebPreferences]]: the style is visible for all users in one web
  70 - Home topic: the style is visible for that one user when viewing the site
  71 - Some other topic: the style is only visible in that one topic
  72
  73 User styles are always loaded after TWiki styles.
  74
  75 The rest of this topic shows examples of small CSS changes.
  76
  77 ## <a name="Recipes"></a> Recipes
  78
  79 ### <a name="Hide the left bar"></a> Hide the left bar
  80
  81 See example at: [[PatternSkinCssCookbookNoLeftBar]]
  82
  83 ### <a name="Use different fonts"></a> Use different fonts
  84
  85 See example at: [[PatternSkinCssCookbookFonts]]
  86
  87 ### <a name="No top bar"></a> No top bar
  88
  89 See example at: [[PatternSkinCssCookbookNoTopBar]]
  90
  91 ### <a name="Centered page"></a> Centered page
  92
  93 See example at: [[PatternSkinCssCookbookCenterPage]]
  94
  95 ### <a name="Centered page (with a border aro"></a> Centered page (with a border around the page)
  96
  97 See example at: [[PatternSkinCssCookbookCenterPageBorder]]
  98
  99 ### <a name="Setting _EditTablePlugin styles"></a> Setting EditTablePlugin styles
 100
 101 See example at: [[PatternSkinCssCookbookEditTableStyle]]
 102
 103 ## <a name="Style sheet documentation"></a> Style sheet documentation
 104
 105 See %SYSTEMWEB%.PatternSkinCss for documentation of PatternSkin CSS classes