guide to upgrading home pages

guide to upgrading home pages

Home page content is stored in a less structured way than content pages. Upgrading from the blue template will require some manual intervention.

Overview

The middle section of the old home page was structured in a table. There were a few variations on the layout, but in general the structure was as indicated in this code sample:

<table>
  <tr>
    <td>Nav 1</td>
    <td>Nav 2</td>
    <td rowspan="2">content area</td>
  </tr>
  <tr>
    <td>Nav 3</td>
    <td>Nav 4</td>
  </tr>
</table>

The new template structures much the same information quite differently.

<div>
  <div>
    <div>Nav 1</div>
    <div>Nav 2</div>
  </div>
  <div>
    <div>Nav 3</div>
    <div>Nav 4</div>
  </div>
</div>
<div>
  Content
</div>

The content of the page now follows the navigation. Much more logical!

Content

The content area of the page is easy. The information that used to be in the third cell of the first row can usually be pasted straight into the new content area.

Use h2 headings to break up the content. These style with darker backgrounds and borders to provide clear divisions. Otherwise most simple (valid!) html will just work.

Navigation

Transferring the navigation is fiddly, but quite straightforward.

Inside the nav div are nested plain, unnamed divs which provide ‘rows’.
Inside each of these ‘row’ divs are two divs with a common class=”icon”.
Inside each icon is a simple <h2> heading, optionally also a link, followed by a simple unordered list of links.

You can change the number of icons by adding or subtracting from what is there already as long as you have no more than two icon divs in each row div, it will all work fine.

The old template had a div with a class=”homebutton” with exactly the same content, an h2 and an unordered list. It is a simple matter to copy this code from the old template and paste it into the correct location inside the icon div of the new template.

There is a redundant class of homelinks on the unordered list, which should be removed.

Finally, follow the instructions for customising the home page icons.

Sample code

To assist with migrating an old home page to the new structure, use this example code, with all correct class names and div IDs as a basis for your page.

<div id="nav">
	<div>
		<div class="icon section1">
			<h2><a href="http://www.unimelb.edu.au/">Section 1</a></h2>
			<ul>
				<li><a href="http://www.unimelb.edu.au/">Link 1</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 2</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 3</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 4</a></li>
			</ul>
		</div>
		<div class="icon section2">
			<h2><a href="http://www.unimelb.edu.au/">Section 2</a></h2>
			<ul>
				<li><a href="http://www.unimelb.edu.au/">Link 1</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 2</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 3</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 4</a></li>
			</ul>
		</div>
	</div>
	<div>
		<div class="icon section3">
			<h2><a href="http://www.unimelb.edu.au/">Section 3</a></h2>
			<ul>
				<li><a href="http://www.unimelb.edu.au/">Link 1</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 2</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 3</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 4</a></li>
			</ul>
		</div>
		<div class="icon section4">
			<h2><a href="http://www.unimelb.edu.au/">Section 4</a></h2>
			<ul>
				<li><a href="http://www.unimelb.edu.au/">Link 1</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 2</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 3</a></li>
				<li><a href="http://www.unimelb.edu.au/">Link 4</a></li>
			</ul>
		</div>
	</div>
</div>
<div id="home-content">
	<h2>Section heading</h2>
	<p>Introductory text about this website. Introductory text about this website.</p>
	<ul>
	  <li><a href="#">Point 1</a></li>
	  <li><a href="#">Point 2</a></li>
	</ul>
	<p class="notice">More text about this website. More text about this website.</p>
	<h3>Sub-section heading</h3>
	<p>Even more text about this website. Even more text about this website.</p>
</div>