The code/devices on this page are still being tested and finalised. Minor changes may occur without notice. If you have any questions please contact Digital and Creative Services.

Rebrand Core is a complete framework and cannot be combined with other frameworks (such as Bootstrap). Use of Rebrand Core with any 3rd party code that is not designed for portability (typically by using an iframe) requires a solid understanding of Cascading Style Sheets and JavaScript.

The following template is for sites built from the ground up on custom hosting. It's designed as a living template that can be centrally updated for a consistent design and functionality across all UWA sites, while preventing fragmentation nightmares that have occurred in the past.

Some elements, such as the header and footer, are contained in the core JavaScript file and will pull in relevant elements of the page. Additional styles and script devices will also be dynamically loaded if their classes are found in the page.

There may be style changes as we continue to improve the template. It's important you use the template as documented and keep Digital and Creative Services informed of any sites using this template so we can avoid potential issues.

HTML template code

Below is the basic HTML template. [square brackets] indicate something that needs to be replaced.

The header and footer are loaded from uwacore.js and merged with various page elements (particularly those under div#uwacore-data and settings. This allows for universal and consistent updates across the university.

<!DOCTYPE html>
<html id="core-rebrand" lang="en">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- the above compatability tag MUST be first -->
    <meta name="language" content="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta id="responsive-viewport" name="viewport" content="width=device-width, target-densitydpi=medium-dpi, initial-scale=1.0,   maximum-scale=2.0">

    <!-- common libraries -->
    <link rel="stylesheet" type="text/css" href="" />
    <script type="text/javascript" src=""></script>

    <!-- core styles -->
    <link rel="stylesheet" type="text/css" href="" />
    <link rel="stylesheet" type="text/css" href="" />

    <!-- core scripts -->
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>

    <!-- metadata settings -->
    <meta name="uwamenu.remotesitemapurl" content="[]" />
    <meta name="uwamenu.searchdomain" content="[]" />
    <meta name="" content="[UA-0000000-1]" />
    <meta name="" content="[GTM-XXXXXX]" />

    <!-- other items -->
    <title>[Page Title] : [Site Title] : The University of Western Australia</title>

<body class="style-version-two">
    <!--[if lte IE 9]><div id="legacy-browser"><![endif]-->

    <h1 id="sitehomelink"><a href="[site url]">[Site Title]</a></h1>
    <h2 id="pagetitle">[Page Title]</h2>

    <a id="top"></a>
    <div id="centrecontainer" class="centrecontainer" role="main">
        <div class="contentwrapper">
            <div class="content">
                <!-- ### START PAGE CONTENT ### -->
                [Page Content]
                <!-- ### END PAGE CONTENT ### -->

    <div id="uwacore-data">

        <!-- optional footer social icons -->
        <div id="uwacore-footer-extras">
            <ul class="social-icons">
                <li><a href="#" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="#" title="Instagram"><i class="fa fa-instagram"></i></a></li>
                <li><a href="#" title="YouTube"><i class="fa fa-youtube-play"></i></a></li>

        <!-- optional breadcrumb trail -->
        <ol id="uwacore-breadcrumbs">
            <li><a href="">UWA Home</a>
            <li><a href="[site url]">Site Title</a>
            <li><a href="[inner page url]">[Inner page title]</a>
            <li class="current">[Current page title]</li>

        <!-- "this page" link in footer for technical/admin info -->
        <div id="uwacore-footer-pageinfo">
            <dl class="columns-small">
                <dd><a href="mailto:[]">[]</a></a>
                <dt>Content ID</dt>
                <dd>[Content management system, asset ID or template name]</dd>

        <!-- Menu navigation links. The top level links are also added to the footer -->
        <div id="uwamenu-navigation">
                <li><a href="http://...">Level 1 link</a>
                <li><a href="http://...">Level 1 link</a>
                        <li><a class="pageon" href="http://...">Level 2 link with pageon class for active page</a>
                                    <a href="http://...">Level 3 link</a>
                            <a href="http://...">Level 2 link</a>

    <!--[if lte IE 9]></div><![endif]-->


Metadata settings

The core script will read these values to automate certain tasks. Replace the square bracket label with the appropriate value or remove the entire line if it's not appropriate.

For uwamenu items see the MegaMenu documentation.

For google items see the Analytics documentation.

Page classes

The following classes can be applied to the body tag.

Latest version of Rebrand core with new header and wider page width. This will eventuially be made automatic regardless.
Hide menu and search
Hide all navigation except for menu
Swaps to dark text and logo, for light background.
Hides breadcrumb bar
Hides header and footer for use in iframe modals.
Tracks Google Analytics events for ALL links on the page. Use only if absolutely necessary. Most buttons/elements already have event tracking.
Hide the 'give feedback' button or any superfluous campaign elements from the footer.

Header and MegaMenu

The header is dynamically inserted by the core script. This ensures a quality, consistant experience accross UWA sites.

The header will include elements #pagetitle and #sitehomeurl. It also has a link to the MegaMenu which pulls content from #uwamenu-navigation and uwamenu meta tags.

You can also customise the background texture via CSS by setting the background-image for #headercontainer. Strict quality control applies for acceptable (and accessable) imagery, please contact DCS before changing this.


A background image can be applied under the header by placing the following code in the header

<style type="text/css">
/* NOTE: This is not a dumping ground for css hacks */
#headercontainer { background-image: url("image-url.jpg") !important; }

Hero Blocks can be used to further customise the header for individual pages.


The footer is dynamically inserted by the core script. This ensures a quality, consistant and up-to-date experience accross UWA sites.

The footer will pull in the following elements:

Adds a new column on the left of the footer for sub-site navigation.
The top level items for this will be added in the left most column.
These icons are place along the top left of the footer. Use for social icons only to ensure a consistent user experience.


Rebrand Core can output extensive javascript logs. Append ?debug to the page URL and view the console output. In most browsers this is found via pressing the F12 key and selecting Console.