Introduction

Read This First

Much of each site is automatically themed using CSS. Do not override this with inline styles (style="....")- use CSS classes only (class="....") Use this site as a reference, and use similar existing pages as a guide. If there's a conflict, the information on this site takes priority - many pages may still be using older styles until they get updated.

The Most Important Tip

Focus on the content, not the layout. Let the system worry about laying out your content, you should focus on inputting the data and describing it with classes so the system knows what to do with it. This is especially important because of different sizes of screen in use by users – the system may format things differently depending on the screen size the user has. It can be tempting to set widths on columns, for example, to make everything line up nicely. If you do this, you'll probably mess up the layout for people using screen sizes different to yours, and risk making it unreadable on mobile devices.

Sometimes this means content will simply "stack" on the page vertically. Don't worry about this, it's necessary for many users of smaller screens.

Keep It Simple.

Don’t overthink. Treat it like an word-processed document, not a DTP package.
Don’t consider where things need to appear on the user’s screen, as the system is designed to handle all of that – trying to override this can just end up with browsers getting confused and content accidentally overlapping.

We cannot emphasise this enough - the website will handle layout. Your job is content and tagging it so the website knows which types of layout to apply.

Mobile/Desktop Formatting

In an attempt to make the site display at its best on both mobile and desktop, pages should not interfere with our attempts to format to the width of the browser. Individual tables are handled via Javascript which attempts to wrap them in a scrolling div without affecting the rest of the page.