Transforming UB’s digital communications.
To promote efficient, consistent communication on all UB sites, select UBCMS content can be included on non-UBCMS sites.
Last reviewed: April 8, 2022
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 adding it to your site header's 'include' files.
You can treat this code as evergreen and keep it on your pages after the COVID-19 communication ends; we will likely repurpose the same channel for future similar communications.
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.
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.)
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:
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.
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.