Sam Gower, July 2015.

Introduction

This page offers guidance for modifying the health and saftey website in a consistent way while maintaining the layout and design. It is intended primarily for those who have little or no experience with coding. It will not be explained here how to use Sitebuilder, for which tutorials and training is available from IT Services.

In most cases, modifying the text content of the website can be done in the Sitebuilder 'JScript' editor (which is the default editor). However, the particular layout of certain pages, especially the Home, Hazards and Training pages, is bespoke and was coded by hand. For this reason, at least some modification of the HTML and/or CSS code that defines the layout will usually be required to change it. These notes will give a short explaination on how to do this.

Making modifications to text

Most changes are likely to be in the content of the pages, rather than in how the pages are arranged.

In the case of modifying the content of grey boxes, like the one to the right, a couple of tips ought to be followed in order to ensure that the appearance is kept consistent.

• When making a new line, use Shift-Enter (or Shift-Return) not just Enter (or Return). In Sitebuilder, the latter creates a new paragraph, with a larger gap between the first and second line, whereas the former inserts a line break.
• Don't use Sitebuilder's 'list' buttons to create a bullet-pointed or numbered list. There is a quirk in Sitebuilder that prevents lists in boxes from being formatted correctly. Instead, copy and paste the bullet point symbol (•) in directly, or number the items manually.

Adding a new hazard

There is no automatic process to creating new pages for hazards and updating the related pages. Here is a checklist of things that should be done.

• Create the new page for the hazard as a subpage of the Hazards list. This can be done by copying one of the existing hazards subpages (e.g. Ionising Radiation). The URL for the page should be the name of the page converted to all lowercase, with spaces replaced by underscores and any punctuation removed, e.g. for "Ionising Radiation" the URL is "hazards/ionising_radiation".
• Change the link to training on the new page. The link is not just to the Training list, but directly to the relevent place on the page, which is indicated by the part of the URL after the hash (#) and is called an 'anchor'. The anchor should be exactly the same as the URL for the hazard page. E.g. "ionising_radiation", so that the link to the Training list is "../../training#ionising_radiation".
• Update the Hazards list to link to the new hazard page. This can be done in the Sitebuilder JScript (default) editor.
• Update the Training list. This can also be done in the JScript editor. Specific hazards are written in bold without a bullet point. The relavent training courses are written underneath with a bullet point (•).
• In order to make the training link on the new hazard page work, an anchor must be placed next to the name of the hazard on the Training list. This can be done in the JScript editor by highlighting the hazard name, clicking the 'Link options...' button and selecting 'Add an anchor'. In the 'Anchor Name' field insert the same as the URL of the hazard page, e.g. "ionising_radiation".

Brief overview of how to modify the layout

The more complicated layouts are arranged in boxes that have the HTML tag 'div' (for 'division'). These are regions that can be styled and positioned by other code that references their 'class'. A relavent example are the div tags with the class 'hslayout', which is the class of the grey boxes used throughout this site. While div tags are used in standard practice (they are HTML's generic box structure), the particular classes used on this website are specific just to the health and saftey website.

Note that the styling of the same classes on different pages is subtly different, and some pages may not have a particular class. The style of the classes and which ones are available can be changed by modifying the CSS code (which is before the main HTML code). How to do this is not covered here.

Creating a new box

Inserting a new box will require copying-and-pasting the below code into the HTML of the page using Sitebuilder's 'Raw' editor. If you are unfamilar with HTML code, then experiment with placing the new box at different locations in the code and use the Preview button in the top right corner. The text can then be edited either in the Raw or JScript editors.

<div class="hslayout">
  <div class="heading">This is the heading of the box</div>
  <div class="box">This is the content of the box.</div>
</div>

The heading (or in fact the content) may be optionally deleted by removing the relevent div tag (with the classes 'heading' and 'box' respectively) from the above. Boxes may be deleted by removing the entire div tag with the 'hslayout' class.

Changing the order of boxes

Say you have two boxes, one below the other, that you would like to change the order of. This can be done by change the order the relvent hslayout div tags in the code. For example, say you begin with two boxes titled 'One' and 'Two', as below.

<div class="hslayout">
  <div class="heading">One</div>
  <div class="box">Content of box one.</div>
</div>

<div class="hslayout">
  <div class="heading">Two</div>
  <div class="box">Content of box two.</div>
</div>

To reverse their order, simply swap the order of the hslayout boxes, as shown below. It's quickest to cut and paste one div below the other.

<div class="hslayout">
  <div class="heading">Two</div>
  <div class="box">Content of box two.</div>
</div>

<div class="hslayout">
  <div class="heading">One</div>
  <div class="box">Content of box one.</div>
</div>

Boxes in columns

In some cases, grey boxes are arranged into two columns. This is achieved by placing the respective boxes into div tags with the class 'col' (for column). Below is an example.

<div class="col">
  <div class="hslayout">
    <div class="heading">This is a box in the LEFT column</div>
    <div class="box">Some text.</div>
  </div>
</div>

<div class="col">
  <div class="hslayout">
    <div class="heading">This is a box in the LEFT column</div>
    <div class="box">Some text.</div>
  </div>
</div>

<div style="clear: both;"/>

The position of the boxes then depends not just on the order of the hslayout div tags in a col div, but also which col div the box is in.

The last div tag in the above code ensures that the columns are displayed correctly and do not overlap anything below them. It is necessary after any set of col div tags, but also underneath the three 'headline' div tags on the home page which are positioned using the same method as the columns.