How to add a top alert box in Primo

1 Modify custom.js
2 Modify custom1.css
3 Add/modify topAlert.html
- 3.1 Credit

This code will add an alert bar to Primo which appears at the very top of the screen. Modification of 3 files in the Primo Back Office custom package is required.

Modify custom.js

File path example: 01CALS_INST.zip\01CALS_INST\js\custom.js

Include this code in the custom.js file after the var app = angular line but before the closing })(); line.

Note: be sure to supply the correct code for your institution in the templateUrl path.

// add custom topAlert.html bar
app.component('prmTopbarAfter', {
templateUrl: 'custom/01CALS_INST/html/topAlert.html',
controller: ['$element', function ($element) {
this.$postLink = function () {
const $primoExploreMain = $element.parent().parent().parent();
const $el = $element.query(primo-explore-top-alert).detach();
$primoExploreMain.prepend($el);
};
}]
});
// end custom top bar

Modify custom1.css

File path example: 01CALS_INST.zip\01CALS_INST\css\custom1.css

Include this code anywhere after the @charset declaration. Be sure that the colors you choose pass web accessibility requirements.

/* css for topAlert.html alert box */
primo-explore-top-alert .bar.alert-bar {
font-size: 18px;
font-weight: 700;
border-color: #F89763;
background-color: #F89763 !important;
}

Add/modify topAlert.html

File path example: 01CALS_INST.zip\01CALS_INST\html\topAlert.html

The code below is the entirety of what is required in the topAlert.html file. Do not include normal HTML opening and closing tags such as <html>, <body>, etc.

Note: When you first do this, topAlert.html will not exist; you must create it.

<primo-explore-top-alert>
<div class="bar alert-bar" layout="row" layout-align="center center">
<span class="bar-text">
<span translate="Your alert message here."></span>
<a href="https://www.calstate.edu/examplelink" target="_blank" class="arrow-link md-primoExplore-theme">
<span>See more</span>
<span class="sr-only">(opens in a new window)</span>
<prm-icon external-link icon-type="svg" svg-icon-set="primo-ui" icon-definition="open-in-new">
</prm-icon>
</a>
</span>
</div>
</primo-explore-top-alert>

Credit

The code here comes from: https://github.com/barnabyalter of NYU Libraries. For source, see: https://gist.github.com/barnabyalter/1f38846a8e0d768831640ab73acc7a94