This is a H1 heading, all pages should start with a heading, note that there is no full stop after headings

This is a sub heading (H2)

All websites are designed to follow a ridged set of style rules, these rules determine style and consistency, they apply to desktop and mobile browsers/devices alike. Without these rules the site would lose balance, coherence and ultimately it's value.

man playing chess

Please note ...

  • This is not a how to update the site guide, please refer to the printed CMS guide for information regarding this.
  • Be aware that this  page contain lots of intentional "Lorem Ipsum" dummy text.

Images

Images (within content) are used to support your carefully crafted copy. Only add an image if it adds real value to a page.

Use your images carefully, only use images that are high quality and ensure they are cropped in landscape, do not add images in portrait.

If possible images should be pre-cropped to these dimensions. 635px × 390px.

The site will attempt to crop down your images as you embed them into a page. However, if you have the time it is better to pre-crop your images before uploading them to the CMS.

You can use http://cropp.me/ to edit/crop your images.

Images that are low quality or not used correctly will reduce the value of your copy and ultimately your message.

Images left, right or centered?

Images* by default sit in the middle of the 'content column' and take up the full width of this space.

Images can be aligned to the left or the right by using the the 'Styles' drop-down menu on the editor toolbar. When images are aligned to the left or right they are automatically reduced in size.

Sometimes images look best aligned to the right (when positioned near bullet points), other times to the left. This often depends on how much copy is available on the page.

Important. If you are having problems aligning images, try clearing the style via the small eraser icon, you can find this on the toolbar.

Phone

If you use large images, you can add caption text like this. Use the 'Caption' option via the Styles drop-down menu.

Note: Captions can only be added to larger images.

Important. If you are having problems with Captions, try clearing the style via the small eraser icon, you can find this on the toolbar.

* Image (left/right) alignment is only available in desktop view.

Text

This is a short simple paragraph.

This is another paragraph, note the line balance and spacing of the paragraphs.

This is a line of text with a ...
breakspace.

To create a breakspace use Shift/Return on your keyboard.

The following is a blockquote. Use 'Blockquote' (via drop down) on any selected paragraph. Block quotes are typically used to highlight a block of text.

Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

This is a smaller Heading H3

This is some sample text displaying some simple formatting. Bold Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Italics etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.

Important. Only use H1, H2, H3 etc for headings don't use headings for whole paragraphs.

Don't make headings (h1, H2, H3 etc) bold!

Description

A simple bulleted list

  • Oranges
  • Apples
  • Bananas

Another list, this time numerical

  1. Oranges
  2. Apples
  3. Bannanas

Tip: If you want to add an image near a list (like above) - align it to the right.

Adding News

  • To add a News item, go to Content > News and then click on Add Article.
  • In the first field type a short summary.
  • It's important that the the summary text is wrapped in a paragraph. To do this just press return (on your keyboard) at the end of the summary. Use the backspace key to move the cursor back up so it's placed directly after the last word in your summary.
  • Do not add images or other links in this first field.
  • In the second field place your detailed or full news story. You can add images, links etc in this field.

Video Media

Video (via Youtube) can be added to any page. The video player will be dispayed just below the search field in the websites sidebar. To add video do this ...

  • Find your video on Youtube
  • Click on the Youtube 'share' button/link
  • Copy the last part of the url, it looks something like this It4WxQ6dnn0
  • Log into the CMS and go to your page
  • Paste the Youtube code into the video input field, you will find this near the bottom of the edit page.

File names

All files, images, pdf, MS-Word etc must be saved in lowercase with-out-spaces.

For example:

  • my-image.jpg not my image .JPg
  • my-document_about_housing.pdf not my document about housing.PDF

Links to files

It's good practice to let your visitors know file size, especially if they are using a mobile device, example.

Download: name_of_file (1MB)

Its also a good idea to open PDF's in a new window.

Text should only be copied/pasted into the CMS from a .txt file

Do not attempt to copy text or images directly into the CMS from ...

  • MSWord or Similar word precessing packages
  • Email
  • From another website
  • Dreamweaver or similar web authoring packages

Strip out the formatting

Save your text as a .txt file, then copy the text from the .txt file into the CMS, all MSWord (or similar) text formatting will then be stripped away. You can then start to format your page via the CMS.

Rememeber: Do not paste raw HTML or any other code into the CMS from Dreamweaver or similar web authoring packages.

Remember many visitors to your site will be mobile users

This site has been designed to adapt/respond to various screen resolutions, if you follow the above suggestions/guidelines your website will continue to function and display content correctly across a wide range of devices.

Donation code

End of style-guide ///

I would like to subscribe to make the following monthly donation
I am eligible for Gift Aid and would like you to claim Gift Aid on my donation (Yes/No)