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:

footadd=...

Insert additional text or HTML elements right before the default text of the local footer. Insert HTML elements in PlexTree encoding, i.e. element names are meta strings (marked by an asterisk prefix). For example (see icon added to local footer below):

footadd=(*p(*a(href="",
               *img(src="/images/athena-swan-bronze-304x182.png", height=36)),
            style="margin:0 0 0 20px; float:right")),

local_footer=(((*p('text'))),((*h3('heading),*ul(*li(...)))),(),())

Override the default local footer by providing a list of (usually four) columns, each of which is a list of groups of HTML elements (in PlexTree encoding). The text of the default header can be included with *p(class="ucampas-footnotes"). For example (see CST site):

local_footer=(
  ((*h3('Contact us'),
    *p(style='color:white',
       'William Gates Building', *br,
       'JJ Thomson Avenue', *br,
       'Cambridge, CB3 0FD'),
    *p(style='color:white', class="ucampas-footnotes"),
    *p(*a('Privacy policy', href='/privacy.html')))),
  ((*h3('Social media'),
    *ul(style="padding-left: 1em",
        *li(*a(*img(src="/images/icon-facebook-white.svg", style="width: 1.3em; color: #fff"),
               ' Facebook', href="https://www.facebook.com/ComputerScienceCambridgeUniversity")),
        *li(*a(*img(src="/images/icon-twitter-white.svg", style="width: 1.3em; color: #fff"),
               ' Twitter', href="https://twitter.com/Cambridge_Cl")),
        *li(*a(*img(src="/images/icon-youtube-white.svg", style="width: 1.3em; color: #fff"),
               ' YouTube', href="https://www.youtube.com/user/CambridgeComputerLab/")),
    )
  )),
  ((*a(href="https://www.cst.cam.ac.uk/athena-swan",
       *img(src="/images/athena-swan-bronze-304x182.png",
            style="width:100%; max-width: 250px; margin-top: 40px")))),
  (),
),

local_footer=0

Removes the local footer near the bottom of the page.

global_footer=0

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.)

menubar

menustop

menutop

menutopinclude

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.

Performance

If your page is part of a rather large site (either because of its directory location or via a ..u link), you may notice that building a page can take a bit longer in ucam2012 than with some other house styles. This is because in the Project Light style, the navigation menu on every page contains an entire site map, to enable mobile-phone users to navigate from every page to every other page without having to load intermediate pages. (In the desktop version of the navigation menu, only the top-most two levels are visible; choose a very narrow browser window to see in the single-column phone mode of the style the full depth of the menu.)

Collecting and formatting all the information needed to build this menu structure can take a few seconds on sites with many hundred pages. Several workarounds are possible to make ucampas as fast as with earlier styles:

• You can disable the pull-down navigation menu completely with menubar=0,
• You can restart the top of the menu hierarchy with menutop=1,

These workarounds also can make the resulting HTML file much shorter. Rebuilding multiple pages in a single ucampas invocation is faster than calling ucampas on each page separately, because ucampas caches site-structure information in RAM.