Title sizes – This is an H1. This is automatically set by WordPress to be used for the title of the page. Please don’t use this anywhere on the site. H1’s are automatically generated and are read by google as the title of the page. If we have more than one use of an H1 google will get confused and index the page incorrectly.

Title sizes – This is an H2. This is used for section titles on the front page only and automatically renders in all caps.

 

Title sizes – This is an H3. This is used for Subtitles within an article or the body text.

 

Title sizes – This is an H4. This is used within the text body when you need a subtitle that is smaller than the regular subtitle but bigger than “Strong”.

 

Title sizes – This is an H5. As you can see this really has no place being used because it’s too small so let’s just pretend it doesn’t exist.

This is a tooltip test. Don’t Use this for now because the rollover colour is incorrect.

This is a table. Below the table is a code snippet you can copy and paste if you need to create a table.

Table Header	Table Header	Table Header	Table Header
Content	This is longer content	Content	Content
Content	This is longer content	Content	Content
Content	This is longer content	Content	Content
Content	This is longer content	Content	Content

 

Notes about using a table.

In the table above you will see the top of the table rendered in a darker colour using bold text. This is because at the top of the table code we have used

IF you don’t want your table to be rendered with a header element then skip / remove this code and just use from.

Content	This is longer content	Content	Content
Content	This is longer content	Content	Content
Content	This is longer content	Content	Content
Content	This is longer content	Content	Content

 

Labels

I am a Label Use this Label if you need to mark a small section of text or draw attention to a specific section or update etc.

 

Image padding

If you add an image in a post and you need to have the text wrap around the image you will also need that text to have a small gap between the image and text. To Achieve this you will need to add the following class to the code that is inserted into the post

I’m adding extra text so the javascript code snippet does not overlap the image and give me a poor layout.

 

If you look at the code above you might see the part of the following line:
img class=”size-medium mar-l-10 wp-image-24982
alignleft size-page-portrait mar-r-10

Within this line you will notice mar-l-10.

Using mar-l-10 or mar-r-10 will create a 10 pixel gap either to the left or right of the image. When you initially see the code it may look something like this: “size-medium wp-image-24982 “. Note you will need to add the class mar-l-10 or mar-r-10 in between so as to create the gap successfully.

Adding video to a post

To Add a video to a post you will need to use a shortcode in order to ensure the video can maintain it’s correct size and aspect ratio when viewed on different devices.

The Shortcode interface found in the Post interface of WordPress has a drop down menu that provides examples of how to write the required Shortcode.

Choosing YouTube will show an example of what a Youtube Shortcode looks like.

 

Replace the code within the brackets (gA7jNacRMVI) with the relevant YouTube code.

The video will be displayed in the correct aspect ratio and will scale to fit different devices.

 

Buttons

Button Text »

Embedding an image and Image sizes

To optimise image loading on the website, be sure to scale the image to the exact size you need and use optimal image compression before uploading.

The width of a column is 639 pixels

Suggested sizes for images within the column are:

• 639px wide width=100%
• 320px wide width=50%
• 160px wide width=25%

The least problematic way to embed a full width image is:

If the image does not require a caption, copy and paste the full url of the image from the media gallery panel. You will need to add “width=100%” as part of the image code. See code snipet below for the example.

Adding width=100% will allow the image to scale to the column width which changes depending on which device is used to view the page (e.g. iphone etc.)

To embed an image with a caption on a page that does not allow a “featured image” you will need to do a work around for the exist “insert image” function

Use the “Insert Image” function ensuring you add the title, alt and caption fields for the image

Edit the inserted code by replacing the url for the image with the full url. Be sure to also remove size references e.g. width=”300″

If the image is a full column image be sure to include width=100%. As shown as part of the code snipet above.

See both code samples below so see the difference

Photo by sean – Full Width

Photo by sean – Half Width

Photo by Dan – 1/4 Width

Media Coverage Layout

To create a Media Coverage layout follow the style below.
Note that to create the indent of the excerpt text block you will need to add a div at the top and bottom of the excerpt.
The opening div should look like this – div class=”mar-l-20″ – the mar stands for margin, the l = left and 20 = 20 pixels – i.e. 20 pixel left margin. Check the snippet below for the exact code if you are unsure.

Excerpt from “Insurance only part of disaster resilience, says climate change panel”

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut diam in arcu mattis venenatis ac et mauris. Nam sit amet dapibus diam. Donec vulputate imperdiet tortor. Nullam scelerisque nisl eget consequat sollicitudin. In sollicitudin nec lacus convallis bibendum. Aenean tellus magna,

luctus a quam vel, vehicula luctus quam. Mauris semper, enim vel dignissim euismod, diam metus dignissim sem, laoreet pretium est nunc eget quam. Vivamus tellus libero, pellentesque id odio at, aliquam facilisis sapien.

Pellentesque lacinia sodales nisl, vehicula egestas justo ullamcorper non. Mauris a convallis eros. Nunc eu justo venenatis, cursus quam nec, fringilla mi. Maecenas sem est, condimentum sit amet sagittis ac, adipiscing ut tellus. Aliquam erat volutpat. Morbi ligula tellus, semper in neque in, faucibus vehicula odio. Donec ut egestas magna, nec accumsan justo. Donec id felis vel elit fermentum aliquet. Aliquam elementum tempor quam quis vestibulum. Donec condimentum mi nec massa convallis congue. Sed ac dui augue.

Home Page large banner image size:

Article image size:

Profile image size:

(note, on unu.edu some images are 150×150 but this is too low. the images does not display at this size but the extra size helps with the quality).

News page image size:

Half column image size: