Application of house style

Application of house style

Heading 4

In general we’ve been using Heading 4 for section headings.

We’ve also been using colours from our AUA palette to highlight words within sentences that justify standing out from the rest of the text. These highlighted words would not normally be bold.

Text formatting

Text formatting

FONT: By default all text on the website shows as Roboto font.

COLOUR: The default text colour is currently black, but this is being changed to Granite Grey from the AUA colour palette. To manually change text colour select the text and use the text colour function in the toolbar. All of the AUA colours are available for easy access.

SIZE: The size of ‘Paragraph’ (regular) text is set site-wide by default.

STYLE: The different ‘Heading’ formats are shown below.

Paragraph

Paragraph bold

Heading 1

Heading 1 bold

Heading 2

Heading 2 bold

Heading 3

Heading 3 bold

Heading 4

Heading 4 bold

Heading 5

Heading 5 bold

Heading 6 

Heading 6 bold

Preformatted

Preformatted bold

NOTE: When making any of the Heading formats bold, it’s worth noting that in the editor there’s no visual indication that the bold formatting has been applied (other than the ‘B’ button being depressed in the format bar).

Quotation block

Quotation block

When you add the quotation style to a block of text it automatically formats it with a coloured background and white text. Don’t forget to add the quotation marks where appropriate.

“Don’t change the colour of the quoted text – if you do this the text will become invisible!” Graham

Web addresses

Web addresses

Web addresses should be written without http://www
For example: aua.ac.uk

If writing for the web or electronic documentations, a hyperlink should be created.
For example instead of: Click here for more information.
Use: You can find more information on the AUA website.

Adding links

To add hyperlinks to external websites.

1. Select the text you want to link.
2. Click the link button and add the full URL web address. Ensure you include the http:// or https:// before the address to make sure it gets recognised as a link.
3. Click the ‘apply’ button.

There is a shortcut.

1. Select and copy the web address you want to link to.
2. Select the text on the website you want to link from.
3. Paste the link using Ctrl-V (or Right-click > Paste)
4. This action will add a clickable link to the selected text.

Email addresses

Email addresses

Email addresses can be added as links to any text. When people click on the link it will open their default email program and start a new email.

1. Select the text you want to add the email address to
2. Click the link button. (If the text you’ve selected is an email address it will automatically be converted into a link and step 3 isn’t required.)
3. Add mailto: followed by the email address (no spaces), then click the ‘apply’ button
   e.g. mailto:web@aua.ac.uk

It’s possible to set the Subject field in advance using the following format.

mailto:web@aua.ac.uk?subject=This is my email subject line

Naming images and files

Naming images and files

Please follow the naming protocol for all images and files uploaded to the website’s media library. This will make it considerably easier to find images and files previously uploaded.

• Rename the file on your computer before uploading it
• The name should be the type of file followed by the full descriptive name without abbreviations.
• e.g. “photo john owens building university of manchester.jpg”

Types of file descriptors to be used are

• photo – for photographs
• logo – for company and organisational logos
• graphic – images such as screenshots or images created in Photoshop, Canva, etc
• pdf
• word

Adding images

Adding images

When images are added to a page or post during editing they are automatically added to the media library at the same time. Images can also be added to the media library directly via the dashboard.

When adding an image to a page or post, before you hit the ‘Insert into page’ button check the following:-

• Has the file naming protocol been used? If not, edit the name.
• Add a description of the image to the Alt Text box. This is for people browsing with images turned off and for users with sight impairments using accessibility plugins.
• Is it the correct size? You might need to scroll down to see the size options. See the section below for more information about image sizes.

Image sizes

When images are added to the media library WordPress automatically creates different sized versions. When adding an image into a page or post choose the size that’s most suitable. If the size you want is, for example, half way between medium and large you should add the large image and shrink it to size rather than using the medium image and expanding it.

• Thumbnail (square)
• Medium
• Large
• Full size

Custom image sizes

It may be that you’re adding a number of different sized images and you want them to show the same size, or you want a single image to be a specific size.

To change an image to a custom size (width or height):-

• Insert the image onto the page or post
• Click to select the image then click the edit button
• In Display Settings > Size click the drop-down arrow and pick Custom Size
• Change the width or height of the image. WordPress will keep the ratio the same, so when you change the width the height will automatically change too (and vice versa).

Adding PDFs and documents

Adding PDFs and documents

When documents or other files are added to a page or post during editing they are automatically added to the media library at the same time. They can also be added to the media library directly via the dashboard.

To add or not to add, that is the question

Although they can’t be totally avoided, we are trying to move away from downloadable files where possible. If you’re asked to add a PDF file or other document to the website you should stop and consider whether it’s the most appropriate format, or whether the information can be presented in a better way. 

• Word document application forms should be replaced by the website’s Forms option
• The contents of PDFs may be better suited to a web page. If there’s a lot of information then the ‘with children’ template might be more suitable. See our Event Terms and Conditions as an example.
• Powerpoint presentations can be added to our Slideshare account and linked to from our site.

NOTE – It’s important to indicate when a link is to a downloadable file instead of a page on a website. To do this we place the type of file in square brackets.

e.g.
Download the AUA Mark of Excellence self-assessment form [MS Word document]