Jump to Content

Alert Banners

Example yellow banner in the DC.description

You can only have one of these banners per page. Do not use this hack on course pages.

Example Maroon Information Banner

Alert Banners

Yellow Banner

By adding some code to an 'NUIG Code Only' content type you can have a yellow banner appear in the page body (to the right of the leftbar). Or you can add the code to the page's DC.Description (if it's empty) to make a full-width yellow banner appear just below the page title. See instructions below.

The first method (Creating a Yellow Alert Banner in the body of your page) is useful if you wish to have the same message appear on multiple pages. Simply add the message to your first page and mirror it to all other pages. Then, if you change one, all others will change too.

Maroon Banner

By adding some code to an 'NUIG Code Only' content type you can have a maroon banner appear 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 your page)

Go to the ste 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 NUIG Code Only.
Give your content a Name.
Copy the following code into the Code Field:
<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.
To put your content on Pending Click 'Save changes'.
To approve your content, 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 Actions Button and choose Edit section from the 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 put your content on Pending Click 'Save changes'.
To approve your content, click on the small arrow beside Save changes and choose 'Save and approve'.

How do I create a Maroon Banner

Go to the ste 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.
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 icon which appears on your banner by changing the class="info" information
class="researchInfo" - for an information symbol icon (default)
class="howToApply" - for a tick icon

class="findCourse" - for a magnifying-glass-on-a-page icon
To put your content on Pending Click 'Save changes'.
To approve your content, click on the small arrow beside Save changes and choose 'Save and approve'.