COVID-19 Content for Non-UBCMS Sites

To promote efficient, consistent communication on all UB sites, select UBCMS content can be included on non-UBCMS sites.

Revised May 8, 2020

Technical Requirements

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

Content currently available

Issues Advisory Banner

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.

Examples

How to add the banner to your site

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.

Technical details

The banner's HTML page is loaded via javascript every time the page is loaded. If the banner is not empty, it is inserted at the top of the page just inside the <body> tag and a <link> to a stylesheet is added to the <head>. Care is taken to make sure the banner is not visible until the CSS is loaded. Nothing is added to the page if the banner turns out to be empty. Since the banner content is actually inserted into your page, you can add some extra CSS to your site's stylesheet if you need to tweak the positioning or styling, though changing how the banner actually looks is not recommended.

Add to a specific location

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.)

Callback

If you need to execute some javascript code right after (and only if) the banner is not empty and is inserted on your page, you can add this before the long-term-alert-banner.js <script> tag:

Testing

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:

'Latest on coronavirus' Callout

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.

Examples

How to add the Coronavirus Callout to your site

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.

Technical details

The callout content is loaded in a iframe so that more UBCMS styles and assets (icons, fonts) can be included exactly as they are in UBCMS. The iframe is resized to match its content's size using the fantastic iframe-resizer javascript library.