Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Coach
Community Coach

Create an Announcements Box on your Course Home Page

Announcements 6/3/15

This announcements box is fully editable using the Rich Content Editor.

I stole this one from the old Community, and have adapted it to also use as scrollable sidebars on any Canvas page that includes an html editor. One of the few things I do not like about Canvas is that students have to navigate to another content are to view course announcements. I would much rather have them displayed right on my Home page. I surveyed my students after I started using this trick, and they unanimously approved!

Here is the code, and if I do this right, you should see an example to the right.

<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>


72 Replies
Community Champion

 @kmeeusen ​

There is a way to move it, but it may require some one with super powers (in the answers area, you have 15 minutes).

Any way, this is a very useful code snippet.  I really like it, and I am glad you pulled it from the old community.  Since you tie it into the home page, it is probably quicker than adding an announcement.  The only downside would be that the announcement does not show up in the students announcement list.

Thanks for the question.. uh I mean post.

Community Champion

 @kmeeusen ​

To make this even more interesting/useful or whatever, I just added in the functionality of the Overflow Table: code-snippet​ by  @G_Petruzella ​ so that you can have a scroll box of announcements - if you desire to keep old ones up and do not  want to increase the size of the announcement box.

Looks like I need to spend some more time in this area of the community to find some great ideas.

Community Participant

This is a great start!   We do need a way to get Announcements more front and center in the courses.   I really encourage my students to set Notification Preferences so they can see Announcements on their phone or in their personal email account.   So, this work around only helps if students are logging in often to stay on top of things. 

It would be great if the homepage had an option to put Announcements on the top of the homepage without losing the editor and Notification functionality.

Thanks for posting this workaround.  

Community Champion

 @kmeeusen ​ and  @bowmanr ​, for a widget that populates automatically from your course Announcements, you might want to check out  @franke ​'s code over here. 🙂

Community Team
Community Team

Hi All,

If this is of interest to you and you haven't already voted, you might want to check out



Community Contributor


I put this solution together...

Here is the article for the complete instructions:

Announcements on the Canvas Homepage-Champlain College eLearning Department

You will need to modify your institutions Global Javascript file.  The instructions are at the bottom of the article along with a link to the necessary Javascript code.

Community Participant

I think the old version of this from the old community actually pulled the announcements out of the announcements tool and displayed them in that box.  Unfortunately to work it had to be deployed somehow at the institutional admin level.

Community Contributor


Larry Boughtlier has a elegant solution that we are using a modified version of...  We just use the built in notifications indicator in Canvas... Our users can't even tell we added it on....  it really seems like a no brainer.  I sent the code to our account rep.  We also use the embed on the home page in some courses.


Awesome, Ronald! I like it and will play with this myself.

I am a non-coder, but some  snippets are so easy to use, and provide for a real enhancement. This was one of my concerns with the announcements box - it did not work well for keeping a running list of all announcements during the term. Your enhancements will make this possible.