TWiki/PatternSkinCustomization.mdwn

   1 # <a name="Customization of _PatternSkin"></a><a name=" Customization of _PatternSkin"></a> Customization of PatternSkin
   2
   3 This page describes ways to change the layout, fonts and colors of [[PatternSkin]].
   4
   5 <div><span>Page contents:</span><ul>
   6     <li><a href="#Screen parts"> Screen parts</a><ul>
   7         <li><a href="#Top bar"> Top bar</a></li>
   8         <li><a href="#Left bar"> Left bar</a></li>
   9         <li><a href="#Bottom bar"> Bottom bar</a></li>
  10       </ul>
  11     </li>
  12     <li><a href="#Customizing the logo"> Customizing the logo</a></li>
  13     <li><a href="#Fonts"> Fonts</a><ul>
  14         <li><a href="#Font style"> Font style</a></li>
  15         <li><a href="#Font size"> Font size</a></li>
  16       </ul>
  17     </li>
  18   </ul>
  19 </div>
  20
  21 ## <a name="Screen parts"></a> Screen parts
  22
  23 The PatternSkin view template uses four screen parts:
  24
  25 - The topic part - contains besides the topic content: action buttons, form table, attachment table, topic info
  26 - Top bar - used for a logo, contains Go box
  27 - Left bar - site and web navigation, contains a personal link block; may contain a Go box
  28 - Bottom bar - copyright, disclaimer
  29
  30 These parts are dynamically included topics:
  31
  32 - Top bar: [[WebTopBar]]
  33 - Left bar: included topic [[WebLeftBar]] (one WebLeftBar topic per web)
  34   - Personal links block: Main.%USERNAME%LeftBar. Your own personal leftbar: Main.adminLeftBar
  35 - Bottom bar: included topic [[WebBottomBar]]
  36
  37 ### <a name="Top bar"></a> Top bar
  38
  39 The top bar is mainly used as branding space. To change the screen room for the logo, see below, [[Customizing the logo|Main/TOPIC#Customizing_the_logo]].
  40
  41 ### <a name="Left bar"></a> Left bar
  42
  43 The menu items are css-formatted bullet lists. So in [[WebLeftBar]] you write:
  44
  45        * *Group*
  46        * [[SomeTopic][Link 1]]
  47        * [[AnotherTopic][Link 2]]
  48        * [[ThirdTopic][Link 3]]
  49
  50 The left bar may contain a Go box instead of the top bar. Use:
  51
  52        * <input type="text" name="topic" size="16" />
  53
  54 The personal left bar block is formatted like the rest of the left bar.
  55
  56 ### <a name="Bottom bar"></a> Bottom bar
  57
  58 The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.
  59
  60 ## <a name="Customizing the logo"></a> Customizing the logo
  61
  62 The top bar is 60 pixels high, and has a padding of 5 pixels on top, bottom and left, so the logo should be 50 pixels high. If your logo image has a different size, you can either alter the padding in `style.css` (.twikiTopBarContents) or change the top bar height in `layout.css` (look for the comment _setting the height of the top bar_).
  63
  64 You can also choose to set a background image for the top bar. In `style.css`, add this to .twikiTopBar:
  65
  66        background-position:top left;
  67        background-attachment:fixed;
  68        background-repeat:no-repeat;
  69        background-image:url(http://absolute_path_to_your_image);
  70
  71 and set the correct image file path.
  72
  73 ## <a name="Fonts"></a> Fonts
  74
  75 ### <a name="Font style"></a> Font style
  76
  77 Font styles are defined in `style.css` in these places:
  78
  79     html body {
  80        font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;
  81     }
  82     h1, h2, h3, h4, h5, h6 {
  83        font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
  84     }
  85     textarea {
  86        font-family:monospace;
  87     }
  88     input, select {
  89        font-family:verdana,arial,sans-serif;
  90     }
  91     .twikiSeparator {
  92        font-family:Arial,sans-serif;
  93     }
  94     .twikiEditPage .twikiSig input {
  95        font-family:monospace;
  96     }
  97
  98 ### <a name="Font size"></a> Font size
  99
 100 Font sizes in PatternSkin are scalable. This means that even on Windows Explorer, the text in the browser can scale with the user settings (in contrast to many sites where texts have a fixes pixel size, these cannot be changed by the user).
 101
 102 Scalable text is a big accessibility asset. If you notwithstanding want to have a fixed font, or if you want to set the default size smaller or bigger, the easiest way is to make a new entry for body, below the 2 other entries:
 103
 104     html body {
 105        ... (keep)
 106     }
 107     html>body {
 108        ... (keep)
 109     }
 110     html body {
 111        font-size:11px;
 112     }
 113
 114 -- TWiki:Main.ArthurClemens - 15 Aug 2004