UW Common Look and Feel TWikiSkin | UWclf Skin | University of Waterloo

Skip to the content of the web site.

UW CaLFskin : Common Look and Feel on a TWiki

UWclf -- TWiki Skin with UW Common Look and Feel

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:


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 -- Setup

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

The skin uses these template files

Other functions use the default templates; the UWclfSkin focuses on the user experience, rather than being a complete TWiki environment.

The template files expect to find

(The ..Nav topics are explained below.)

The templates call additional CSS files


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
      * [[mailto:info@uwaterloo.ca][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 UWclfJavaScript 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)
%INCLUDE{"%PRIMARYNAV%"}%

   * [[OtherLinks][Other Useful Links]]

*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 %INCLUDE{}% 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

   * Set SKIN = uw3content
   * Set SECONDNAV = [[SpecialLink][Special Link]]


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 = http://www.uwaterloo.ca/images/homepage/image1.jpg
      * 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 = %NAVGROUP%UWclfSecondNav

Additional preference variables

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

   * Variables that are incorporated into the header meta and style tags
      * Set UWCLFLAYOUTURL = %PUBURL%/%TWIKIWEB%/UWclfSkin/layout.css
      * Set UWCLFSTYLEURL = %PUBURL%/%TWIKIWEB%/UWclfSkin/style.css

   * University of Waterloo Logo
      * Set UWLOGOIMG = http://www.uwaterloo.ca/images/template/uwlogo.gif
      * Set UWLOGOURL = http://www.uwaterloo.ca/
      * Set UWLOGOALT = UW home

   * Where the local search (in TWiki.UWclfSearch) should look
      * Set LOCALSEARCH = www.uwaterloo.ca

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

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

   * Collage appears when SKIN == uw2home or uw3home
      * Set COLLAGESRC = http://www.uwaterloo.ca/images/homepage/image1.jpg
      * 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 = http://www.uwaterloo.ca/images/template/littlecampaignlogo.gif
      * Set CAMPAIGNURL = http://campaign.uwaterloo.ca
      * Set CAMPAIGNALT = Campaign Waterloo
      * Set BOTTOMLINKS = [[http://information.uwaterloo.ca/howtoreach.html][contact us]] %SEP% [[http://web.uwaterloo.ca/feedbackform.php][web feedback]] %SEP% http://www.uwaterloo.ca %SEP% [[http://www.uwaterloo.ca/copyright.html][&copy;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.


Handy TWiki Help

-- PaulMcKone - 03 Apr 2006