- Home
- Customising OU ICE
- Quick reference
Quick reference
You can add a class attribute to the <body> element in your web pages to toggle various aspects of the design.
The syntax is <body class="ou-neutral">. You can chain as many different classes as you like: <body class="ou-neutral ou-mobile ou-ia-study ou-sections">
Here is a complete list of body classes you can apply to customise OU ICE with a brief description of what they do.
| body class | description |
|---|---|
| ou-altnav | Places the sidebar on the left as opposed to the standard right-hand placement. Example. |
| ou-blend | to remove the blue (or grey) gradient and add a divider between the main content and the footer. More info. |
| ou-connected | Removes the rounded corners at the top of the main content box so it can blend elegantly into a header box. Example. |
| ou-creative | removes the background colour from the breadcrumb trail. Used in conjuntion with ou-panels: <body class="ou-creative ou-panles">. Example. |
| ou-go1 | Can be applied to a div <div class="ou-go1"> or an image <img class="ou-go1">. In both cases the object is floated to the left with surrounding content wrapping around it. Example. |
| ou-go2 | Can be applied to a div <div class="ou-go2"> or an image <img class="ou-go2">. In both cases the object is floated to the right with surrounding content wrapping around it. Example. |
| ou-go3 | Can be applied to a div <div class="ou-go3"> or an image <img class="ou-go3">. In both cases the object is centred with surrounding content wrapping above and below it. Example. |
| ou-ia-about | for About the OU and associated pages. More info. |
| ou-ia-community | for OU Community and social networking pages. More info. |
| ou-ia-home | for the OU homepage and and sub pages of the main OU site that have no other logical home. More info. |
| ou-ia-learning | for VLE, StudentHome, TutorHome and study support related web sites. More info. |
| ou-ia-research | for Research at the OU and associated pages. More info. |
| ou-ia-study | for Study at the OU and associated pages. More info. |
| ou-mobile | enables a mobile friendly rendering and a toggle to activate it. More info. |
| ou-neutral | activates the greyscale theme. Example. |
| ou-panels | toggles the floating panel layout as used on this site. When ou-panels isn't included your main content and sidebar navigation will be contained within a wrapper / box. Example. |
| ou-pure | Creates a single coloum layout, moving the sidebar below the content. Useful for large videos and high-accessibility zoom layouts. Example. |
| ou-sections | When a the horizontal nav is in use. This removes the rounded corners at the top of the main content area so it elegantly connects to the top nav. Example. |
| ou-subtle | Removes the borders and shadows from the main content wrapper. Example. |
| ou-three | Reduces the width of the sidebar in order to accommodate a second sidebar directly opposite. Used in conjunction with dividing the main content area into two discrete content areas. Example. |
| ou-unboxed | Removes the borders, shadows and white background colour from the main content wrapper. Example. |
OU ICE tutorial
If you're new to OU ICE you might find this quick step by step tutorial useful.
OU ICE tutorial
If you're new to OU ICE you might find this quick step by step tutorial useful.