Automatically display a yellow Issues Communications banner in your site header to communicate ongoing, university-wide concerns (e.g. COVID-19).
Unlike most UBCMS components, the Issues Advisory Banner relies on shared content displayed using a Shared Content Reference. Two steps are required:
Remember to set a 'Flush Trigger' for your homepage (details below) and re-activate your header and home pages.
Place this component in your site's Header page, which is located in your Site-Wide Configuration folder. We encourage you to place it immediately under the main header component, and below the Emergency Alert Banner (if you have one).
Reference path: Set the reference path to:
To ensure that the banner will display on your site and stays up to date, you must set a Flush Trigger on your site's homepage.
In Page Properties, in the Advanced tab, under Server Caching, add a new Flush Trigger with this path and then re-activate that page: /content/shared/www/emergency
Unless there is a university-wide need to communicate information, the banner will NOT be visible on your home or header pages, even in the Author environment. When the banner is operational, you should see it in Author on your header and Web pages, and on your live site.
Remember to re-activate your homepage!
To promote efficient, consistent communication on all UB sites, select UBCMS content can be included on non-UBCMS sites.
Revised May 8, 2020
Adding this content to your site outside of UBCMS will require the knowledge and ability to edit your site's HTML templates. A developer's skill set is required
Automatically display a yellow Issues Communications banner on your site to communicate ongoing, university-wide concerns (e.g. COVID-19). For UBCMS websites, this is normally displayed in the upper header.
The banner requires jQuery. The latest version (3.4.1) is recommended, but any version will probably work. If you do not have jQuery on your page, you can add this to the HTML of your page:
Once you have jQuery, add this script tag to the page HTML anywhere after the jQuery tag:
You probably want the banner on every page of your site, so you will need to add these tags to every page, such as to your site's header include files.
You can continue to keep the banner code on your page after the Coronavirus communication passes; we may use the same banner for other communication in the future.
If you need to load the banner in a specific location in the page other than the top of the <body> add an empty <div class="long-term-alert-banner"></div> element in the page where you'd like the banner to be inserted. You should test that your page looks ok with that element but without the banner filled in in case the banner is turned off. (For example, keep the <div> but remove the <script> temporarily.)
To test a version of the callout banner with alternate content if the real banner is not currently in use (not visible), add this before the long-term-alert-banner.js <script> tag:
An orange callout with the latest headlines on UB's COVID-19 site. For UBCMS websites, this is located in /content/shared/www/coronavirus/modules/audience-pages and deployed with a Shared Content Reference.
To add the Coronavirus callout to a page, add this code to your site's HTML where you would like the callout to appear:
The callout will be the width of its container and as tall as it needs to be to contain its content. It will resize if the browser window is resized. The callout does not require jQuery.
You should keep track of where you add this callout so that it can be removed when Coronavirus communications wind down. It will not disappear on its own like the banner.
March 16, 2020