Placement style guide

DEFAULT MENU - DESCRIPTION LIST (Main Article area)

Usage: These menu's do not require you to select a placement style  - but they do require the correct menu settings to be applied.

Menu Settings - Description list:  This menu requires the description list setting

Location -  This is the most common menu placement on the site and needs to be placed anywhere in the main content area of the site

DEFAULT MENU (Description list - External URL)

These menu placements do not require any placement styles, but just need to have the correct menu settings applied

How to set up the external link:  When creating a new page, (you can even use the name of an existing page in the site if already taken) you just have to overwrite the url/slug that's autogenerated by the CMS with the full external link https://www.etc..  You could also use this method to link to other pages inside the website by entering the full url of the page)

Selecting the right menu setting:

 

DEFAULT MENU - DESCRIPTION LIST (Banner Row)

Usage:  As before, these menu's do not require you to select a placement style  - but they do require the correct menu settings to be applied.

Menu Settings - Description list:  This menu (as seen on the homepage) has the same settings as the previous menu placement:

Location -  In order for this menu to pick up the styling, (slightly shallower box and blue heading border) - it must be placed in the banner row of whatever page you're on - this is in accordance with the design and is one less placement style to worry about.

DEFAULT MENU PLACEMENT (Standard list)

Usage: This menu does not required a placements style (other than the default applied) - but it requires the menu options template setting to be 'Standard List' as per below. The menu headline also needs to be set to show 'menu's headline'.

Menu options: This is a manual menu placement and here you can select the pages you wish to appear in the menu

Emergency banner

How to use:

Any text content that is placed as the last item in the 'Header" will automatically receive the yellow banner styling and replace the aqua band in the header.  This has been reserved primarily for this emergecy notice and therefore no additional placement styles are required, it will pickup the default style for this content.

 

 

POPUP PLACEMENT (Default)

Usage: Regular H2 text for the heading and then paragraph text for the body text.  The background seagull logo image is automatically applied.

 

 

RD - TC - Border placement DO (GREEN)

Usage: Any text content with this placement style applied will pickup this style

RD - TC - Border placement DON'T (RED)

RD - TC - Border placement YELLOW

RD - TC - Border placement AQUA

RD - TC - Cloesable placement (Banner Row)

Usage: This is a regular text content placement that sits above the breadcrumb - the Closeable placement style is what determines the closeable nature of the placement, but its positioning on the page is what gives it the correct font and colour formatting.

Variations: If you wanted to have this warning message WITHOUT the ability to close the placement, then you do not need to select a placement style, just placing the content in the banner row is enough for the placement to pick up the correct styling

Live stream blog categories

Usage: This blog requires a category of 'live stream' assigned to it in order to pickup the fan icon and aqua border styles

RD - TC/Table - Contact block/ Blank table

Usage - Create a table and use one table cell for each contact area.  The placement style will override the default table styling - the CSS will take care of table padding and cell alignment too.

RD - TC - Numbered step accordion

Usage:

1. Each of the step headings need to be h3 titles.  

2. Any content that fits between the H3 titles will form the accordion content, until the next H3 title is added - So, just make sure you do not use another H3 title inside the accordion, as this will then trigger a new accordion step to be created.

Apply the placement style:

Then the Javascript should take care of the rest.

RD - TC - Safe exit

Usage: This required the exit site image to be linked to a safe google landing page.

As this is a fixed placement it can be placed anywhere, although I would suggest it's best placed on the bottom row to minimise disruption to other placements on the page.

 

Related links placement

1. Head to the page or external link you would like to be part of a related list placement

2. Now add a Category to the page, using the category type of 'Related Link'.  This page already has a related link category of Test page link attached - but we will add a new one - pages can be related to multiple categories.

 

3. If the category hasn't already been created you can create a new one here

 

4. When creating the category, select what 'Type' of Category it should be - in this case we want a new category of related links

5. Let's create a new related link category for the "About us" page (as an example)

6. We now have 2 related links categories assigned to the 'Editor Styles' page

7. Now to create the related link placement on the page you want it to show - This requires us to create a new Content List

8. Create a new list here

9. Give the list a name - All related link placements will just output a title of 'Related Links' so you can put in Brackets what the page is for. 

- Then filter by category

- Type of content list - 'Page List'.

RD - TC - Custom Page navigation

Usage: This menu placement needs to be created manually using a standard ordered list using a regular text content.

An example of this working can be found here:

https://www.arun.gov.uk/section-navigation

1: Create the menu placement -  Doing this as a piece of text content gives you more options for descriptive link names not bound to page titles.

2. Ideally this should be placed on the top row of the article area, try not to place this in the top row as this will cause issues with the breadcrumb on mobile.

2. Apply the placement styles

 

 

RD - TC - Custom pagination

Usage: 

1. Create an Unordered list for the previous and back buttons - This only needs to be a list of 2 items. NB - You do not need to write the words PREV or BACK, just the name of the link.

2. Add a url to page you want

3. Now add a class to the link of either 'previous-page' or 'next-page' to the links:

 

4. Add a placement style to the placement

 

Hidden / Inline accordion 

1: In order to apply this you need to go in to the source view mode and apply the class of "accordion-text".

2: To end the accordion, you need to insert an h5 tag - in this example I have called it accordion end, but you could call it anything you want.  The presence of an H5 triggers the content that follows to reset.

3. In the event you want to have some 'pre text' in the same line as the accordion, there is one addtional div that needs adding before the accordion button

4. In the example above, the "have a" and "and a" need to go inside their own custom divs - The rest of the accordion needs to be treated as above.

 

RD - MP - Custom report tree

1. Create the menu tree using pages in the CMS - Contact a service is the Top page where the inital menu is placed

2. All the pages in the First column of the menu are all immediate children of "contact a service' page.

IMPORTANT - The pages in the first column are not pages intended to be directly visited by the customer, so DO NOT place content directly on these pages, they are purely there to provide the menu branches.  These pages need to be hidden from the site global search.

3. The pages in the second column is where the page content will be placed.

4 - PAGE STYLES

On the first page 'Contact a service' and all the pages in the 2nd Column (not the first column), we need to apply a page style of "RD - Contact a service":

 

5. Place the first instance of the mega-menu on the top page - 'Contact a service' page.

6. Place the MENU and CONTENT on the 2nd column page - The menu placement needs to be in its own row.  The content needs to be in the row directly after the menu placement.  If you want multiple pieces of content to appear in the 3rd column (where the content sits) this is possible by allowing the content to to share the same row.

7. Content sharing the same row

8. Make sure the menu placement of RD - MP - Custom report tree is selected