The 糖心少女Alert Banner is a means to provide important, and in some cases emergency, information to website visitors. Information comes from the聽.聽The Alert System is responsible for SMS, e-mail, phone and other push-style notification options.
When active, the banner displays a brief聽鈥渁lert鈥� on any page where you鈥檝e pasted the code (see the installation section below).聽The banner聽links to聽our聽, which contains more details聽about聽the emergency or event that triggered the alert.聽聽The blog聽also has聽links and resources that could be useful during non-emergency situations.
Color description
The banner is designed to display three different colors, depending on the type of alert.聽 Here聽are the general guidelines for when a certain color will be used.聽 The content of the alert will always provide a much better sense of the actual emergency than the color will.聽 Also, because events and emergencies聽are often in gray areas, similar alerts may be classified differently.
- RED聽鈥� High level emergency or threat
- ORANGE聽鈥� Medium emergency or threat
- STEEL聽鈥� Ideal for info posted between alerts like campus weather closures.
Installation
The banner will only show up on the page where you have put the code. If you want the banner to show on every page, then you鈥檒l want to have your header and footer in an include or delivered via a content management system. The script is very lightweight and only contains a few lines of JavaScript.
NOTE: If you copy and paste the script make sure to replace the smart quotes with straight quotes.
Above the </body> tag:
<script src=/static/alert.js" type="text/javascript"></script>
That鈥檚 it!
Testing
To verify the banner will not disrupt any elements on the page, the test code is available below. The banner will display a color of your choosing and a brief message.
Append a聽#uwalert-red,听#uwalert-orange, or聽#uwalert-steel聽to your page鈥檚 URL.
Example:
- Original URL:
- Test URL: