Using the templates in the CMS

The new web templates are available for use in the CMS on a ‘beta’ basis. That is, we welcome testing, but support is limited and use on a public facing site is entirely the responsibility of the site administrator.

There are issues, but there will be a constant program of amendments and updates that will hopefully fix bugs and add missing functionality over time.

The files are in a zip package that you can download from the CMS project site.

Simply expand the contents to a location on your computer that suits you.

The CMS templates are a completely different package from the Dreamweaver templates.

In creating your design, there are different types of files that need to be created and uploaded in different ways.

We recommend you create a folder to contain all the files you will use for this process. Don’t create this folder in your actual site asset. If you have a Designs folder, create it in there. From now on, this folder will simply be called your design folder.

Several simple pages must be created for the template to refer to.

In your design folder, create a New Child ⇒ Pages ⇒ Standard Page. Call it branding Space or something appropriate to your needs. Edit Content for this page, changing the properties for the Content DIV to Style Information = Raw HTML and Content Type = Raw HTML. After changing these properties the div area turns blue and you must save before continuing. This step is important!

Next, you can copy and paste the code below into the page as a starting point:

<span>Department name</span><a href="/" accesskey="1">Site Title</a>

If your site has only one level of branding space, you should use this code instead:

<a href="/" accesskey="1" class="no-dept">Site Title</a>

The extra class pushes the text up a few pixels so it’s nicely centered in the banner.

Repeat the process for two more files using the code below:

<a href="http://www.unimelb.edu.au/contact/">Website feedback</a>

...altering the href to point to your site’s feedback form.

<ul>
	<li><a href="http://www.unimelb.edu.au/az/faculties.html" accesskey="f">Faculties</a></li>
	<li><a href="http://www.unimelb.edu.au/az/">A-Z Directory</a></li>
	<li class="last-item"><a href="http://www.lib.unimelb.edu.au/" accesskey="l">Library</a></li>
</ul>

... again, altering the quicklinks to suit your local site needs if required.

(Note: if you are removing the faculty or library quicklinks, remove the accesskey attributes as well)

In your design folder, create a New Child ⇒ Design ⇒ Design with an appropriate name for the standard content template (eg:content-07). From the details screen of this new design asset, browse to and upload the appropriate parse file and the Associated File editing.css.

Repeat this for each parse file you wish to use in your site.

Before you can use the new design asset, you must create a customisation for each parse file.

Right click on the new design asset you created and select Customisations, check the checkbox to create a new customisation for your design. If your site will have more than one customisation, you can choose a more imaginative name than the default.

In the details screen of the newly created customisation, check the checkboxes to customise design areas for:

• site configuration
• branding space
• contact us
• quick links

On the same screen, browse to upload the Associated file:

• custom.css (for the home page parse file use custom-home.css)

and finally, Save the changes.

Enter the Site configuration custom area and populate the maintainer name and email fields.

Enter the branding space nested content area and use the file browser to locate the branding space page you created earlier. Repeat for the other two nested assets, contact and quicklinks.

From the Edit File screen of the custom.css or custom-home.css asset, you can change the colour scheme, banner graphic and home page icons for your site.

Use the class accent to change the colour band below the top blue band of the page.

.accent {
	background-color: #466aa1; /* <-- change to your colour */
}

Make sure that the chosen colour has sufficient contrast with the quicklinks.

You can also optionally change the borders on the metalinks at the foot of the page to match or complement your accent colour.

#metalinks
{
	border-bottom-color: #ccc;
	border-top-color: #ccc;
}

Use the #top background to change the banner image for your site.

#top
{
	background-image: url("http://cms.unimelb.edu.au/__data/assets/image/0005/56741/001.jpg");
}

Use this gallery of banner images to find one for your site.

The home page icons are controlled by the custom-home.css.

The sections of links on the home page are each identified with a class - by default this is just section1, section2 etc. but you can use more descriptive class names, it does not matter. In the custom-home.css you then simply associate these sections with icon files for backgrounds.

#nav div.section1 {
	background-image: url("http://cms.unimelb.edu.au/__data/assets/image/0006/56526/001.jpg");
}

There are many premade icons you can use at the icon gallery page.

You can create your own graphics using the photoshop banner master file and photoshop icon master file.

When you have created banners or icons, you can upload them to the gallery which will give you a stable URL for use in your css.

In the end, you should end up with a design folder that looks something like this screen grab.

When you have completed all the steps above, you should make your design folder live, cascading the changes through all the assets you have created in the process.

What are you waiting for? Apply the appropriate customisation to your site, or sections of it, from the settings screen of the asset.

There will be problems... there always are!

Most standard html will translate very smoothly, but where presentational code appears in the content of a page it may conflict with the styles applied using CSS. Usually, it’s just a matter of removing the presentational code and allowing the style sheets to do their stuff.

Nowhere is the problem of presentational content more apparent than on the home page of a site. The home page on the current template is a mess of nested tables and will break in dramatic fashion. The same issue affects Dreamweaver migration, so refer to the dreamweaver ‘guide to upgrading home pages’ for more information.

For those migrating sites from the old template to the new template, there is an issue with mismatched heading levels. A detailed explanation and solution to the H1 problem is available.