skip to primary navigationskip to content
 

ucam2012 style

The Ucampas “ucam2012” web house style is based on the “Project Light” style templates (github sources, documentation), which were developed during 2012 by “Head London” for the University’s Office of External Affairs and Communications, MISD and the University Computing Service, and which have been used on main University web sites since February 2013, as well as in the UCS/UIS Falcon and Drupal web content-management services.

To activate it under Ucampas, add the line “style=ucam2012,” to your uconfig.txt file. Six alterative colour themes exist (blue, turquoise, purple, green, orange, red) and these can be chosen with “style=ucam2012(colours=orange),” etc.

You can also set default style parameters outside the “style” attribute that switches the style for a particular set of pages, e.g. with

style=ucam2012,
ucam2012={
  colours=orange,
},

The current implementation is still work in progress. It supports so far only the regular page layout referred to in the the template documentation as a “subsection page”, with or without left navigation, but so far only without right column.

Features

Some of the features of this house style:

  • The page template automatically adds at the very top and bottom of each page a “global header” and “global footer” with a black background, which contain information links to university-wide sites.
  • Next to these are a “local header” and “local footer” with a colour background. These provide navigation links and information related to the local web site.
  • The “local header” contains
    • a breadcrumbs line
    • the name of the organization (from the organization parameter)
    • a horizontal row of top-level menu items, which on hover expand into a second-level pull-down menu.
    • a “subtitle” line that shows either the title of the current page, or if it has been set the “section” string parameter.
  • a left-side navigation bar that shows (with a grey background) the path to the root of the site, then the title of the current page in bold, followed by sub page links (each prefixed with a >), followed by links to all sibling pages (pages with the same parent as the currently shown page).
  • The main page content
  • The local footer, which at present contains a ucampas-generated user-configurable copyright line, a link to the author of the page after “Information provided by”, and in the presence of an .htaccess file a summary of access restrictions to this page.

    The template is “responsive” to the width of the display window. Different style features change depending on the width of the display window. In particular, below a width of 768px, the entire page layout is rearranged into a single column for easier use on small mobile-device screens. In this mobile mode, the font size increases, the side columns move to the bottom, and the horizontal menu bar is replaced with a touch-screen menu function.

What has changed?

Like in previous house styles, the designers of Project Light also couldn't resist to make a couple of more intrusive CSS changes that users may want to override in their documents.

When switching from the ucam2008 style previously used at the Computer Laboratory, the following changes from the “Project Light” templates deserve particular attention:

  • The first <h1> heading may need to be reviewed in the context of the page title or section text that is now automatically displayed immediately above it.
  • <img> elements in <p> and <li> elements no longer float by default on the right and no longer have a grey border
  • the <blockquote> element now switches to a large (19px) italic font, intended to highlight quotes, and also prepends a magnified opening quotation mark, as in
    Tis better to have loved and lost
    than never to have loved at all

    Tis better to have loved and lost
    than never to have loved at all

    A <p> element inside now oddly floats to the left. This very eye-catching style is likely to be incompatible with some prior uses of <blockquote>.

  • Tables now show by default a coloured line as the bottom border. You may want to reset this, and a few related changes, in your own custom table styles with
    table.myclass {
      border: 0;
      border-collapse: separate;
    }
    table.myclass th, table.myclass td {
      background: inherit;
    }
    

Configuration parameters

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

Removes the global footer at the bottom of the page. (This currently also causes the University logo to then move into the local footer above.)
Just like navbar=0 can be used to remove the left-side navigation bar, menubar=0 removes the horizontal menu in the local header. In fact, all the parameters navstop, navtop, and navtopinclude have an equivalent menustop, menutop, and menutopinclude for the horizontal navigation bar.