WYSIWYG styles
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
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:
Pretty CTAs
Do not use
The following classes should not be used:
- A-Z
- Campus Highlight
- Created
- Highlight
- Internal Navigation
- Nottingham - do not use
- Right
- Social Button
- Sys Border Left
- Text Overlay
- Ui-helper-clearfix
- Ui-tabs-hide
- Ui-tabs-selected
Veterinary disection (the main page title - Heading 1)
Domestic (sub section - Heading 2)
Some brief text about domestic animal disection. These include:
Cats (sub section of Domestic - Heading 3)
Information on cat disection.
Dogs (sub section of Domestic - Heading 3)
Information on dog disection.
Rabbits (sub section of Domestic - Heading 3)
Information on rabbit disection.
Wild (sub section - Heading 2)
Some brief text about wild animal disection. These include:
Camels (sub section of Wild - Heading 3)
Information on camel disection.
Dingos (sub section of Wild - Heading 3)
Information on dingo disection.
Lions (sub section of Wild - Heading 3)
Information on lion disection.
P
Text is the main body of a template is automatically contained within a paragraph. You can create new paragraphs by using the 'P' style in the dropdown menu, or by just hitting enter.
ApplyClass styles - right dropdown
Clear class
If you ever apply a class that you want to remove, you can highlight your text and select clear class from the ApplyClass dropdown.
Heading Backgrounds
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.
This is an example
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
- CTA-plainVideo- watch our video
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.
Table Row Highlight
This class will give a table cell a light grey background, similar to the Faux Blockquote class.
Generic Table
This class should only be applied via the table properties dialogue.
Label, Radio, Checkbox
These classes should only be applied when creating and old style form using the forms module.
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.
This is an example of text that has the Intro Paragraph class applied to it. The font colour is blue.