This page outlines some of the styles listed in the Format and Styles 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 feel of your pages.
We manage styles centrally using cascading style sheets (CSS) to ensure everything on the website remains consistent and on brand.
Heading and paragraph styles - found in the Format dropdown
Paragraph
Text in the main body of a template is automatically contained within a paragraph. You can create new paragraphs by using the Paragraph style in the dropdown menu, or by just hitting enter. Font size and colour are set automatically.
Heading 1
There should be one Heading 1 on every page. Some page templates pull a Heading 1 through automatically below the breadcrumb using the page title, but in some cases, you need to add one to your page manually. If you need to add it manually, select your text and then select Heading 1 from the Format dropdown.
Heading 2, Heading 3, Heading 4, Heading 5 and Heading 6
The above headings should be used with care. Ensure you nest them appropriately, ie Heading 2 should be used for any subheadings on the page and Heading 3 should be used for a subsection within a Heading 2 section, and so on. Most content won't require the use of headings past Heading 4. For example:
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.
To add a heading, select your text and then select the heading size you need from the Format dropdown.
Class styles - found in the Styles dropdown
Heading background
This class gives a blue background and white font to a Heading 1, Heading 2 or Heading 3. It can't be used on normal text or headings lower than Heading 3. This styling is useful for emphasising headings and creating a clear content structure, but using too many can overload a page visually. The exact styling may vary on the left side menu template.
Example headingBackground style
First apply your heading format as above. Then to apply the blue background, go to the Styles dropdown on the main toolbar and find headingBackground.
Background classes
The below classes can be added to links to show what sort of link they are. You should always identify a PDF, Word document etc for the user, either by using the below classes or typing in text next to the link, for example, (PDF) or (Word):
You should use the appropriate class for each link. You need to first add your link to your text and save it, then go back into the Insert/Edit Link panel, and search for the relevant class above under CSS Classes, then click Save.
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 (for example, <p class="bgPDF-left">) cut and paste it to the link tag (for example, <a class="bgPDF-left">).
If this doesn't make sense, please contact your unit web coordinator for assistance.
Intro paragraph
If you want your introduction paragraph to stand out, you can use this class to give the text a larger font and blue colour. This should only be used for the first few lines so your page isn't overwhelmed with large text.
Select your paragraph and choose introParagraph from the Styles dropdown.
This is an example of text that has the introParagraph class applied to it.
Faux blockquote
Select your paragraph and choose FauxBlockquote from the Styles dropdown to add a light grey background around a paragraph.
FauxBlockquote example
Float left and float right
The floatLeft and floatRight classes can be used on an image, to make text next to it wrap around the image. It is better to use column layouts to achieve the same effect.
If you want to use a float, right click on your image and select Image Properties. In CSS Classes choose floatLeft or floatleft and then click Save.
An image without a float class applied. The text does not line up nicely.
An image with a floatLeft class applied. The text flows nicely next to it.
An image with a floatRight class applied. The image moves to the other side and the text flows nicely.
Image border
The imgBorder class can be used on an image to add a white border to the image.
As most of our pages have a white background it won't show up on those, but it could look nice when an image is used within one of our coloured background boxes.
If you want to use an image border, right click on your image and select Image Properties. In CSS Classes choose imgBorder and then click Save.
An image with the imgBorder class applied on a blue background box.
Clear
If you ever apply a class that you want to remove, you can highlight your text and select Clear from the Styles dropdown.
Do not use
There are some older styles that should not be used from the Styles dropdown, but still appear in the dropdown. You may also see styles that only work for our new full width template pages. 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