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. A variety of customisation options are available.

<!DOCTYPE html>
<html id="core-rebrand" lang="en">
<head>
    <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="https://static.weboffice.uwa.edu.au/visualid/lib/font-awesome/font-awesome.4.latest.css" />
    <script type="text/javascript" src="https://static.weboffice.uwa.edu.au/visualid/lib/jquery/jquery-1.11.latest.js"></script>

    <!-- core styles -->
    <link rel="stylesheet" type="text/css" href="https://static.weboffice.uwa.edu.au/visualid/core-rebrand/css/uwacore.css" />
    <link rel="stylesheet" type="text/css" href="https://static.weboffice.uwa.edu.au/visualid/core-rebrand/css/megamenu.css" />

    <!-- core scripts -->
    <script type="text/javascript" src="https://static.weboffice.uwa.edu.au/visualid/core-rebrand/js/uwacore.js"></script>
    <script type="text/javascript" src="https://static.weboffice.uwa.edu.au/visualid/core-rebrand/js/megamenu.js"></script>

    <!-- metadata settings -->
    <meta name="uwamenu.remotesitemapurl" content="[https://www.url.to/sitemap]" />
    <meta name="uwamenu.searchdomain" content="[domain.edu.au]" />
    <meta name="google.analytics.id" content="[UA-0000000-1]" />
    <meta name="google.tagmanager.id" content="[GTM-XXXXXX]" />

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

<body>
    <!--[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>
        </div>
    </div>

    <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>
            </ul>
        </div>

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

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

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

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

</body>
</html>

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.

page-wide
Increases content area from 960px to 1200px (excluding margins).
header-minimal
Hide search icon, divider line, global links and remove the content block (with gradient) overlap on the header.
header-no-titles
Hide site and page title. Intended for use with header hero that includes a title.
no-breadcrumbs
Hides breadcrumbs.
header-invert
Changes the header text to blue/black for use on light backgrounds.
landing-page
Removes site title and breadcrumbs.
campaign-analytics
Tracks Google Analytics events for ALL links on the page. Use only if absolutely necessary. Most buttons/elements already have event tracking.
footer-no-campaign
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.

Footer

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:

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

Troubleshooting

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.