Skip to content The Open University

Add the OU ICE template

If you view the index.php file in your browser now you'll see it's completely blank. This is where our relationship with OU ICE begins.

Activity 2

Copy and paste the core OU ICE template code into your index.php file.

Example

Browse to index.php via your browser and you'll see that it has been brought to life!

The page now has the standard OU header and footer and space for your content.

Let's have a look at the core OU ICE code to see what's happening:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />

The document is identified as HTML, in English, using the UTF-8 character set.

  1. <title>{page title} - {site title} - Open University</title>

A place-holder for the page title.

  1. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/ouice/3/ou-head.html'; ?>

This server-side include contains links to all the core assets of OU ICE: Style-sheets (CSS) for screen, print, mobile and old versions of Internet Explorer and also the OU header javascript.

The content of the ou-head.html include

The ou-head.html include contains links to CSS and Javascript. This isn't exposed in the core PHP template so here's what you'll find:

  1. <link rel="stylesheet" type="text/css" href="/includes/headers-footers/ou-header.css" media="screen, projection" />
  2. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/screen.css" media="screen, projection" />
  3. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/print.css" media="print" />
  4.  
  5. <!--[if lt IE 9]>
  6. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/ie.css" />
  7. <![endif]-->
  8.   
  9. <!--[if lt IE 7]>
  10. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/ie6.css" />
  11. <![endif]-->
  12.  
  13. <meta name="viewport" content="width=device-width" />
  14.   
  15. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/mobile.css" media="only screen and (max-device-width:640px)" />
  16. <link rel="stylesheet" type="text/css" href="/includes/ouice/3/mobile.css" media="only screen and (max-width:640px)" />
  17.   
  18. <!-- <link rel="alternate stylesheet" href="/includes/ouice/3/mobile.css" title="ou-mobile" /> -->
  19.  
  20. <script type="text/javascript" src="/includes/headers-footers/ou-header.js"></script>

Without the content of ou-head.html contained in the <head> of your web pages you wont be able to make use of the OU ICE styling.

Now, back to the core HTML..

  1. <!-- site specific head components -->
  2. </head>
  3. <body class="ou">

The default class attribute on the <body> element is simply "ou". As you'll see later in this tutorial, there are various body class attributes you can use to toggle different layouts, colour schemes and navigation systems.

The next set of code is the core HTML needed to provide the OU ICE CSS and javascript with hooks to apply styling and behaviour. You'll notice that all class and ID names are prefixed with "ou-". This prefix is a reserved namespace for OU ICE. When writing your own custom code you should avoid using the ou- prefix to avoid clashing with OU ICE.

  1. <div id="ou-org">
  2. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/headers-footers/ou-header.html'; ?>

The code above call the standard OU header onto your web page. You'll find similar lines of code at the bottom of this code calling ou-footer.html and ou-foot.html.

  1. <div id="ou-site">
  2. <div id="ou-site-header">
  3. <!-- ou-site-header-components -->
  4. </div>
  5. <div id="ou-site-body">
  6. <div id="ou-page">
  7. <div id="ou-region0">
  8. <!-- ou-region0-components -->
  9. </div>
  10. <div id="ou-region1">
  11. <!-- ou-region1-components -->
  12. </div>
  13. <div id="ou-region2">
  14. <!-- ou-region2-components -->
  15. </div>
  16. </div>
  17. </div>
  18. <div id="ou-site-footer">
  19. <!-- ou-site-footer-components -->
  20. </div>
  21. </div>
  22. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/headers-footers/ou-footer.html'; ?>
  23. </div>
  24. <?php include $_SERVER['DOCUMENT_ROOT'] . '/includes/ouice/3/ou-foot.html'; ?>

ou-foot.html is an optional include that contains all the OU ICE scripts that can be run after the HTML and CSS. This include has a jQuery dependancy. If your site or web pages are not going to use jQuery then you should omit this line from your template. jQuery hasn't been bundled with OU ICE because OU's Drupal environment already calls both jQuery and OU ICE so it would be calling it twice! Therefore any site not using Drupal but wanting to use OU ICE specific scripts should call both jQuery and ou-foot.html. A future version of OU ICE will fix this quirk.

  1. <!-- site specific scripts -->
  2. </body>
  3. </html>

Return to the main OU ICE documentation site