Add Alert-Style Banners to Pages

I wanted to have the ability to add a “banner” to alert our users of outages, deployments, and other things on the homepage without having an annoying, obtrusive pop-up.  Many companies use SharePoint as their intranet homepage for their users. Implementing Alert-Style banners can help you surface information to your users in a timely and consistent manner.

Alerts may be for things like known outages, severe weather or other emergent announcements, whereas yellow/warning boxes would be for things like planned maintenance or outages of critical systems and applications.

Simply create a <div> and set the class to “Alert” for red banners, and “Warnbox” for warnings.

There are two parts to this solution.

The first part involves using the source editor in Edit Mode of a SharePoint page.
<div class="alert"> 
 <span class="closebtn">​​×</span><strong>Alert!</strong> -- PUT YOUR ALERT MESSAGE HERE. -- ​<br/></div> ​
 
<div class="alert warning"> 
 <span class="closebtn">×</span><strong>Warning!</strong> -- PUT YOUR WARNING MESSAGE HERE. -- </div><br/>
The second part, as you may have guessed, is to drop this CSS in– you may need to add a .css file to site assets, and link a content editor to the file, rather than adding the embed code directly into the content editor.
<script>
// Get elements with class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// Loop through close buttons
for (i = 0; i < close.length; i++) {
// When someone clicks on a close button
close[i].onclick = function(){
// Get the parent of <span class="closebtn"> (<div class="alert">)
var div = this.parentElement;
// Set the opacity of div to 0 (transparent)
div.style.opacity = "0";
// Hide the div after 600ms (the same amount of milliseconds it takes to fade out)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
opacity: 1;
transition: opacity 0.6s;
margin-bottom: 15px;
}
 
.alert.warning {background-color: #ff9800;}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>

2 Replies to “Create Alert-Style Banners on SharePoint Pages”

    1. I updated the post. Take note of the javascript that’s added in the second portion. You may have to create a .css file in /siteassets/ and link the content editor to it. For the scripts to work in all browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *