Customization of PatternSkin

Your own TWiki look

• If you want to change the layout of the page, download layout.css from PatternSkin
• If you want to change the spacing or colors, download style.css from PatternSkin
• modify the CSS in either style sheet, using tips from this page
• attach your modified layout.css and/or style.css to your home page
• as shown below, add the USERLAYOUTURL and USERSTYLEURL settings to your home page

   * Personal TWiki.PatternSkin CSS settings
      * Set USERLAYOUTURL = %PUBURL%/%MAINWEB%/%WIKINAME%/layout.css
      * Set USERSTYLEURL = %PUBURL%/%MAINWEB%/%WIKINAME%/style.css

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

• 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

Left bar

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

Putting the left bar at the right

Add this to layout.css:

<-- /* -->

<-- */ -->

<-- /* -->

<-- */ -->

• Personal PatternSkin CSS settings
  • Set USERLAYOUTURL = http://twiki.oats.inaf.it/twiki/pub/TWiki/PatternSkinCustomization/LowRes.css

Bottom bar

Customizing the logo

   background-position:top left;
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-image:url(http://absolute_path_to_your_image);

Fonts

Font style

<--
/*
-->

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 {
   font-family:monospace;
}
input, select {
   font-family:verdana,arial,sans-serif;
}
.twikiSeparator {
   font-family:Arial,sans-serif;
}
.twikiEditPage .twikiSig input {
   font-family:monospace;
}

<--
*/
-->

Font size

<-- /* -->

html body {
   ... (keep)
}
html>body {
   ... (keep)   
}
html body {
   font-size:11px;
}

<-- */ -->

Colors

Tables

Tables in topic text

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.

Topic text table example

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:

<-- /* -->

<-- */ -->

Attachment table, Form table

<-- /* -->

   white-space:nowrap;

<-- */ -->

Other templates