Computer Laboratory

ucam2008 style

The latest Computer Laboratory web house style is based on the style developed and released by the Computing Service for the University's main website in 2008 (version 4). To activate it under ucampas, add the line “style=ucam2008,” to your uconfig.txt file.

Colour schemes: Several alternative colour schemes are available, which can be specified as in “style=ucam2008(blue),”. They are: blue, blue-green, blue-white, green-navy, turq-blue, purple, teal. Use them as a matter of taste or to visually distinguish different sections of the site. (Blue is currently the default for the Computer Laboratory main web site.)

What has changed?

The 2008 style was designed from scratch based on a draft prepared by a commercial web designer. It has little resemblance with the previous ucam2006 housestyle and makes use of more advanced Cascading Style Sheet (CSS) facilities than its predecessor.

Limitations

The new left-hand navigation bar currently only supports two depth levels. You may therefore have to restart the navigation tree more often (using navtop). Ucampas will output a warning where this limit is exceeded, and then prune the displayed navigation tree as needed.

Strict HTML

With the ucam2008 house style, you should preferably use the "strict" subset of HTML, rather than "transitional" HTML. Start your HTML file with

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

rather than using "-//W3C//DTD HTML 4.01 Transitional//EN".

A HTML validator will then tell you if you have used any outdated HTML features that you should no longer use.

In particular avoid text appearing immediately as the content of <body>, without any enclosing <p>, <ul>, etc. element. Such text will show up in an abnormally large font size.

Also avoid stylistic attributes (e.g., align, bgcolor, background, border, clear) or elements (e.g., center, font). Instead use the Cascading Style Sheet (CSS) mechanism via the style attribute or element. For example change the out-dated

<p><font color=red>Warning!</font>

into

<p style="color: red">Warning!

Images float

example Images in <p> and <li> elements now by default float on the right and have a grey border. The designers of the house style suggest that such images be 200×200 pixels large, or at least 200 pixels wide.

example Use <img class=left> to get a left-floating image instead.

If you don't want your images to float or have a grey border, you can put them inside a <div> element rather than in a <p>. Or use <img class=centre ...> to have them centered and without a border.

Use <img class=inline> to position the image inline with the text, like [media icon], e.g. to refer to icons, small logos, etc.

Use <img class=screenshot> for screenshots. If you want to make this the default for the entire page, use <body class=screenshots>.

New features

Right-hand link column

The style distinguishes between a 1, 2, and 3-column layout, depending on whether you want to have a navigation bar in a left-hand column, and/or boxes with additional links in a right-hand column. These styles are selected by different body classes, but ucampas takes care of that for you. You can activate or deactivate the left-hand column with the navbar parameter. To add a right-hand column, append at the end of your body something like

  <div id="content-secondary">
    <dl class="links">
       <dt>Quick links
       <dd><a href="...">some link</a>
       <dd><a href="...">another link</a>
       <dt>Slow links
       <dd><a href="...">yet another link</a>
    </dl>
  </div>

Ucampas will then take this div and move it to the appropriate location within the style template to create the right-hand column.

The right-hand link column helps to make a clearer distinction between links that are part of the navigation tree (left) and links that lead elsewhere or to non-HTML documents (right). However, a 3-column layout substantially reduces the width left for the page body.

Front page layout

Front pages that combine some descriptive text with with a multi-column menu of prominent links can be typeset inside <body class=home>, which will trigger different layout rules. The structure of a typical front page:

<body class=home>
<div id="content-primary">
  <p>Some text ...
  <div class="menu-wrapper">
    <dl class="menu">
      <dt>Information for</dt>
      <dd><a href="students/">Students</a>
      <dd><a href="visitors/">Visitors</a>
      ...
    </dl>

    <dl class="menu">
      <dt>Information about</dt>
      <dd><a href="people/">People</a>
      <dd><a href="research/">Research</a>
      <dd><a href="seminars/">Seminars</a>
      ...
    </dl>
  </div>
  <div class="spotlight-wrapper">
  ...
</div>
<div id="content-secondary">
  <div id="news">
    <h2>News</h2>
    <ul>
      <li><a href="story_a/">Story A</a>
      ...
    </ul>
  </div>
  <div id="feature">
    <h2>Initiatives</h2>
    <ul>
      <li><a href="project_a/">Project A</a>
      ...
    </ul>
  </div>
  <dl class="links">
    <dt>Quick links</dt>
    <dd><a href="contact/">Contact details</a>
    <dd><a href="misc/">Miscellaneous</a>
    ...
  </dl>
</div>
</body>

Link icons

By adding a class="icon-..." attribute to the <a> element, you can prefix hyperlinks with a suitable icon, to visually clarify the nature of the link destination. Example: <a class="icon-pdf" href="file.pdf">document</a>.

Available icon classes:

More (icon-more)
Look at this (icon-look)
Follow this (icon-follow)
Arrow to top (icon-top)
Arrow down (icon-down)
Arrow left (icon-left)
Arrow right (icon-right)
Print (icon-print)
RSS feeds (icon-rss)
Audio link (icon-audio)
Photo link (icon-photo)
Video (icon-video)
Community Directory (icon-community)
More about this (icon-more)
Restricted content (icon-restricted)
Help link (icon-help)
Email link (icon-email)
Quick links icon (icon-quick-links)
Media links icon (icon-media)
External links icon (icon-external)
In this section icon (icon-section)
PDF document icon (icon-pdf)
Word document icon (icon-word)
Excel document icon (icon-excel)

Similarly, <li> elements can have some alternative bullet shapes:

  • normal list element

Alert boxes

Normal alert

You can use <div class="normal alert"> to highlight a section of text as particularly important. Use <h2> inside for a headline.

Warning

With <div class="warning alert"> the alert box turns red and will show a warning triangle.

Table styles

Use <table class="data"> if you want your table full-width and cell content left adjusted, top aligned, and cells bordered by thin grey lines, as in

FormatDimensions
A3297 × 420 mm²
A4210 × 297 mm²
A5148 × 210 mm²
A6105 × 148 mm²
othersThere are lots more explained in the Wikipedia article on "Paper size" and on various other web pages.
<tr class="alt"> will highlight a particular column with a different background colour.

Local extensions

In the Computer Laboratory version of the ucam2006 style files, we made a few local extensions that you might find useful, and these continue to work in ucam2008:

Table styles

Use <table class="solid"> if you want your table cell content left adjusted, top aligned, and cells bordered by black solid lines, as in

FormatDimensions
A3297 × 420 mm²
A4210 × 297 mm²
A5148 × 210 mm²
A6105 × 148 mm²
othersThere are lots more explained in the Wikipedia article on "Paper size" and on various other web pages.

Use <table class=grey> if you want your table cell content left adjusted, top aligned, with grey background, as in

FormatDimensions
A3297 × 420 mm²
A4210 × 297 mm²
A5148 × 210 mm²
A6105 × 148 mm²
othersThere are lots more explained in the Wikipedia article on "Paper size" and on various other web pages.

Use <table class=plain> if you want your table cells to look like normal text:

Lunch break:13:00 – 14:00
Tea breaks: 10:30 – 11:00
15:30 – 16:00

Notes

You can use <p class=note> or <div class=note> if you want to insert a remark (like a footnote) in smaller font size and optically separated from the main text by a gray background:

Remember: Not every footnote is actually important, but they can enrich your life with detail.

Command-line examples

You can use <pre class=sh> for giving examples of how to do something on the shell command-line interface of a computer. In there, you can use <kbd> to mark user input, <var> to mark variable content and <em> to provide some emphasis on part of the output. Example:

$ date -I
2009-02-25
$ ifconfig
eth0      Link encap:Ethernet  HWaddr 00:11:11:33:76:AA
          inet addr:128.232.8.5  Bcast:128.232.15.255  Mask:255.255.240.0
          inet6 addr: fe80::211:11ff:fe33:76aa/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
$ cd /homes/crsid/.ssh
C:\> ipconfig

With <samp class=sh> you get the same inline: ssh user@host.cl.cam.ac.uk

Configuration parameters

In addition to the uconfig.txt configuration parameters described in the Ucampas Reference Manual, the ucam2008 style also supports the following:

Specifies the links added at the top-right corner of the page. These are meant as short-cuts to important site-wide pages (contacts, index, search, faqs, etc.). Example:
headlinks=(
  ("Contact us", href="http://www.cl.cam.ac.uk/contact/"),
  ("A–Z", href="http://www.cl.cam.ac.uk/az/"),
  ("Advanced search", href="http://www.cl.cam.ac.uk/search/"),
),
Customize the choice of search engine and search parameters used for the search field in the top-right hand corner. The default type uses the University search engine, the type "google" switches to this popular alternative. The optional key-value pairs provided will be passed on to the search engine as hidden form fields. Examples:
University search engine:
search=,
University search engine restricted to www.cl.cam.ac.uk:
search=(qp="site:www.cl.cam.ac.uk"),
Google with customization parameters:
search=google(domains="cam.ac.uk;www.cl.cam.ac.uk",
              sitesearch="www.cl.cam.ac.uk"),

See also