Skip to content The Open University
  1. Home
  2. Core template

Core template

In order to use OU ICE on your site you'll need to include a number of CSS and Javascript files. You'll also need to use some standard HTML markup in your template. The first step is to download the core core below.

Download the core template

Dependencies

The OU ICE templates depend on the OU header and footer files. All OU servers host these files already. If you want to develop a site locally then your web server will need to host these files too. You can grab the OU header and footer files here.

There are four server side includes called by OU ICE:

  1. ou-head.html
  2. ou-header.html
  3. ou-footer.html
  4. ou-foot.html

ou-head.html

This server side include contains links to all the OU ICE CSS files and all the javascripts that must be called in the <head> of the HTML document.

Warning

Please note that the reference to the jQuery library has been removed from this include as the OU Drupal theme already calls the library. If you are not already calling jQuery then you will need to make sure you do if you want to use the ou-foot.html.

ou-header.html

This is the official OU header. There is now just one header include. Different states are toggled using body classes.

ou-footer.html

The official OU footer. Again, a single include for all sites with different states being toggled via body classes.

ou-foot.html

Contains links to all other OU ICE Javascripts.

Warning

Note that the ou-foot.html include also requires that you include the jQuery library somewhere in the <head>. If you are not using jQuery then do not include ou-foot. If you include ou-foot.html but not the jQuery library you will get error warnings.

Core HTML structure

This is the hierarchical HTML structure of OU ICE. Some insignificant elements have been removed for clarity. The ideas behind some of the elements are detailed below.

html lang="en"

Required. If your site uses a different language, please tell the browser about it by replacing "en" with whatever language the page uses. You can also set lang values at an HTML object level within the page. Find out more.

meta charset="utf-8"

Required.

Why UTF-8?

title

Required. The contained text string follows the following format: page title - site title - Open University

CSS

Required.

OU ICE refers to 5 CSS files:

  • screen.css
  • print.css
  • mobile.css
  • ie.css
  • ie6.css

meta name="viewport"

Required. Ensures that the mobile version of the website is optimised for the device it is being viewed one. Find out more.

body

Required. A hard working element that carries a number of optional combinations of class attributes. The IA class attribute is required in order to select the correct OU header and footer instances.

div#ou-org

Required. Comes as part of the OU header. The main wrapper div. Contains all other parts of OU ICE.

div#ou-org-header

Required. Comes as part of the OU header. The OU header wrapper.

a.ou-skip

Required. Comes as part of the OU header. Link to the #ou-content anchor. For improved accessibility. This link is invisible until the user tabs to it. It is first in the tab index.

a.ou-link-ou

Required. Comes as part of the OU header. The link that wraps the OU logo.

div.ou-role-nav

Required. Comes as part of the OU header. The first line of the OU header. Contains role-based links. These include StudentHome, TutorHome, IntranetHome, the user's name and ID.

div.ou-ia-nav

Required. Comes as part of the OU header. The second line of the OU header. Contains links to the OU home page, Study at the OU, Learning, Research, Community and About.

div#ou-site

The wrapper for everything between the OU header and footer.

div#ou-site-header

Site specific header. Optional.

div#ou-site-body

Wrapper for the main content area.

div#ou-page

Sub-wrapper for the main content area.

div#ou-region0

Optional. Typically used as a banner across the top of the page. For promotional features.

div#ou-region1

The main content region wrapper.

ou.ou-ancestors

Breadcrumb trail.

div.ou-content#ou-content

Required anchor point for the skip link in the header.

div#ou-region2

Secondary content region. Usually contains site navigation.

div#ou-site-footer

Optional site specific footer area.

a.ou-to-top

Link to the top of the page.

div#ou-org-footer

The OU footer wrapper.

div.ou-charter

Only seen on the OU home page.

script

For all scripts that can be loaded after the HTML.

OU ICE tutorial

If you're new to OU ICE you might find this quick step by step tutorial useful.

This page was last updated on Wednesday November 13, 2019