Jump to Content

Alert Banners

Example yellow banner in the DC.description

ℹ You should not put more than one alert on any page. Also, do not use this content type on course pages - they have a separate alerts system.

Example Maroon Information Banner

Alert Banners

Yellow Banners

By adding an 'Alert Banner (non-course pages)' content type, a banner will appear in the page body (to the right of the leftbar). Using this content type, is useful if you wish to have the same message appear on multiple pages. Simply add the Alert Banner to your first page and then mirror it to all other pages. Then, if you change one, all others will change too.

This content type allows your to select an icon (e.g. warning, info), enter the alert text, and, optionally, add a section link at the end of your alert message (with a configurable label). You can also change the colour of the alert banner, but we recommend using the default yellow colour.

Alternatively, you can place HTML code into the page's DC.Description (if it's empty) to make a full-width. yellow, information banner appear just below the page title, as shown above. See instructions below.

Maroon Banner

By adding some code to an 'NUIG Code Only' content type you can have a maroon banner appear, which is simply a big link, in the page body (to the right of the leftbar). See instructions below.

This method has the added advantage that, on small-screen devices (e.g. mobile phones), it will stick to the bottom of the screen and remain visible, even if the user scrolls down or up.
To test this feature out, simply make your browser window narrow.

How do I create a Yellow Alert Banner (in the body of my page)

Go to the site structure and find the section you want the banner to appear on.
Click on the Actions Button and choose Edit section from the dropdown menu.
Click on +Add Content.
Choose the content type 'Alert Banner (non-course pages)'.
Give your content a Name.
Enter in your alert message
You also have options to:
1. Select an icon (that appears on the top-left).
2. Choose a different background colour (the default colour is yellow).
3. Add a 'Call to Action' link.
4. Prevent the banner from inserting white-space between itself and the piece of content, below it.
To save your changes (without approving them for publication), click 'Save changes'.

To save your changes and approve them for publishing, click on the small arrow beside Save changes and choose 'Save and approve'.

You can mirror the same Alert Banner onto multiple pages. This allows you to change the banner text, on any of those pages, and all other 'mirrors' of that content will automatically change too.

How do I create a Yellow Alert Banner (full-width yellow banner below the page title)

Go to the site structure and find the section you want the banner to appear on.
Click on the button and choose 'Edit section' from its dropdown menu.
Click on the 'Other' tab and choose Metadata from the dropdown menu.
Copy the following code into the DC.Description field (as long as it is empty)

<div id='msg' class='info postIt'><span>Your message here</span></div>
Replace the text 'Your message here' with the text you want to appear
Remove the word 'info' from the keyword to remove the i in your message

Note: You can only have one of these banners per page
To save the banner, click 'Save changes'.

Note: Whenever you save a section's settings, those changes will go live on the next scheduled publish. This is different from editing content types, which do not publish until you explicitly approve your changes.

How do I create a Maroon Banner

Go to the site structure and find the section you want the banner to appear on.
Click on the Button and choose 'Edit section' from the dropdown menu.
Choose the content type 'NUIG Code Only'.
Give your content a name.
Copy the following code into the Code Field:
<div class="pageButtons" style="width: 100%;">
<div class="pageButtonsWrapper">
<ul style="display: block !important;">
<li><a href="#" class="info"><span>Your text goes here</span></a></li>
</ul>
</div>
</div>
<style>
@media only screen and (max-width: 999px) {
div.pageButtons li { display: block !important; }
}
</style>
Replace the text 'Your text goes here' with the text you want to appear
You can replace the "#" with a web address to turn it into a link, for example:
<a href="//www.universityofgalway.ie"... will bring the user to the University of Galway homepage.
You can change the banner's icon by changing class="info" into:
class="howToApply" - for a tick icon

class="findCourse" - for a magnifying-glass-on-a-page icon
To save your changes, without approving them for publication, click 'Save changes'

To save your changes and also approve them for publication, click on the small arrow, beside 'Save changes', and choose 'Save and approve'.