Skip to content The Open University
  1. Home
  2. Core template
  3. Just the header and footer

Just the header and footer

Non OU ICE sites

Non OU ICE sites can still make use of the standard OU header and footer without calling the entire framework.

In this case, call the ou-header.css and ou-header.js files in the site <head>

  1. <link rel="stylesheet" type="text/css" href="/includes/headers-footers/ou-header.css" />
  2. <script type="text/javascript" src="/includes/headers-footers/ou-header.js"></script>

and the ou-header.html server-side include after the <body> (opening tag):

PHP

  1. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/headers-footers/ou-header.html'; ?>

ASP

  1. <!--#include virtual="/includes/headers-footers/ou-header.html" -->

and the ou-footer.html server side include file before the site </body> (closing tag):

PHP

  1. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/headers-footers/ou-footer.html'; ?>

ASP

  1. <!--#include virtual="/includes/headers-footers/ou-footer.html" -->

Core Header/Footer template for non-OU ICE sites (HTML version)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>{page title} - {site title} - Open University</title>
  6. <link rel="stylesheet" type="text/css" href="/includes/headers-footers/ou-header.css" />
  7. <script type="text/javascript" src="/includes/headers-footers/ou-header.js"></script>
  8. <!-- site specific head components -->
  9. </head>
  10. <body>
  11. <!--#include virtual="/includes/headers-footers/ou-header.html" -->
  12. <!-- site specific body stuff here -->
  13. <!--#include virtual="/includes/headers-footers/ou-footer.html" -->
  14. <script type="text/javascript">ou_init();</script>
  15. <!-- site specific scripts -->
  16. </body>
  17. </html>

Toggle the correct and footer

You will also need to use the relevant class attribute on the body element to toggle the correct view of the header and footer.

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 Friday November 22, 2024