Alert Banner

Sometimes it is desirable (and attractive) to call attention to an important message by placing it inside of a colored banner on the page! The code snippet in the green banner below is one way to do this. Once the "Alert" banner is created, you can enter and format the text within the banner.

Your content outside of this alert banner!

Anatomy of the Alert Code Snippet

The alert banner is a part of Instructure Canvas' Style Guide, and so does not follow typical (to us non-coders) HTML coding conventions. It actually does follow those conventions, but they are defined in the Instructure CSS Global Code, so you only need to reference them in your code. In this example, the reference that call back to the Style Guide is the "alert alert-success" shown in yellow highlights in the anatomy chart below.

How to Make This Happen

What makes this code snippet tricky enough to warrant being in the Intermediate Module of this classroom, is that you do not see the actual banner while in the Rich Content Editor. You will note that below the example at the top of this page I have included the statement, "This is your content outside of this alert banner". I did that in the HTML editor to provide a placeholder to know where to start adding additional content that would not be in the banner. Read on...

• Select and copy the code snippet in the banner above,
• Navigate to a Canvas page or create a new Canvas page.
• Click Edit, and switch to the HTML Editor, then paste in your code in the desired location,
• At the end of this line of code, add the following "<p>my content outside of the banner</p>.
• What this does is identify the two clumps of text: 1) what's inside the banner, and 2) what's outside the banner.
• Unless you want to add all of your content through the HTML (something you should only consider if you are a coder), this will provide place-holders so that you will know where to add both your banner content and the rest of the content on the page.
• Click Save to view the results.

Troubleshooting & Working with Other Alert Styles

Most of the troubleshooting for this code snippet revolve around the fact that you cannot see this banner when you are in Edit mode - you have to actually save your page to see if you have done things right, thus my statements about using placeholders to identify content inside and outside the banner.

I have examples of all the alert banners styles below, and within each banner is the code used to create it. If you compare these with the original code above, you will note that the only change is the text in yellow that tells Canvas what style of alert banner to create.

Examples of Other Available Alert Styles

Or, try the alert banner's little brother called a Flash Notice. 

A Flash notice is also part of the Global CSS Code, but works very much the same way as Alert Banners. The code snippet for each style is inside each flash notice. Try them out!