TWiki/PatternSkinCssCookbook.mdwn

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