This page outlines some of the styles listed in the dropdowns on the WYSIWYG toolbar.

What is a style?

Styles are used to improve the formatting of text alongside the use of mini templates. We provide a variety of mini templates that can be used to create various layouts to enhance the look and feed of your pages.

We manage styles centrally using cascading style sheet (CSS).

There are however, some styles that should not be used from the ApplyClass dropdown. These are listed on the right.

• Heading and paragraph styles - left dropdown (e.g. Heading 1)
• ApplyClass styles - right dropdown (e.g. headingBackground)

Heading and paragraph styles - left dropdown

Normal

If you ever apply a class that you want to remove, you can highlight your text and select normal from the dropdown.

Heading 1

There should be one Heading 1 on every page. Some page templates pull Heading 1's through automatically below the breadcrumb, but in many cases, you need to add one to your page manually.

Heading 2, Heading 3, Heading 4, Heading 5 and Heading 6

The above headings should be used with care. Ensure you nest them appropriately. For example:

Heading Background

This gives a colour block background which can be used on any page. For sites with their own colour scheme, this background colour changes accordingly.

Background classes

The below classes can be added to links. Some suggestions are:

• bgPDF-left - to identify a PDF link
• bgMSword-left - to identify a Word link
• bgMSexcel-left - to identify an Excel link
• CTA-plainDownloadFile - document download
• CTA-plainLinkedIn - link to LinkedIn page
• CTA-plainTwitter - link to Twitter page
• CTA-plainFacebook - link to Facebook page

You should use the appropriate class for each link, e.g. bgTwitter for a link to a Twitter blog.

The class will give the link a light blue background, white font-colour and the relevant social media icon. The background will stretch across the full width of the template, so it is a good idea to put the links in a column like the example on the right.

Troubleshooting

If the class doesn't apply to the link it may have been added to the paragraph (<p> tag). When this happens, click on the view source icon on the WYSIWYG toolbar and check the code. If you see the class in the <p> tag (e.g. <p class="CTA-plainTwitter">) cut and paste it to the link tag (e.g. <a class="CTA-plainTwitter">). If this doesn't make sense, please contact the Staff IT Helpline or your unit coordinator for assistance.

Intro Paragraph

If you want your introduction paragraph to stand out you can use this class to give the text a dark blue font colour.