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="#Your own TWiki look"> Your own TWiki look</a></li>
   7     <li><a href="#Screen parts"> Screen parts</a><ul>
   8         <li><a href="#Top bar"> Top bar</a></li>
   9         <li><a href="#Left bar"> Left bar</a><ul>
  10             <li><a href="#Putting the left bar at the righ"> Putting the left bar at the right</a></li>
  11           </ul>
  12         </li>
  13         <li><a href="#Bottom bar"> Bottom bar</a></li>
  14       </ul>
  15     </li>
  16     <li><a href="#Customizing the logo"> Customizing the logo</a></li>
  17     <li><a href="#Fonts"> Fonts</a><ul>
  18         <li><a href="#Font style"> Font style</a></li>
  19         <li><a href="#Font size"> Font size</a></li>
  20       </ul>
  21     </li>
  22     <li><a href="#Colors"> Colors</a></li>
  23     <li><a href="#Tables"> Tables</a><ul>
  24         <li><a href="#Tables in topic text"> Tables in topic text</a><ul>
  25             <li><a href="#Topic text table example"> Topic text table example</a></li>
  26           </ul>
  27         </li>
  28         <li><a href="#Attachment table, Form table"> Attachment table, Form table</a></li>
  29         <li><a href="#Other templates"> Other templates</a></li>
  30       </ul>
  31     </li>
  32   </ul>
  33 </div>
  34
  35 ## <a name="Your own TWiki look"></a> Your own TWiki look
  36
  37 You can easily create your own TWiki look by attaching modified css files to your home page:
  38
  39 - If you want to change the layout of the page, download layout.css from [[PatternSkin]]
  40 - If you want to change the spacing or colors, download style.css from [[PatternSkin]]
  41 - modify the CSS in either style sheet, using tips from this page
  42 - [attach](http://www.dementia.org/twiki//attach/Main/admin) your modified layout.css and/or style.css to your home page
  43 - as shown below, add the `USERLAYOUTURL` and `USERSTYLEURL` settings to [[your home page|Main/Admin]]
  44
  45        * Personal TWiki.PatternSkin CSS settings
  46           * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css
  47           * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css
  48
  49 ## <a name="Screen parts"></a> Screen parts
  50
  51 The PatternSkin view template uses four screen parts:
  52
  53 - The topic part - contains besides the topic content: action buttons, form table, attachment table, topic info
  54 - Top bar - used for a logo, contains Go box
  55 - Left bar - site and web navigation, contains a personal link block; may contain a Go box
  56 - Bottom bar - copyright, disclaimer
  57
  58 These parts are dynamically included topics:
  59
  60 - Top bar: [[WebTopBar]]
  61 - Left bar: included topic [[WebLeftBar]] (one WebLeftBar topic per web)
  62   - Personal links block: Main.%USERNAME%LeftBar. Your own personal leftbar: Main.adminLeftBar
  63 - Bottom bar: included topic [[WebBottomBar]]
  64
  65 ### <a name="Top bar"></a> Top bar
  66
  67 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]].
  68
  69 ### <a name="Left bar"></a> Left bar
  70
  71 The menu items are css-formatted bullet lists. So in [[WebLeftBar]] you write:
  72
  73        * *Group*
  74        * [[SomeTopic][Link 1]]
  75        * [[AnotherTopic][Link 2]]
  76        * [[ThirdTopic][Link 3]]
  77
  78 The left bar may contain a Go box instead of the top bar. Use:
  79
  80        * <input type="text" name="topic" size="16" />
  81
  82 The personal left bar block is formatted like the rest of the left bar.
  83
  84 #### <a name="Putting the left bar at the righ"></a> Putting the left bar at the right
  85
  86 If you have a low screen resolution of say, 640 by 480 pixels, it can be useful to put the left bar "out of the way", at the right side of the page - at the cost of a horizontal scroll bar to access the left (now right) bar. This CSS does this:
  87
  88 > Add this to layout.css:
  89 >
  90 >     .twikiMain {
  91 >        margin-left:0px;
  92 >     }
  93 >     .twikiLeftBar {
  94 >        margin-left:100%;
  95 >     }
  96 >     .twikiBottomBar {
  97 >        margin-left:1em;
  98 >        margin-right:0;
  99 >        padding:0;
 100 >     }
 101 >
 102 > Add this to style.css:
 103 >
 104 >     .twikiMain {
 105 >        padding-left:1em;
 106 >        padding-right:1em;
 107 >     }
 108 >     .twikiBottomBarContents {
 109 >        padding-left:0em;
 110 >     }
 111
 112 This CSS is also attached to this topic, [LowRes.css](http://www.dementia.org/twiki//view/LowRes.css). To use this style, add this to your home page:
 113
 114        * Personal TWiki.PatternSkin CSS settings
 115           * Set USERLAYOUTURL = %PUBURL%/%SYSTEMWEB%/PatternSkinCustomization/LowRes.css
 116
 117 ### <a name="Bottom bar"></a> Bottom bar
 118
 119 The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.
 120
 121 ## <a name="Customizing the logo"></a> Customizing the logo
 122
 123 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_).
 124
 125 You can also choose to set a background image for the top bar. In `style.css`, add this to .twikiTopBar:
 126
 127        background-position:top left;
 128        background-attachment:fixed;
 129        background-repeat:no-repeat;
 130        background-image:url(http://absolute_path_to_your_image);
 131
 132 and set the correct image file path.
 133
 134 ## <a name="Fonts"></a> Fonts
 135
 136 ### <a name="Font style"></a> Font style
 137
 138 Font styles are defined in `style.css` in these places:
 139
 140     html body {
 141        font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;
 142     }
 143     h1, h2, h3, h4, h5, h6 {
 144        font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
 145     }
 146     textarea {
 147        font-family:monospace;
 148     }
 149     input, select {
 150        font-family:verdana,arial,sans-serif;
 151     }
 152     .twikiSeparator {
 153        font-family:Arial,sans-serif;
 154     }
 155     .twikiEditPage .twikiSig input {
 156        font-family:monospace;
 157     }
 158
 159 ### <a name="Font size"></a> Font size
 160
 161 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).
 162
 163 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:
 164
 165     html body {
 166        ... (keep)
 167     }
 168     html>body {
 169        ... (keep)
 170     }
 171     html body {
 172        font-size:11px;
 173     }
 174
 175 ## <a name="Colors"></a> Colors
 176
 177 <span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span><span> </span>
 178
 179 To create a customised palette of colors, see [[PatternSkinPalette]].
 180
 181 ## <a name="Tables"></a> Tables
 182
 183 ### <a name="Tables in topic text"></a> Tables in topic text
 184
 185 If you have [[TablePlugin]] installed, tables in topics take on the properties from `TABLEATTRIBUTES`. Without [[TablePlugin]] (if not installed, or disabled in [[TWikiPreferences]] under `DISABLEDPLUGINS`), the tables have a default appearance that is hardcoded in Render.pm. Styles of topic text tables are not set in a style sheet. If you want to have control over the design of tables, for instance if you work with a style guide, you should add table styles under `.twikiTopic`. See for an example below.
 186
 187 #### <a name="Topic text table example"></a> Topic text table example
 188
 189 This is an example css to give tables in topic text a similar appearance. This will override settings in [[TablePlugin]]. This code should be added below the other `.twikiTopic` code in style.css:
 190
 191     .twikiTopic table {
 192        border-collapse:collapse;
 193        padding:0px;
 194        border-spacing:0px;
 195        empty-cells:show;
 196        border:0px;
 197     }
 198     .twikiTopic table th {
 199        background-color:#ccc;
 200        padding:0.5em 1em;
 201     }
 202     .twikiTopic table td {
 203        border:1px solid #eee;
 204     }
 205     /* override hardcoded font color */
 206     .twikiTopic table font {
 207        color:#1e5bbd;
 208     }
 209     .twikiTopic table th a:link,
 210     .twikiTopic table th a:visited {
 211        color:#1e5bbd;
 212        text-decoration:none;
 213     }
 214     /* don't show hover background color because we have a table header background */
 215     .twikiTopic table th a:hover {
 216        background-color:transparent;
 217        text-decoration:underline;
 218        border-width:1px;
 219     }
 220     /* no underline if a sort indicator (line) is displayed */
 221     .twikiTopic table th.twikiSortedDescendingCol a:hover,
 222     .twikiTopic table th.twikiSortedAscendingCol a:hover {
 223        text-decoration:none;
 224     }
 225     /* hide sort icons */
 226     .twikiTopic table th img,
 227     .twikiTopic table th a:link img,
 228     .twikiTopic table th a:visited img {
 229        display:none;
 230     }
 231
 232 ### <a name="Attachment table, Form table"></a> Attachment table, Form table
 233
 234 The appearance of the form table and the attachment table are set in style.css under `.twikiForm` and `.twikiAttachments`. Text in these tables is set to wrap, so often the dates are wrapped to two lines. If you prefer to have text on one line and are not disturbed by an extra wide attachment table (or when you screen resolution is big enough), add this code to `.twikiAttachments td, .twikiForm td {`:
 235
 236        white-space:nowrap;
 237
 238 ### <a name="Other templates"></a> Other templates
 239
 240 Other templates than `view` use the style `.twikiVersatileTable` for, as the name says, tables with versatile functions. Versatile tables appear a little diffent in each template page (differences are created using multiple classes). Versatile tables are mostly used to format forms to highlight important parts and to dim less important parts. See `style.css` for specific settings for each template.
 241
 242 -- TWiki:Main.ArthurClemens - 28 Aug 2004