How to Style Your Page

Styling Guide

General Rules

The website has several pre-made styles included in the Drupal editor, you should always use them when possible and avoid trying to style things manually. This means you should never need to click 'B' for bold, nor choose font colors, nor select the font itself, etc. Try to avoid your headers being too long, especially if it is one of the top headers. Avoid single short words at the end of a paragraph, especially if your text is wrapping around a photo. Drupal's editor functions much like MS Word so you should be familiar with how to use the toolbar.

Headings: This is What H2 Looks Like

You should mostly be using H2 and H3 for your headings on a page, as the main head (H1) will already be the default for the title of your page. Your heading text should be in Title Case, which means the first letter of your words are capitalized, with the exception of words such as "and", "of", "to" etc. H2 should be used for more important topics on your page, and will most often be texts at the top. Do not use H2 in the content of a paragraph or lists.

This is What H3 Looks Like

H3 should be used for less important stories and usually would be found below the H2 stories. H3 should be used at the header for the one-column stories or the subhead directly under an H2 title. Do not use H3 in the content of a paragraph or lists.

This is What H4 Looks like

Like H3, H4 is a subheader but should be found beneath H3 and never directly beneath H2. The instances of this style will be infrequent unless your page has many layers in its content. Do not use H4 in the content of a paragraph or lists.

This is what Normal (body text) looks like and should be used for all content. If you need to link something, add a hyperlink and it will automatically style itself, no need to adjust colours or fonts etc.

Paragraphs and Pressing 'Return'

You should not need to worry about the space between a paragraph and the next heading. Only 1 'return' key press is necessary.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempus nisl in ipsum facilisis quis eleifend dui egestas. Integer a ante eros, nec sollicitudin velit. Vestibulum dapibus elementum diam, non consequat justo pellentesque non. Vestibulum vestibulum magna eu massa dignissim sit amet bibendum dui egestas. Vestibulum faucibus convallis semper. Mauris aliquam lectus dui, quis lacinia libero. Phasellus id nisl vel nisi laoreet accumsan nec quis arcu.

Integer feugiat, arcu et tincidunt feugiat, libero massa rhoncus felis, eu dapibus justo nibh ut augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed est sapien. Morbi fermentum blandit nisi, eu porttitor sem vestibulum sit amet. In a neque sed eros congue scelerisque. Ut ut ultrices nulla. Morbi non aliquam eros. Sed sit amet felis lorem, et euismod est.


You may need to adjust your text length so that it wraps nicely around the photo. This is one of the rare instances where you may need to add extra 'returns' in your text to push content down so that only the appropriate content wraps around the photo. It may look like it is wrapping incorrectly in the editor, so you will need to save and check your work, and then return to the editor if necessary. Photos you add into the content of your page should always be the 'small' option, although it can be horizontal or vertical. Both will be the same width, so if you see otherwise on your page, either the image is not meant for inside pages or you have selected the wrong size. You can add a link to photos by double clicking.

You would continue your text here if it was no longer relevant to the photo above.

If you need to insert a photo, you do not need to add extra space between the photo and your text. Always make sure to set the alignment of your photo to 'left', which can be done by double clicking the photo.

Check out our Image Sizing Guide.


Copying and Pasting

When copying and pasting text from a word document or email into the editor in Drupal, styling can often be copied over as well and Drupal will not override them. It is best to copy unstyled content. However, if you must copy styled content, select all and set to 'Normal' and then begin styling from there using the styles discussed above. Never copy and paste a photograph! It is also safest not to drag images you have placed into the text to different places. Delete and re-insert.