View topic | Edit | WYSIWYGAttachPrintable
r2 - 17 Aug 2004 - 04:44:48 - PeterThoeny?You are here: Astrophysics Wiki >  TWiki Web  > PatternSkinCustomization

Customization of PatternSkin

This page describes ways to change the layout, fonts and colors of PatternSkin.

Screen parts

The PatternSkin view template uses four screen parts:

  • The topic part - contains besides the topic content: action buttons, form table, attachment table, topic info
  • Top bar - used for a logo, contains Go box
  • Left bar - site and web navigation, contains a personal link block; may contain a Go box
  • Bottom bar - copyright, disclaimer

These parts are dynamically included topics:

  • Top bar: WebTopBar
  • Left bar: included topic WebLeftBar (one WebLeftBar topic per web)
    • Personal links block: Main.%USERNAME%LeftBar. Your own personal leftbar: Main.guestLeftBar
  • Bottom bar: included topic WebBottomBar

Top bar

The top bar is mainly used as branding space. To change the screen room for the logo, see below, Customizing the logo.

Left bar

The menu items are css-formatted bullet lists. So in WebLeftBar you write:

   * *Group*
   * [[SomeTopic][Link 1]]
   * [[AnotherTopic][Link 2]]
   * [[ThirdTopic][Link 3]]

The left bar may contain a Go box instead of the top bar. Use:

   * <input type="text" name="topic" size="16" />

The personal left bar block is formatted like the rest of the left bar.

Bottom bar

The bottom bar contains the copyright disclaimer, but may contain other information, perhaps a web list.

Customizing the logo

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).

You can also choose to set a background image for the top bar. In style.css, add this to .twikiTopBar:

   background-position:top left;
and set the correct image file path.


Font style

Font styles are defined in style.css in these places:

html body {
   font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;
h1, h2, h3, h4, h5, h6 {
   font-family:"Lucida Grande", helvetica, lucida, verdana, sans-serif;
textarea {
input, select {
.twikiSeparator {
.twikiEditPage .twikiSig input {

Font size

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).

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:

html body {
   ... (keep)
html>body {
   ... (keep)   
html body {

-- TWiki:Main.ArthurClemens - 15 Aug 2004

View topic | Edit |  | WYSIWYG | Attach | Printable | Raw View | Backlinks: Web, All Webs | History: r5 < r4 < r3 < r2 < r1 | More topic actions...

key Log In or Register

Main Web Users Groups Index Search Changes Notifications Statistics Preferences

Webs Main Sandbox TWiki Zen Information

Main Web Users Groups Index Search Changes Notifications Statistics Preferences

Webs Main Sandbox TWiki Zen

Astrophysics Wiki

Edit Wysiwyg Attach Printable
This site is powered by the TWiki collaboration platformCopyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Astrophysics Wiki? Send feedback
Note: Please contribute updates to this topic on at TWiki:TWiki.PatternSkinCustomization