Powered by TWiki TWiki > TWiki > UWclfSkin TWiki webs:
Main | TWiki | Sandbox
TWiki . { Welcome | Register | Changes | Topics | Index | Search | Go } Log In or Register

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:

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

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


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, 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 -->
%INCLUDE{"%PRIMARYNAV%"}%

   * [[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 = 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 = 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 = http://www.uwaterloo.ca/images/template/uwlogo.gif
      * Set UWLOGOURL = http://www.uwaterloo.ca/
      * Set UWLOGOALT = UW home

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

   * 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="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][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)
Dependencies:  
Skin Home: http://www.unlimited.uwaterloo.ca/twiki/bin/view/TWiki/UWclfSkin
Feedback: http://www.unlimited.uwaterloo.ca/twiki/bin/view/TWiki/UWclfSkinDev
Appraisal: http://www.unlimited.uwaterloo.ca/twiki/bin/view/TWiki/UWclfSkinAppraisal


Handy TWiki Help

-- PaulMcKone - 21 Jun 2007

Attachment sort Action Size Date Who Comment
jpg UWclfSkin.jpg manage 16.9 K 07 Oct 2005 - 15:38 UnknownUser  
pl UWclfSkinDownload.pl manage 0.6 K 11 Oct 2005 - 19:33 UnknownUser  
jpg Waterloo.jpg manage 17.6 K 07 Oct 2005 - 15:38 UnknownUser  
gif fullscreen.gif manage 25.2 K 21 Jun 2007 - 13:28 UnknownUser  
gif screenshot.gif manage 7.2 K 21 Jun 2007 - 13:28 PaulMcKone  
js script.js manage 5.2 K 28 Feb 2008 - 20:47 UnknownUser  
Topic UWclfSkin . { Edit | WYSIWYG | Attach | Backlinks: Web All webs | Printable | History: r97 < r96 < r95 < r94 < r93 More }

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 TWiki? Send feedback
Note: Please contribute updates to this topic on TWiki.org at TWiki:TWiki.UWclfSkin