Announcements

One of the things I have always disliked about Canvas is that students have to navigate to another area in the classroom to read any announcements.

Use the code snippet on this page to create an announcements box like this one on the Home Page of any course, and better grab your students’ attention!

Place an editable announcement box on the Home Page of your classrooms like the one to the right. This code can also be used to create a side-bar on any canvas page. After adding the HTML code below to a Canvas page, you will be able to type (or copy/paste) directly into this Announcements box using the Rich Content Editor.

HTML Code

<div class="img-rounded" style="float: right; background-color: #fffbcf; width: 315px; height: 260px; border: 1px solid black; margin: 10px;">
<h3 style="color: #ffffff; background-color: #2a4e57; text-align: center; margin: 0px; padding: 0px;">Announcements</h3>
<div id="cc-homepage-announcements" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;"> </div>
</div>

Anatomy of This Code

The image below shows the anatomy of this code, or as much of it as we need.

How to Add an Announcements Box (or side-bar) to a Canvas page - Let's Play with this a Bit!

Copy the code above and paste it into a blank Word document to make it easier to modify,
Replace the grey-highlighted text with the word "left". this will move the side-bar to the left side of your page.
Change the background and text color codes to any color you would like. Where do I find these color codes you might ask, well you can find them at this web site: Computer Hope
Change the width of the announcements box to 360px, and the height to 420px
Change the length of the slider-bar to 320px. The slider should always be shorter that the announcements box, but you may have to play with it a bit, to find which length works best for you.
Select/copy the resulting code,
Navigate to a Canvas Page, click "Edit" the switch to the HTML Editor
Paste the code into the HTML Editor, then
Switch back to the Rich Content Editor to see if you like it.
Or, you can simply paste the code into your HTML Editor, and use just as it is!

Below is the Announcements Box with the change I described above, added to this page using HTML code.

Left Sidebar

I have typed a new title in the header while in the Rich Content Editor, note the color changes.

Because I wanted to use paragraph breaks, I decided to type my message in Word, and then copy/paste it to this panel. Once pasted into the panel, I used the Rich Content Editor to make the text 14 point, and to make some words bold.

Once I insert more text than this announcements box can display, the slider bar appeared. Below is the code I used to create this particular Announcements Box.

<div class="img-rounded" style="float: left; background-color: #FFF8C6; width: 360px; height: 420px; border: 1px solid black; margin: 10px;">
<h3 style="color: #ffffff; background-color: #15317E; text-align: center; margin: 0px; padding: 0px;">Announcements</h3>
<div id="cc-homepage-announcements" style="height: 320px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;"> </div>
</div>

Tips and Disclaimers

If you want text to wrap around your announcements box, either left or right side, then type your text first, and paste your code just before the text. Canvas will wrap the text for you,
- If you want to break your announcement into paragraphs, then type your message in Word first, then paste it into the announcements box. For some reason this code is kind of hinky (another technical geek word), and will not accept paragraph breaks.
- You can use the page content editor to insert images into this box, but they must be sized to fit the dimensions of the box.
If I learn how to overcome the paragraph break limitation, and how to add horizontal space between the box and any wrapped text, I will update this page.

<div class="img-rounded" style="float: left; background-color: #e3f1ff; width: 360px; height: 420px; border: 1px solid black; margin: 10px;"><h3 style="color: #ffffff; background-color: #15317E; text-align: center; margin: 0px; padding: 0px;">Announcements</h3><div id="cc-homepage-announcements" style="height: 320px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;"> </div>
</div>
.