Upgrading a CMS from version 3

This guide is intended for people maintaining or writing a Content Management System (CMS), or web application, who want to upgrade the styles to be in line with ANU styles version 4 (responsive design). This is not intended for general content authors who are using a CMS to create webpages.

There are several parts of your CMS output that will have to be updated to use version 4 styles:

  • Header: a new doctype, html tag, new metadata, and new CSS/Javascript
  • Banner: the Explore ANU, A-Z, and search areas have all changed
  • Menus area: there is a new mini search box and mini menu, for smaller screen sizes
  • Content area: some new classes are available to your content authors to take advantage of responsive design, and the updated information for each page has changed slightly
  • Footer: some new classes and updated links

A skeleton example of a version 4 site is provided below, with a diff output for quick reference of the changes between version 3 and 4:

Header changes

With version 4 of the ANU style, we are upgrading from XHTML 1.1 to HTML 5. This requires changes to the doctype, html tag and metadata. We also include version '4' stylesheets from now on.

Doctype

The doctype for HTML 5 is now much simpler than the XHTML doctype. Browsers that understand HTML 5 use 'html' as the doctype. It's worth noting that some older browsers may interpret this as HTML 4.

Version 3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Version 4

<!DOCTYPE html>

HTML tag

The html tag in the new style has extra information that can be used to style things differently on various Internet Explorer version:

Version 3

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Version 4

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
    <!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
    <!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
    <!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
    <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

New metadata

There is new metadata for the character set, and an extra line of metadata has been added to set the zoom for mobile screens. Note that we have removed the metadata for http-equiv="content-type", which used to be included as part of the central style information, and you must now specify the charset metadata in your system. The metadata for the charset should appear as close to the top of the file as possible - some browsers only search the first 255 bytes of the page for the charset tag.

Version 3

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Version 4

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 

Updated Dublin Core metadata

With the change to HTML 5, the metadata tags have changed from 'DC' to 'dcterms'. If you don't update your metadata, your page will not be valid HTML 5. Note that some of the tags have been discontinued in HTML 5, such as the 'subject' tag, and the 'date.review' tag.

Version 3

<meta content="Home  - CECS - ANU" name="DC.title"  />
<meta content="www.anu.edu.au" name="DC.identifier" scheme="URI" />
<meta content="My description" name="DC.description" />
<meta content="some, keywords"  name="DC.subject" />
<meta content="2012-12-13" name="DC.date.modified" scheme="ISO8601" />
<meta content="2013-12-13" name="DC.date.review" scheme="ISO8601" />
<meta content="my name" name="DC.creator" />
<meta content="webmaster@anu.edu.au" name="DC.creator.email" />
<meta content="My description" name="description" />
<meta content="some, keywords" name="subject" />
<meta content="some, keywords" name="keywords" />
 

Version 4

<meta  content="www.anu.edu.au" name="dcterms.identifier">
<meta content="My description" name="dcterms.description" >
<meta content="some, keywords" name="dcterms.subject" >
<meta content="2012-12-13" name="dcterms.modified" >
<meta content="My name" name="dcterms.creator" >
<meta content="webmaster@anu.edu.au" name="dcterms.creator">
<meta content="My description" name="description">
<meta content="some, keywords" name="keywords" >

Generator metadata

With the change to HTML 5, we can no longer include some of the old metadata tags we used to identify systems. These now have to be combined into a single 'generator' tag. If you are using the central styles to create your headers, the generator tag will be included for you. You can add to the generator tag to identify your CMS - this makes it easier for us to see which CMS is being used by which site.

To have your CMS name and version appear in the generator tag (e.g. 'myCMS 2.3.12'), send an extra 'appid' argument to the style server include:

//style.anu.edu.au/_anu/include.php?id=XXX&part=meta&ver=4&appid=myCMS%202.3.12

If you are generating the header without using the central style include file, you can put what you like into the 'generator' tag, but using something that identifies your CMS would be preferable.

Version 3

<meta name="template" content="ANU-W1-3" />
<meta name="ANU.GMS" content="4.4_20130305" />
<meta name="ANU.inc_from" content="styles.anu.edu.au" />

Version 4

<meta name="generator" content="ANU.template W1-4 | ANU.appid myCMS 2.3.12 | ANU.GMS 4.4_20130305 | ANU.inc_from style.anu.edu.au" />

Updated CSS & Javascript links

When updating your site to version 4, you will need to dynamically include the new central version 4 styles if possible, or cache them in some way on your system. If you are caching the central styles, be sure to keep them up to date - new stylesheets tend to come out every month or two.

Some of the version 3 CSS files have been combined in version 4, and a new stylesheet names anu-fluid.css deald with adaptability and responsiveness.

Version 3

include content from http://styles.anu.edu.au/_anu/include.php?id=XXX&part=meta&ver=3

Version 4

include content from //style.anu.edu.au/_anu/include.php?id=XXX&part=meta&ver=4&minify=1

No more IE 6

We are now in a position to drop support for IE 6, unless you have a business case for it in your local area. The central styles will not be including any styles specifically for IE 6, and if you have a special style sheet for IE 6 hacks you might want to remove it from now on.

Version 3

<!--[if lt IE 7]>    <link href="http://mysite.anu.edu.au/styles/styleIEfix.css" rel="stylesheet" type="text/css" /> <![endif]-->

Version 4

Nothing.

Banner changes

When updating your site to version 4, you will need to dynamically include the new central version 4 banner if possible, or cache it in some way on your system. If you are caching the banner, be sure to keep them it to date - there are occasional updates to the Explore ANU menu, and the search area.

Specific changes in the banner between version 3 and 4 include:

  • links for the print icon and ANU logo updated to '4' directory
  • changed padding and float positions in the Explore ANU menu
  • close boxes in the Explore ANU menu and A-Z menu
  • changed div positions in the search area, and a new search area for smaller screen sizes that shows/hides automatically.

Version 3

include content from http://styles.anu.edu.au/_anu/include.php?id=XXX&part=banner&ver=3

Version 4

include content from //style.anu.edu.au/_anu/include.php?id=XXX&part=banner&ver=4

Menu changes

Mini menu

The version 4 styles hide the left hand menu on smaller screen sizes, and replace them with a drop down menu button. When upgrading your site to version 4, you will need to include the new divs for the mini menu button, and a mini site search area.

Version 3

<div id="body">
<!--noindex--> <!-- stops ANU search from treating the menu as content-->
<div id="menu">
<div class="narrow">

Version 4

<div id="body">
<!--noindex--> <!-- stops ANU search from treating the menu as content-->

    <!-- responsive design quick search and collapsed menu -->
    <div class="search-boxes full nopadbottom touchdown noprint">
    <div class="search-menu">
    <a href="#" onclick="slideDownFadeOutToggle('#menu');return false;" style="cursor:pointer;"><img class="absmiddle" alt="Navigation menu" src="//style.anu.edu.au/_anu/4/images/buttons/btn-menu.gif" /></a> <a href="#" onclick="slideDownFadeOutToggle('#menu');return false;" style="cursor:pointer;">menu
    </a>
    </div>
   
    <div class="search-form">
    <form action="http://search.anu.edu.au/search/search.cgi" method="get">
    <input name="scope" type="hidden" value="XXXXXX.anu.edu.au" />
    <input name="collection" type="hidden" value="anu_search" />
    <label for="local-query-mini">Search site</label> <input class="search-query" name="query" id="local-query-mini" size="15" type="text" value="" />
    <label for="search-mini"><span class="nodisplay">search</span></label><input class="search-button" id="search-mini" title="Search" type="submit" value="GO" />
    </form>
    </div>
    </div>
   
<div id="menu">
<div class="narrow">

Menu Javascript

Version 3 styles have a piece of Javascript that is used to expand and collapse the menu. This was included near the menu block in your site code. For version 4, we have moved this Javascript code to the footer of the page, so that the content of the page loads before the Javascript is called. This will result in your content showing more quickly on a slow network connection.

Version 3

<script type="text/javascript" src="http://styles.anu.edu.au/_anu/3/scripts/anu-menu.js"></script>

Version 4

Code moved to footer - see instructions below.

Content area changes

Content from your authors

Most of the content provided by content authors will be fine in version 4, and not require changes. You may want to keep an eye out for a few things after upgrading (we advise upgrading a test site first, with your existing content, before making changes to production):

  • widths of tables may overflow the bounds of the content area on some responsive screen sizes
  • narrow columns that have been floated to the right will drop down below on some screen sizes
  • pages with three narrow columns will be reorganised on smaller screen sizes
  • image width and height tags will be ignored in HTML 5, and the image will just fill its container

Updated & contact information

The 'Updated', 'Responsible Officer' and 'Page Contact' information at the bottom of each page has been changed slightly in version 4, adding a new class around each piece of information, so that it can be repositioned on different screen sizes.

Version 3

<p class="sml-hdr">
Updated:&nbsp;&nbsp;<strong>5 March 2013</strong>
<span class="hpad">/</span>
Responsible Officer:&nbsp;&nbsp;<a href="mailto:director.marketing@anu.edu.au">
    <strong>Director Marketing</strong></a>
<span class="hpad">/</span>
Page Contact:&nbsp;&nbsp;<a href="mailto:webstyle@anu.edu.au">
    <strong>Webstyle</strong></a>

Version 4

<p class="sml-hdr">
<span class="upd-date">Updated:&nbsp;&nbsp;<strong>5 March 2013</strong></span>
<span class="hpad">/</span>
<span class="upd-officer">Responsible Officer:&nbsp;&nbsp;<a href="mailto:director.marketing@anu.edu.au">
    <strong>Director Marketing</strong></a></span>
<span class="hpad">/</span>
<span class="upd-contact">Page Contact:&nbsp;&nbsp;<a href="mailto:webstyle@anu.edu.au">
    <strong>Webstyle</strong></a></span>

Footer changes

When updating your site to version 4, you will need to dynamically include the new central version 4 footer if possible, or cache it in some way on your system. If you are caching the footer, be sure to keep it up-to-date – updates are rare but they do happen from time to time.

Specific changes in the footer between version 3 and 4 include:

  • links for the IARU changed
  • icons for the IARU and Go8 are updated to be in the '4' directory.

Version 3

include content from http://styles.anu.edu.au/_anu/include.php?id=XXX&part=footer&ver=3

Version 4

include content from //style.anu.edu.au/_anu/include.php?id=XXX&part=footer&ver=4

Menu Javascript include

The Javascript that was removed from the menu area is now added in at the bottom of the footer (with its path updated from a '3' to '4'):

Version 3

</body>
</html>

Version 4

<script type="text/javascript" src="//style.anu.edu.au/_anu/4/scripts/anu-menu.js"></script>
</body>
</html>

Updated:  18 August 2017/ Responsible Officer:  Director Marketing/ Page Contact:  Webstyle