Skip to the content of the web site.
UW CaLFskin : Common Look and Feel on a TWiki

UWclfSkin -- TWiki Skin with UW Common Look and Feel

UWclfSkin -- an Overview

UWclfSkin was developed by Paul McKone, based on the templates of, and using the stylesheets from, Jesse Rodger's original UW Common Look and Feel design.

It is intended to provide Look and Feel compatiblility with TWiki versatility.

The skin is called by setting the SKIN variable within a Topic, in the WebPreferences for the Web, the TWikiPreferences for the site, or by tacking ?skin=uw2home onto the url.

The SKIN choices are:

  • uw2home a two-column home page, with COLLAGE at the top
  • uw3home a three-column home page, with COLLAGE at the top, and a SECONDNAV area
  • uw2content a two-column content page, with a CONTENTBAR at the top
  • uw3content a three-column content page, with a CONTENTBAR at the top, and a SECONDNAV area
  • uwclf a three-column homepage, with an options/functions panel in place of the homepage COLLAGE
Typically, the SKIN variable is set to uw2content or uw3content in one of the Preferences files, and then set to uw2home or uw3home in WebHome. For development work, you may want to set SKIN = uwclf, so the options/functions panel is always visible.

UWclfSkin -- Edit and Options

To edit the Topic, or view the edit/options panel, click the invisible links
to the left of the large UW Common Look and Feel TWikiSkin title at the top of the page.

UWclfSkin -- Download and Setup

You can download the UWclfSkin (tar.gz format). Unzip it in your TWiki root directory (e.g. /usr/local/www/twiki) to install.

There's now a transitional version of the UWclfSkin to mimic the new phased look (tar.gz format). As above, unzip it in your TWiki root directory (e.g. /usr/local/www/twiki) to install. You call the transitional skin by setting SKIN to uw2home11, uw3home11, uw2content11 or uw3content11, similar to the original skin, but with the number 11 tacked on the end.

The skin uses these template files

  • twiki.uwclf.tmpl -- the main formatting template
  • view.uw2home.tmpl -- two columns, with collage
  • view.uw3home.tmpl -- three columns, with collage
  • view.uw2content.tmpl -- two columns, with contentbar
  • view.uw3content.tmpl -- three columns, with contentbar
  • view.uwclf.tmpl -- editing (and other) options
  • edit.uwclf.tmpl -- two columns, text entry
  • preview.uwclf.tmpl -- two column, content preview
  • view.print.uwclf.tmpl -- a printable, one column page
Other functions use the default templates; the UWclfSkin focuses on the user experience, rather than being a complete TWiki environment.

The templates call additional files

  • layout.css -- mostly "navigation" fixes
  • style.css -- colours, heading sizes
  • script.js -- JavaScript to perform a variety of tasks, such as deciding which sections of a menu to display

UWclf -- Navigation Menus

PRIMARYNAV -- The Primary Navigation Menu

The Primary Navigation Menu is kept in the topic pointed to by the variable PRIMARYNAV. The PRIMARYNAV file contains lists of single- or double-indented links, such as:

<!-- This menu controls navigation of this site.
There should be a link to every Topic.
   * [[TWiki.WebHome][TWiki]]  -- The TWiki Home Page
      * [[][contact us]]
      * [[WebIndex][Index]]  -- an auto-generated index of Topics
      * [[WebTopicList][Topics]]
      * [[WebSearch][Search]]
      * [[WebChanges][Changes]]
   * [[Main.WebHome][Main]]
      * [[AboutUs][About Us]]
      * [[OurServices][Services]]
      * [[OtherStuff][Miscellaneous]]
   * [[Sandbox.WebHome][Sandbox]]
   * [[Trash.WebHome][Trash]]

which represent the main index, and related subindices for the website.

A JavaScript file, script.js, loads with each page, and shows/hides the appropriate menus and sub-menus, based on the name of the page being displayed.

The script also removes <!-- comments --> and -- explanatory phrases that follow links.

The comments are handy for reminding users how the menu is structured, and the explanatory phrases are useful for creating a site map file, containing, for example:

---+ Main Navigation Menu (full expanded, with notes)
<!-- Show main menu -->

   * [[OtherLinks][Other Useful Links]] -- You may need these

Note: If Javascript isn't working/enabled on the browser, comments and explanations will be included in the uncollapsed menu that's displayed.

Custom Navigation Example

If you want to refer to the same Topic from multiple submenus, create the Topic, and use the [[TWiki.TWikiVariables#INCLUDE_page_include_other_topic][ Warning: Can't find topic ""."" ]] command to include a copy of it in additional differently-named Topics.

SECONDNAV -- an additional "freeform" navarea displayed with uw3home and uw3content

It's useful for setting special content on a three-column page

<!-- HTML comment tags keep settings from being displayed -->

   * Set SKIN = uw3content
   * Set SECONDNAV = FileOfSpecialContent

Preference Variables used by UWclf templates

(Add all of these to the TWiki TWikiPreferences, or LocalSitePrefs TWikiPreferences in TWiki4, and the most-commonly-changed ones to the current web's WebPreferences and any individual topics where they need to be different)

Most-commonly-changed preference variables (by Web or by Topic)

   * The SKIN determines the topic's appearance (home or content, two or 3 columns: uw2home, uw3home, uw2content, uw3content)      
      * Set SKIN = uw2content
   * Variables that are incorporated into the header meta and style tags
      * Set DESCRIPTION = TWiki Website with UW Common Look and Feel
      * Set KEYWORDS = TWiki, cool, authenticated content updates from any web browser
      * Set AUTHOR = Paul McKone
   * Collage appears when SKIN == uw2home or uw3home
      * Set COLLAGESRC =
      * Set COLLAGEALT = UW: Building a Talent Trust
   * Contentbar appears when SKIN == uw2content or uw3content
      * Set CONTENTBAR = <nop>%TOPIC% : a unique name for this page
   * Topics that produce Left and Right Navigation
      * Set PRIMARYNAV = %TWIKIWEB%.UWclfPrimaryNav
      * Set SECONDNAV = UWclfSecondNav

N.B. When setting variables within a topic, enclose them in HTML comment tags (<!-- ... -->) to prevent their display.

Other required preference variables

Usually set in TWikiPreferences as defaults, these can also be set in WebPreferences, or within an individual Topic.

   * University of Waterloo Logo
      * Set UWLOGOIMG =
      * Set UWLOGOURL =
      * Set UWLOGOALT = UW home

   * Where the local search (in search.tmpl) should look
      * Set LOCALSEARCH =

   * Topics that produce Left and Right Navigation
      * Set PRIMARYNAV = %TWIKIWEB%.UWclfPrimaryNav
      * Set SECONDNAV = %TWIKIWEB%.UWclfSecondNav

   * WORDMARK can be text string or &lt;img /&gt; tag
      * Set WORDMARK = <img src="" width="400" height="30" alt="default wordmark" />
      - or -
      * Set WORDMARK = UW Common Look and Feel TWiki
      * Set WORDMARKURL =

   * Collage appears when SKIN == uw2home or uw3home
      * Set COLLAGESRC =
      * Set COLLAGEALT = UW: Building a Talent Trust

   * Contentbar appears when SKIN == uw2content or uw3content
      * Set CONTENTBAR = %WEB% %SEP% <nop>%TOPIC%

   * Appears in the footer, you'll want to change these to your own information:
      * Set DEPARTMENTADDRESS = University of Waterloo<br />200 University Avenue West<br />Waterloo, ON N2L 3G1<br /> (519) 888-4567
      * Set CAMPAIGNSRC =
      * Set CAMPAIGNURL =
      * Set CAMPAIGNALT = Campaign Waterloo
      * Set BOTTOMLINKS = [[][contact us]] %SEP% [[][web feedback]] %SEP% %SEP% [[][2005 University of Waterloo]]

   * The SKIN determines the topic's appearance (home or content, two or 3 columns)
      * can be uw2home, uw3home, uw2content, uw3content
      * may be set in TWiki.TWikiPreferences, WebPreferences, or individual topic files
      * default should be one of the "content"s, setting "home" for the homepage, usually [[Main.WebHome]]
      * Set SKIN = uw2content

A Caution about Preference Precedence

The preferences used for each page are set sequentially, according to the settings found in:

  1. the central TWikiPreferences topic,
  2. the WebPreferences topic for each web,
  3. the user's TWikiGuest topic, and finally,
  4. the individual topic being displayed (which can be a source of confusion).
e.g. if you set WORDMARK in TWikiGuest, that's the value that will be used (overriding the WORDMARK setting in TWikiPreferences and WebPreferences). If WORDMARK is set in an individual topic, that's the value that will be used for that topic, no matter where else it is set.

Skin Info

Description: University of Waterloo Common Look and Feel
Screenshot: Click for full screen image
Preview: Preview with this topic
Base Name: uwclf
Skin Author: TWiki:Main/PaulMcKone
Skin Version: 21 Jun 2007 (v2)
Change History:
04 Jun 2007: Dakar update (v2)
03 Apr 2006: Initial version (v1)
Skin Home:

Handy TWiki Help

-- PaulMcKone - 21 Jun 2007