Computer Laboratory > Internal information > Web servers and sites > House-style formatting (ucampas) > ucam2006 style

 

ucam2006 style

The current housestyle of the main Computer Laboratory web pages is based on a style developed and released by the Computing Service for the University's main website in 2006.

What has changed?

The 2006 style is a revision of, and visually very similar to, the previous style first introduced in 2001. The most obvious difference to the 2001 style is that the page title no longer appears in red in the top-right corner (where you find now in black the name of the department). The page title therefore has to be repeated now in an h1 element at the start of the main text. Most other changes are rather subtle, e.g. changed font sizes, less cluttered templates by better use of CSS facilities, XHTML compatibility, better “accessibility” (i.e., easier navigation with voice/braille/etc. browsers), etc.

Local extensions

In the Computer Laboratory version of the ucam2006 style files, we have made a few local extensions that you might find useful:

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

Prominent <h2>

Writers of long pages found it necessary to visually subdivide the text with horizontal rules or other tricks, as the standard h2 element was not giving enough of a visual separation. We therefore added a more visible h2 variant that can be activated by writing <body class="prominent-h2">.

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

Floating images

Use <img class=right ...> or <img class=left ...> in order to let an image float to the left or the right side of the text. Best avoid using <table> to position images relative to text; in most cases floating images lead to simple HTML and better results.

Configuration parameters

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

Set the target URLs of the “search”, “a-z”, and “contact” links in the very top-right of the page.