Exercise 9: Announcement Box on Home Page

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;">&nbsp;</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 Links to an external site.
• 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.

 

 

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.
  
  • Below is the revised code outside of the side-bar for easier copying, for those who simply wish to use this theme.