customising your site

Customising the colours and images on a site using the new templates is very simple.

By default, the only files set up in the “template-assets-custom” folder are the custom style sheet and four include files. Using the style sheet you can change the ‘accent’ colour of all templates in the subsite as well as the branding image and the icons on the home page. The include files allow you to change the branding title and menu for the public and internal templates.

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 custom.css to change the graphic you refer to for the banner image.

#top
{
	background-image: url("http://www.unimelb.edu.au/template-assets/07/images/banner/001.jpg");
}

You can create your own banner images using this photoshop banner master file.

Send any banners you make back to web-info@unimelb.edu.au and they may be included in the banner gallery page for others to use.

The banner master file has a layer called ‘pic’ which is where your new image should go. The main subject matter or focus of the image should sit between the two horizontal guidelines as objects on the page may obscure anything above or below the guides.

Use a gradient on the layer ‘pic-vignette’ to soften the left edge of the pic image matching the background colour of #003366.

Use the mask layer on the ‘swirl’ layer to highlight and soften the swirl as appropriate. The mask layer on the supplied file is an example.

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.css you then simply associate these sections with icon files for backgrounds.

#nav div.section1 {
	background-image: url("http://www.unimelb.edu.au/template-assets/07/images/icons/001.jpg");
}

There are premade icons with helpful file names like 001, 002, 003... up to 081. View them all on the icon gallery page.

You can make your own icons with this photoshop icon master file.

Send any icons you make back to web-info@unimelb.edu.au and they may be included in the icon gallery page for others to use.

As well as colours, two include files need to be customised for your site, the branding space and the menu.

Edit template-assets-custom/07/includes/branding_space.html in your site. The code should look like this:

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

Insert your Department name, the URL to your site’s home page and your Site Title as appropriate.

If your site does not have a parent department you can omit it, but you should use a special class to move the single line title up a few pixels.

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

Edit template-assets-custom/07/includes/menu.html on your site. The code should look a little like this:

<h2>Site menu</h2>
<ul id="topmenu">
	<li><a href="/1.html">Section 1</a></li>
	<li><a href="/2.html">Section 2</a></li>
...etc...
</ul>

Simply enter the links to files in your site as a unordered, nested list. Links must be relative to the root and the code must be valid for the menu to work correctly.

If your menu contains more than one link to the same page, you can prevent the menu javascript getting confused by nominating which link is to be ignored.

<li><a href="/2.html" class="duplicate">Section 2</a></li>

Where a page does not appear in the menu, but has a logical place which should be highlighted by styles and breadcrumbs, the uM_menu.parent_path variable may be used. This javascript may be placed in the ‘styles’ editable area in the head of the page.

<script type="text/javascript" language="javascript">
    uM_menu.parent_path = '/path-to-the-page/';
</script>

There are other include files in the /template-assets/07/includes/ folder of your server. You can customise these by making copies of them to your site’s template-assets-custom/07/includes/ folder and adjusting your template to refer to them instead.

Once the custom css and include files have been changed, check your work by opening the template file and/or making a dummy page to make sure your template is referencing the correct, customised files.