Content Editing Guide

This page outlines the available formatting options that can be used when creating / editing webpages using the WYSIWYG (What You See Is What You Get) editing toolbar.

Headings

The paragraph dropdown allows you to choose between:

• Paragraph
• Heading 2
• Heading 3

(Note that Heading 1 is not an option because it is reserved for the page title).

Be aware that when using Heading 2, these headings will automatically be used to generate the 'On this page' table of contents links shown in the left hand sidebar.

Text Styles

The styles dropdown selection provides the following options for applying styles to text.

Note that the available options may depend on the type of text you have selected. 

For example, 

• Formatting lists into columns is only available after you have applied bullets (unordered list) or numbered (ordered) list formatting.
• Cell colour styles can only be applied to table cells.

Intro Paragraph

This style adjusts the text display and has been designed to be used for page introductions.

Small Text

This style will show text smaller.

2 Column Unordered List

This will divide an unordered list (bullet list) into 2 columns. Create a bulleted list before applying this style.

• Item a
• Item b
• Item c
• Item d
• Item e

2 Column Ordered List

This will divide an ordered list (numbered list) into 2 columns. Create a numbered list before applying this style.

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5

3 Column Unordered List

This will divide an unordered list (bullet list) into 2 columns. Create a bulleted list before applying this style.

Note: If you find that this isn't applying - ensure that you don't have the 2 column option and the 3 column option enabled at the same time.

• Item a
• Item b
• Item c
• Item d
• Item e

3 Column Ordered List

This will divide an ordered list (numbered list) into 3 columns. Create a numbered list before applying this style.

Note: If you find that this isn't applying - ensure that you don't have the 2 column option and the 3 column option enabled at the same time.

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5

Red Cell, Orange Cell, Green Cell

Three cell colour options are available so that traffic-light type symbolism can be used within table display.

Link Button

The link button style can be used if you would like a hyperlink to be styled to look like a button action. Create a hyperlink first before applying the style.

A hyperlink without the style applied.

A hyperlink with the style applied.

Templates

Applying a template will create a page region that can wrap other text/images to apply specific layout formatting.

Details

A Details wrapper will place a collapsible area on the page. Users will be able to click on the summary title to expand the collapsible area.

File Link Highlight Block

Info Highlight Block

Link Highlight Block

2:3 Ratio Column Layout

This wrapper will create a two column region with the right hand side column being wider.

Column layouts are particularly useful when needing to show text beside images.

3:2 Ratio Column Layout

This wrapper will create a two column region with the left hand side column being wider.

Column layouts are particularly useful when needing to show text beside images.

Bold, Italic, Underline, Strikethrough

These standard formatting options allow for bold text, italic text, underlined text and strikethrough text.

Blockquote

The blockquote toolbar option can be used to highlight and bring particular attention to a text statement.

Hyperlinks and Bookmarks

To create hyperlinks, highlight the text you want to turn into a link and then select the hyperlink toolbar option. You will be presented with the link dialog prompt.

Hyperlinks

If linking to another page within this site, start typing the title of the page and then select from the autocomplete options.

The title field can also be used to specify some tooltip text that will be shown to users if they hover over the link

If linking to an external website, enter the full URL of the website into the address field.

The title field can also be used to specify some tooltip text that will be shown to users if they hover over the link

It is a good practice when linking to external websites to use the use the advanced options to configure the link such that it opens in a new window (browser tab) when a user follows the link.

Link to Document Media

When creating a hyperlink, the Media Library option will allow you to upload a document to link to, or to choose from the library of documents already uploaded into the system.

Links to document media will display with a small icon beside.

WCPFC IUU vessel list for 2025

Note that the 'Insert Media' toolbar option provides an alternative presentation for linking to document media.

Bookmarks

Creating a bookmark allows links to direct users to a specific section of a page. This is particularly useful for very long pages, where you might want to link users to a specific heading so that they don't need to manually scroll down the page to find the relevant section.

To create a bookmark, place your cursor where you would like to place a bookmark, select the bookmark option and enter a bookmark name.

Then, when you create a hyperlink, at the end of the URL field, enter a # (hashtag) symbol followed by the bookmark name.

Lists and Indenting

Bulleted (unordered) and numbered (ordered) lists can be created. If needed, you can also override the starting number of a numbered list.

The increase indent and decrease indent options can be used to form sub-lists within a parent list.

• Item A
  • Sub-item A1
  • Sub-item A2
• Item B

• Item C

   

1. Item 1
2. Item 2
   1. Item 2.1
   2. Item 2.2
   3. Item 2.3
3. Item 3
4. Item 4

Tables

It is recommended that tables should only be used to present data that naturally lends itself to a tabulated format and be aware that tables with many columns may not present well when users are viewing the page using a mobile device with limited screen space.

Do not use tables for aesthetic layout purposes such as dividing text into columns as the result is unlikely to present well on mobile devices. Instead, refer to the column options within the templates menu.

Inserting Media

The Insert Media dialogue allows you to upload images and documents to be inserted into the page, or to choose from items previously uploaded into the media library.

The Chart media type is for inserting dynamic chart plugins into a page. Note that additional charts need to be pre-built by developers before they are available to be inserted.

When inserting an image you can add captions and configure the display of the image to be Small, Medium or Large.

Images will not be scaled up. It is recommended that any images that are to be displayed as 'Large' should be at least 1000px wide.

Wrapping Text Around Images

When inserting an image, it can be aligned ("floated") to the left or right in order to wrap the text around the image.

If you would like to break out of the wrapping early, use the Float Break option to force a new line without wrapping.

If wrapping text around images, be aware that the amount of text that wraps can be different depending on the device end-users are viewing the page on. An alternative to wrapping text, which can give more control, is to use the column options from the template menu.

Inserting Document Media

The Insert Media dialogue allows you to insert document media into a page. By configuring the view mode of the inserted media you can display these as full formatted links or as icons only.

Using the insert media dialogue will not allow you to link to a document in-line within a sentence. For that, use the Link toolbar option instead of Insert Media.

Full Embedded Document Media

Icon Only Display

Horizontal Line

To divide a page into sections, the horizontal line toolbar option can be used.