Create an Announcements Box on your Course Home Page

on Jun 3, 2015
Latest reply on Feb 2, 2017 by Kelley L. Meeusen

Like • Show 36 Likes36
Comment • 72

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.

<h3 style="color: #ffffff; background-color: #2a4e57; text-align: center; margin: 0px; padding: 0px;">Announcements</h3>

</div>

Outcomes

72 Replies

bowmanr@uah.edu Jun 4, 2015 6:40 AM
Kelley L. Meeusen
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.
2 people found this helpful
Like • Show 2 Likes2
Actions
bowmanr@uah.edu Jun 4, 2015 7:22 AM
Kelley L. Meeusen
To make this even more interesting/useful or whatever, I just added in the functionality of the Overflow Table: code-snippet by Gerol 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.
3 people found this helpful
Like • Show 8 Likes8
Actions
- Kelley L. Meeusen @ bowmanr@uah.edu on Jun 4, 2015 1:19 PM
  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.
  
  Thanks!
  1 person found this helpful
  Like • Show 2 Likes2
  Actions
Cynthia Franklin Jun 4, 2015 8:24 AM
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.
4 people found this helpful
Like • Show 6 Likes6
Actions
- Thomas Freeman @ Cynthia Franklin on Jun 4, 2015 9:34 AM
  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.
  1 person found this helpful
  Like • Show 1 Like1
  Actions
G.Petruzella@mcla.edu Jun 4, 2015 8:30 AM
Kelley L. Meeusen and Ron Bowman, for a widget that populates automatically from your course Announcements, you might want to check out Emily Frank's code over here. :-)
5 people found this helpful
Like • Show 9 Likes9
Actions
- Kelley L. Meeusen @ G.Petruzella@mcla.edu on Jun 4, 2015 1:20 PM
  Gerol:
  
  You just keep on giving!
  
  I have already stolen so much for you and now you offer even more!
  2 people found this helpful
  Like • Show 4 Likes4
  Actions
  - G.Petruzella@mcla.edu @ Kelley L. Meeusen on Jun 4, 2015 2:32 PM
    Kelley L. Meeusen, that's just how we roll in the Canvas community.
    3 people found this helpful
    Like • Show 4 Likes4
    Actions
    - Kelley L. Meeusen @ G.Petruzella@mcla.edu on Jun 4, 2015 3:24 PM
      Yep!
      
      So when I get my HTML Resources course done enough to publish (something like this is never finally done), I will move a copy to the Canvas Commons so everybody can steal from it as I have stolen from them:)
      1 person found this helpful
      Like • Show 7 Likes7
      Actions
      - bowmanr@uah.edu @ Kelley L. Meeusen on Jun 4, 2015 4:26 PM
        Kelley L. Meeusen
        Yes Kelley, do that. I will sit back and let you do all the work so I can plunder.
        Actually I will be playing around with some of the information in all the postings and trying to get some good solid ideas working. Only problem I have is the time issue.
        1 person found this helpful
        Like • Show 1 Like1
        Actions
scottd@instructure.com Jun 4, 2015 9:25 AM
Hi All,

If this is of interest to you and you haven't already voted, you might want to check out Announcements page as course home page

Cheers,
Scott
1 person found this helpful
Like • Show 3 Likes3
Actions
- Josh Blumberg @ scottd@instructure.com on Jun 4, 2015 9:39 AM
  Scott,
  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.
  8 people found this helpful
  Like • Show 10 Likes10
  Actions
  - Michelle Lattke @ Josh Blumberg on Jun 12, 2015 8:07 AM
    Josh Blumberg, this is awesome! A simple and elegant solution to alert students to check announcements. Any chance you'd be willing to share the js code that made this happen?
    1 person found this helpful
    Like • Show 1 Like1
    Actions
    - Josh Blumberg @ Michelle Lattke on Jun 13, 2015 3:16 PM
      There is a link to the js code at the bottom of the article:
      https://elearning.champlain.edu/announcements-canvas-homepage/
      
      Josh
      
      --
      Josh Blumberg
      Director of Production and Academic Technology, eLearning
      Champlain College
      802-383-6678
      Jblumberg@champlain.edu
      http://elearning.champlain.edu
      2 people found this helpful
      Like • Show 2 Likes2
      Actions
      - Michelle Lattke @ Josh Blumberg on Jun 13, 2015 8:38 PM
        Hey Josh! Thanks for your reply! I had actually already grabbed that code for the announcements widget which is *super* cool, but what I was looking for was the code that you used to make the nifty circle indicator next to the announcements tab in the left navigation that you showed in your image. I checked the link again in case I missed that info there somewhere, but I didn't see it on that page.
        
        =)
        Michelle
        1 person found this helpful
        Like • Show 1 Like1
        Actions
        Josh Blumberg @ Michelle Lattke on Jun 14, 2015 5:19 AM
        I got the code from someone else (New England Institute of Technology) so I
        don't want to share it without permission. If you know JavaScript it is
        fairly straightforward with a single call to the API.
        
        I think Instructure is going to do something about announcement
        notifications. both solutions have been shared with them.
        
        Josh
        3 people found this helpful
        Like • Show 3 Likes3
        Actions
        Michelle Lattke @ Josh Blumberg on Jun 14, 2015 7:43 PM
        Gotcha! I guess I'll have to be patient then or find some quiet time to write some code. ;-)
        Thanks for the idea. It's a good one!
        3 people found this helpful
        Like • Show 2 Likes2
        Actions
        Neal Shebeck @ Michelle Lattke on Oct 20, 2016 10:53 AM
        The feature request to add that is almost closing and only has 37 votes!
        
        Course Navigation Indicator for Unread Announcements
        2 people found this helpful
        Like • Show 1 Like1
        Actions
- bowmanr@uah.edu @ scottd@instructure.com on Jun 4, 2015 4:30 PM
  Scott Dennis
  Thanks for the link. I think I had already voted for that feature. I think it would be great to have the front page be available for any of the content. I do not plan on having the announcements as the front page. I prefer to have my content showing up as the home page with any important announcements on that page.
  1 person found this helpful
  Like • Show 2 Likes2
  Actions
Josh Blumberg Jun 4, 2015 9:34 AM
Kelley,

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.
4 people found this helpful
Like • Show 5 Likes5
Actions
- Lane Worrall @ Josh Blumberg on Jun 22, 2016 8:07 PM
  Hi Josh,
  Thanks so much for sharing your instructions for this customization! Back in September I was able to get it working (with the modifications to our global JS file), but at some point since then it stopped pulling the announcements onto the page with the html snippet.
  
  I'm not necessarily looking for troubleshooting help, but I was just wondering if you're still using it or if you've modified it since your original post? If the latter, would you be willing to share any updates you've made to the javascript code (either here or privately?).
  
  Thanks either way!
  3 people found this helpful
  Like • Show 4 Likes4
  Actions
  - Josh Blumberg @ Lane Worrall on Jun 23, 2016 10:19 AM
    Lane,
    
    I haven't been using it myself recently. I wrote it based on the RSS feed for the announcements... It really should be rewritten to be based on the API calls to retrieve the announcements.
    
    I am coming to InstructureCon and may well make this my project for the hack night.
    6 people found this helpful
    Like • Show 5 Likes5
    Actions
    - Lane Worrall @ Josh Blumberg on Jun 23, 2016 11:53 AM
      Perfect--thanks for the feedback Josh!
      2 people found this helpful
      Like • Show 6 Likes6
      Actions
bowmanr@uah.edu Jun 8, 2015 1:06 PM
Kelley L. Meeusen
is the line "<div id="cc-homepage-announcements" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;"> </div>"

supposed to pull out announcements made on the announcement page? If so, what else has to be done to make that happen?
Thanks,
Ron
1 person found this helpful
Like • Show 2 Likes2
Actions
- Josh Blumberg @ bowmanr@uah.edu on Jun 8, 2015 2:37 PM
  Ronald,
  
  Please read the last paragraph of my article... You need the sys-admin at your institution to add the Javascript code to your instance of Canvas. Once they do, the html snippet will work... not until then.
  2 people found this helpful
  Like • Show 2 Likes2
  Actions
  - bowmanr@uah.edu @ Josh Blumberg on Jun 9, 2015 7:30 AM
    Josh Blumberg
    I did see that information. I just did not connect (for whatever reason) that the code Kelley L. Meeusen had posted was from your page. I doubt I will get the admins to buy into adding in the Javascript code, but I can hope. I like the ideas and hacks people are posting, and I am trying to learn from them.
    I like your announcement idea because I prefer to have announcements (and conversations) be localized to a specific course. I do not mind a global area where I can see all conversations or announcements for all my courses, but when I go into a course I would prefer to see announcements or conversations specifically for that course on that course page. (I know with conversations you can filter on a particular class and announcements have the class as the leading part of the announcement)
    Ron
    2 people found this helpful
    Like • Show 2 Likes2
    Actions
- Kelley L. Meeusen @ bowmanr@uah.edu on Jun 8, 2015 4:34 PM
  Ronald:
  
  This snippet does not call out to the Announcements area to retrieve existing announcements. Essentially, it is a text box with a scroll bar, and you add your announcements to it manually.
  
  And this simple HTML snippet works just fine without any modifications to the global script - but it is just a fancy text box.
  
  Kelley
  2 people found this helpful
  Like • Show 2 Likes2
  Actions
  - bowmanr@uah.edu @ Kelley L. Meeusen on Jun 9, 2015 7:31 AM
    Kelley L. Meeusen That is what i figured, it was just the cc-homepage-announcement part that prompted my question. I guess that part probably works if the javascript provided by Josh Blumberg is used.
    1 person found this helpful
    Like • Show 1 Like1
    Actions
  - Josh Blumberg @ Kelley L. Meeusen on Jun 9, 2015 8:50 AM
    Kelly, If you add the javascript than there is no need to manually add announcements... it will dynamically pull snippets of any course announcement in for you... it is a complete solution if you use the javascript.... You can even build it right into course templates!
    
    The javascript looks for cc-homepage-announcement and automatically inserts the snippet there.
    
    Josh
    
    p.s. The "cc" stands for Champlain College... this way we never overlap id tags with Instructure... you may want to have your web programmer modify this if you reuse the code, though it won't cause any problems.
    3 people found this helpful
    Like • Show 4 Likes4
    Actions
    - Kelley L. Meeusen @ Josh Blumberg on Jun 9, 2015 9:27 AM
      Awesome Josh!
      
      I am getting ready to play in the Global Scrip on our test instance, and your trick is the first I plan on trying - then on to KennethWare!
      
      I like this ability to adjust Canvas without screwing with the standard UI too much.
      
      I love new adventures, they keep me young!
      1 person found this helpful
      Like • Show 2 Likes2
      Actions
    - bowmanr@uah.edu @ Josh Blumberg on Jun 9, 2015 12:25 PM
      Josh Blumberg thanks for the clarification on the cc part. I was thinking in terms of email, and that if something was edited into the box that it would be CC'd to the announcements (that would be nice too if it is possible). Unfortunately, I don't think the admins are going to let me play around with this one (or at least not yet).
      1 person found this helpful
      Like • Show 1 Like1
      Actions
nicole.misemer@sdhc.k12.fl.us May 20, 2016 3:23 PM
I love this concept, but am trying to adapt this code to make it exclusively a sidebar. Any suggestions to change the above code to make it a sidebar with images and text?
4 people found this helpful
Like • Show 2 Likes2
Actions
- Kelley L. Meeusen @ nicole.misemer@sdhc.k12.fl.us on May 20, 2016 4:55 PM
  Hi nicole.misemer@sdhc.k12.fl.us
  
  I use this same hack as a sidebar all the time, and I am not a coder so I cheat.
  
  I can code enough to change the dimensions of the box, and fiddle with it until I get it right. Remember to change the length of the scroll bar appropriately.
  
  Then, I go to an unpublished blank Canvas page that I use just for this, and create the content I want to include in the sidebar, adding any graphics, formatting and header text I desire. I then switch that page to the HTML Editor and copy the code for the content I just created.
  
  I then return to the page with the sidebar, go to the HTML Editor, and paste my content code into the appropriate are of the announcement box code. Until you are familiar enough with the code to know where that is, a simple trick is to just go to the RCE and type in all caps (easy to recognize) "PLACE TEXT HERE". Then when you are in the HTML Editor you can just replace to cheat text with your content code.
  
  When adding graphics, be aware of their size, because the code for this box will not resize it. So you will find it very difficult to display a 640px wide video in a 400px wide sidebar.
  
  I hope this helps, and feel free to ask me anything you might need help with.
  
  KLM
  7 people found this helpful
  Like • Show 6 Likes6
  Actions
Sharmaine Regisford Jul 20, 2016 5:29 PM
I'd like to give a shout-out to Adrienne Phelps-Coco and Ethan Contini-Field for helping me to implement a very nifty way to display announcements through a feed widget on the homepage:
I followed 10 simple steps -- that do require going into the HTML Editor to setup an iframe:
0. Grab the feed URL for the announcements. It should end with .atom
1. Goto FeedWind at http://feed.mikle.com
2. In the spot, paste in the feed URL
3. Choose your settings. I like 1 feed height, scrollbar on, autoscroll off, text-only, max length 132 characters.
4. Grab the regular code from the right side, not the iframe code.
5. Start a new text document on your computer and paste the code.
6. Save the file as .html I call mine AFeed.html so it shows up at the top of my files list.
7. Upload the file to your Canvas course files
8. Head back to your homepage, edit and temporarily put the file onto the page (to get the file number) using the Insert file tab from the Content picker.
9. Switch to HTML editor
10. The iframe src is the .html file URL without the ?wrap=1 part:
<iframe title="Course Announcements" src="/courses/#######/files/#########/download" width="100%" height="112"></iframe>

In this example the first ####### is your course number and the second ######### is the file number. Canvas will take care of the rest. If you do not set a height, Canvas will choose 150 for you. I chose height 112 because I only wanted 1 line of the 1 feed showing. The feeds will scroll within the box. Make your height bigger if you want to include the photo thumbnails for posts with pictures.

This feed will pull from your course announcements, give it a lil bit to update. Play around with the settings until you find something you like. I ended up going for rounded borders and some color styling to match our branding.

Please Note: This feed widget is for this instance of the course only. So if/when you run the course again, you will have to update your .html file with the new URL for the new course announcements feed. If you only change your course once a year, add this update to the list of things you do to start a course. There are just 2 spots in the .html file where you need to make the change.

Voila! Announcements on the homepage for that course. I suppose you could add other feeds in there if you wanted to keep the stream fresh and updated every few days.
Good luck!
Cheers - Shar
13 people found this helpful
Like • Show 10 Likes10
Actions
- dhulsey@nmjc.edu @ Sharmaine Regisford on Jul 20, 2016 5:41 PM
  Thank you, Sharmaine!
  2 people found this helpful
  Like • Show 3 Likes3
  Actions
- anthonem@seattleu.edu @ Sharmaine Regisford on Jul 21, 2016 9:33 AM
  This is so cool Sharmaine Regisford - I've been looking for this solution! This definitely needs to go into the CanvasHacks Classroom.
  4 people found this helpful
  Like • Show 4 Likes4
  Actions
- Bill Gibson @ Sharmaine Regisford on Jul 22, 2016 9:25 AM
  Why in Step 4. did you not grab the iframe code? Does your process do something that pasting the iframe code into a Canvas page, doesn't?
  
  I used the iframe code, but did have to add an "s" to mikle URL so that it was "https://feed.mikle.com..." so that the content would display.
  
  Thanks! This is a nice RSS tool.
  
  Does the combining of multiple RSS feeds work for you? If so, this would be another way to share announcements across several sections of a course. *We do create separate courses for each section.
  7 people found this helpful
  Like • Show 5 Likes5
  Actions
  - Sharmaine Regisford @ Bill Gibson on Jul 22, 2016 9:50 AM
    Hi Bill ,
    
    I'm pleased to hear that using Feedwind's iframe code directly on the canvas page works with the https correction. I think we went with the separate iframe embed of the feed code from a separate file because we design pages for other instructors and the fewer distracting things on the page for them to interfere with the better; in the Rich Content Editor, that Feedwind iframe code shows up a big gray box with a little play icon that I'm sure would baffle instructors.
    
    I get the multiple RSS feeds, but instead of sorting the combined stream by date, it lists the first stream and then the next. The idea came up to put in the feed from our service outages (for resources like adobe connect server) but I quickly realized that feed would just be buried under the regular course feed rather than showing up in reverse chronological order. I have not done extensive testing with multiple feeds.
    
    Good luck,
    Cheers - Shar
    6 people found this helpful
    Like • Show 4 Likes4
    Actions
- Jane Mintz @ Sharmaine Regisford on Jul 28, 2016 10:21 PM
  Where and how did you grab the Canvas announcemnt RSS feed url?
  2 people found this helpful
  Like • Show 1 Like1
  Actions
  - Sharmaine Regisford @ Jane Mintz on Jul 29, 2016 9:08 AM
    Hi Jane Mintz,
    When you are in your course announcements, click on the RSS feed button next to the +Announcement button in the upper right of the page. You'll be taken to the feed page, the URL in the location bar is the RSS feed url.
    Good luck - Shar
    10 people found this helpful
    Like • Show 7 Likes7
    Actions
    - Jane Mintz @ Sharmaine Regisford on Jul 30, 2016 2:15 PM
      Perfect!
      
      Sent from my iPhone
      1 person found this helpful
      Like • Show 5 Likes5
      Actions
- Nathan Swailes @ Sharmaine Regisford on Aug 2, 2016 3:27 PM
  Hi Sharmaine Regisford ! I was wondering what browser you are using? I've been trying to get announcements on my Home Page for a while now and when I have tried a workaround like this the RSS feed never wants to display in Chrome or Firefox. Are you using a different browser or did you have to download and add-on or extension?
  5 people found this helpful
  Like • Show 4 Likes4
  Actions
  - Sharmaine Regisford @ Nathan Swailes on Aug 2, 2016 3:48 PM
    Hi Nathan Swailes,
    
    I use Firefox primarily; I have not downloaded any add-ons or extensions. I was informed that Chrome recently came out with an update that does not play well with some Canvas features. But if you've had problems before with the RSS feed, perhaps it's the feed itself.
    
    I ran into an issue where the feed was unavailable for a couple of courses and I don't know if it's because the course end date came up or what, but the feed is blank except when I access it directly from the course announcements page. I've only had that blank feed happen on a couple of courses so I don't think it's anything specific that I'm doing and it's definitely not the browser as I've looked with Chrome, Safari, and even IE.
    
    I wish I could offer more help,
    Good luck - Shar
    5 people found this helpful
    Like • Show 3 Likes3
    Actions
    - Nathan Swailes @ Sharmaine Regisford on Aug 2, 2016 4:42 PM
      Thanks for your reply and the additional information Sharmaine Regisford
      
      I have had success in seeing the feed in IE but I get that same blank feed you describe whenever I use Chrome or Firefox. Interestingly, when I use Chrome to visit the FeedWind website (the site where you insert your RSS feed link and it churns out the Javascript and iframe code for you) and I input the link to my course RSS it does generate a preview of the feed on that site. So I am assuming that for this to happen Chrome is actually capable of displaying the RSS.
      
      As you suggested, it looks increasingly likely that the browsers are not playing well together when it comes to displaying RSS feeds. (As an FYI to anyone reading this I was using the following versions Chrome 51.0.2704.103 m and Firefox 45.2.0 - so not too far behind the latest updates but I'll update and retry).
      
      If that doesn't work then I think at this point I will have to give up and keep my fingers crossed that the Canvas development team can come up with a universal widget that does something similar to your solution. It certainly seems, from the popularity of this discussion, that there are plenty of people who would have use for it.
      
      Thanks again for you help Sharmaine - much appreciated!
      - N
      5 people found this helpful
      Like • Show 5 Likes5
      Actions
    - Julia Olsen @ Sharmaine Regisford on Sep 8, 2016 2:03 PM
      I just put your feedwind solution on Canvas, running in Chrome. Works perfectly.
      3 people found this helpful
      Like • Show 2 Likes2
      Actions
- Robert Kelley @ Sharmaine Regisford on Nov 17, 2016 1:36 PM
  I wish I had read your post earlier! For those that would like, here's some additional info to help you with using Feedwind (including a video walk through of the process): Adding Announcements to the Home Page
  
  Robert
  4 people found this helpful
  Like • Show 2 Likes2
  Actions
  - Sharmaine Regisford @ Robert Kelley on Nov 17, 2016 1:42 PM
    No worries Robert Kelley, I really appreciate your write-up and video!
    
    When I wrote my write up, Feedwind still only had version 1 of their feedbox and certainly did not have a way to create an account. Now that one can keep the widget on their account, it does make the code load easier on the Canvas side since you don't have to upload a file with the attributes or paste in large gobs of code. One line and simple!
    
    Cheers - Shar
    3 people found this helpful
    Like • Show 2 Likes2
    Actions
Jan Gangel-Vasquez Jul 23, 2016 12:02 PM
Thanks. I'm just figuring out how to work in CAnvas--transitioning from years of using Moodle.
3 people found this helpful
Like • Show 4 Likes4
Actions
Nathan Swailes Aug 3, 2016 11:19 AM
Hi everyone,
After trying to find a solution that works and using some these excellent ideas for workarounds I was unable to find one that worked the way I wanted it to. I created an 'idea' to try and get the folks at Canvas to develop some kind of universal widget that would allow users to display the most recent announcement(s) (created using the announcement feature) on their homepage without having to create a rich text box and duplicate the announcement manually or have IT edit the global javascript or use RSS feed that don;t always display well/at all in browsers. My hope is that it will look the RSS feed does (as a bar or sidebar) like the workaround outlined by Sharmaine Regisford which while a fantastic idea may not work for everyone because of browser compatibility issues. It appears that there is genuine interest in a feature/widget that displays the most recent announcement(s) on a custom created home page. So, even if you have had success with these workarounds, if you are still interested in being able to display important or most recent announcements on the first page your students see when they open your course (the home page) then I encourage you to vote up this idea: Display most recent announcements on a Page
Bill , Jane Mintz, Mark Anthoney Nicole Misemer Josh Blumberg Ronald D Bowman, Emily Frank

Thanks!
NS
5 people found this helpful
Like • Show 4 Likes4
Actions
mtuten@clemson.edu Sep 8, 2016 9:09 AM
Hi all,
Just wanted to share a discovery I had with the announcement box that Kelley L. Meeusen shared. If you use the Overflow scrollbar on the announcement box (or any div for that matter), the scrolling function will not work in the mobile app. Anything not visible when you load the page will not be accessible to mobile users. It may be useful to put a dialog box with no corresponding link at the top of the announcement box that informs mobile users that they either should view this page in their browser app or scroll down below the box to see a copy of the information. This copy would also need to be in an unlinked dialog box. Dialog boxes are hidden from browser users until the corresponding link is clicked but are automatically shown in mobile.

Code for unlinked dialog box (replace content in bold):
<div class="enhanceable_content dialog" title="**Dialog Title**">
<p>**Dialog content**</p></div>
4 people found this helpful
Like • Show 1 Like1
Actions
- Sharmaine Regisford @ mtuten@clemson.edu on Sep 8, 2016 2:26 PM
  Hello Michelle,
  
  Which mobile app are you using? I'm using the Android app on my phone and I am able to scroll in divs that allow it; the scroll bar doesn't show but the content contained within can scroll with a touch and drag gesture. And in the iOS app, the scroll bar will display once I start to touch-and-drag.
  
  It's not obvious you can scroll unless you can see part of the next line of text or part of a picture that there is more to see when you scroll. Using your dialog box example, the message to mobile users could be to inform users to touch-and-drag for more content.
  
  And another option to display content only to mobile users is to use class="hidden-desktop" in the container tab (p, div, et cetera) see https://community.canvaslms.com/message/29093#comment-24572 for more on these display classes.
  
  Hope that helps,
  Cheers - Shar
  3 people found this helpful
  Like • Show 1 Like1
  Actions
  - mtuten@clemson.edu @ Sharmaine Regisford on Sep 8, 2016 3:13 PM
    I was using the Android App. Maybe the box I was working originally with was too small. Sorry for the false alarm and thanks for letting me know it works.
    3 people found this helpful
    Like • Show 1 Like1
    Actions
Julia Olsen Sep 8, 2016 2:02 PM
This is a really helpful discussion! I can't implement JavaScript in my setting, but Sharmaine Regisford's solution is perfect for my small program. Thanks much!
3 people found this helpful
Like • Show 1 Like1
Actions
Deborah Jan Sep 8, 2016 9:58 PM
This is fantastic! I just added it to my class.
2 people found this helpful
Like • Show 2 Likes2
Actions
Daniel Klosterman Oct 12, 2016 9:41 AM
Has anyone been experiencing issues with the announcements no longer appearing on their home page with this hack since the most recent update?
2 people found this helpful
Like • Show 2 Likes2
Actions
- Nathan Swailes @ Daniel Klosterman on Oct 12, 2016 9:53 AM
  Hi Daniel,
  I love the innovative workaround of this hack but I could never get it to work reliably so it does not surprise me that it may be affected by updates. I'd much prefer Canvas developers to introduce a stable widget that can be simply added to the homepage to display your announcements (or the most recent updates). I created this as an 'idea' which you might be interested in as it would result in way more stability and less reliance on an outside site and/or browser incompatibility. You can add your vote and any comments that might help advance the development of a feature like this for your needs here Display most recent announcements on a Page
  Thanks and happy Canvas-ing,
  Nathan
  3 people found this helpful
  Like • Show 1 Like1
  Actions
  - Daniel Klosterman @ Nathan Swailes on Oct 12, 2016 9:56 AM
    Voted. Thanks for starting that up.
    2 people found this helpful
    Like • Show 1 Like1
    Actions
- Sharmaine Regisford @ Daniel Klosterman on Oct 12, 2016 9:55 AM
  Hi Daniel Klosterman,
  
  I have found issues with how the URL for the feed is formed and whether it includes /course_ or /enrollment_ in the address.
  If it has /enrollment_ it works, but /course_ does not
  and I have very little idea as to what makes the difference in that URL. I looked at a few courses that were (seemingly) set up the same way and the URL was different. I thought it might have something to do with multiple sections, or start date, but could not nail down a correlation.
  
  So now I've just given up trying to figure it out, and if an instructor is lucky enough to get /enrollment_ in their feed URL, then hurrah! Otherwise, I'm waiting for the feature idea to get approved for a built in Canvas widget.
  
  Good luck,
  Cheers - Shar
  2 people found this helpful
  Like • Show 1 Like1
  Actions
  - Daniel Klosterman @ Sharmaine Regisford on Oct 12, 2016 9:58 AM
    Ok, so what we found is that Admins in our account, such as myself, have problems viewing the announcements via the hack. However, students and faculty are not having this problem. They see it fine apparently.
    3 people found this helpful
    Like • Show 1 Like1
    Actions
    - Kelley L. Meeusen @ Daniel Klosterman on Oct 12, 2016 10:40 AM
      Daniel:
      
      I'm an admin and see all of mine just fine!?! I have them in many courses.
      
      KLM
      2 people found this helpful
      Like • Show 0 Likes0
      Actions
- Kelley L. Meeusen @ Daniel Klosterman on Oct 12, 2016 10:11 AM
  Daniel:
  
  I am in my second year of moving this via course copy from term section to term section without a single problem.
  
  KLM
  2 people found this helpful
  Like • Show 0 Likes0
  Actions
Stefanie Sanders Oct 20, 2016 8:47 AM
Tangentially related, I just saw Laura Gibbs's tweet about using Blogger to embed an announcements feed on a Canvas page. The description and instructions are here: OU Digital Teaching: Blogger Announcements as Canvas Homepage
3 people found this helpful
Like • Show 4 Likes4
Actions
Jeneen Hill Nov 2, 2016 12:34 PM
I am following Shar's instructions, I have not used code much- so need a little help. Your example code has iframe, and the code I had generated does not have the iframe code. Do I need it to be iframe?
Also- could you explain this part of the directions?
The iframe src is the .html file URL without the ?wrap=1 part:
Thanks!
Like • Show 0 Likes0
Actions
- Sharmaine Regisford @ Jeneen Hill on Nov 2, 2016 12:53 PM
  Hi Jeneen,
  
  To insert the feed box you will need to use an iframe insert. You can either use the iframe code generated from feed.mikle.com (as per Bill Gibson's notes) or create your own iframe insert following the steps I listed to create your standalone html file with the code.
  
  8. Head back to your homepage, edit and temporarily put the file onto the page (to get the file number) using the Insert file tab from the Content picker.
  9. Switch to HTML editor, the inserted file will have src like /courses/#######/files/#########/download?wrap=1
  10. The iframe src is the .html file URL without the ?wrap=1 part:
  <iframe title="Course Announcements" src="/courses/#######/files/#########/download" width="100%" height="112"></iframe>
  You can copy and paste the code shown in the line above, and replace that src="<filestuff>" with your file information and REMOVE the ?wrap=1 from the end.
  
  Hope that helps,
  Cheers - Shar
  2 people found this helpful
  Like • Show 1 Like1
  Actions
JAMES SHELDON Jan 28, 2017 8:09 PM
This comment is not about "the box" but "the need for the box".

My particular college is "having a discussion" about the perceived, whether it is correct or not has yet to be determined, "swamping of the students" by "excessive e-mails". This has been started by a nearby University and does not necessarily apply to our students, but there is "discussion" and I quite imagine that the college will "do something".

The "suggested fix" is that, in some way, there should be a "central portal" ....through which all "mass? " emails, except for those to "individual students", would be funneled.

If this is implemented then I would imagine one of two, or three or four, whatever, things might happen:

a) that the "e-mail to the student that an announcement has been posted" will go in the hopper and might be lost.

b) or, the college might decide to disable the "email to the student that an announcement has been posted" function in Canvas itself.

IF the college chooses to disable the "announcement e-mail" function then THIS ANNOUNCEMENT BOX WILL ASSUME GREATER IMPORTANCE.

I have the box enabled on my instructor page and have been fiddling with it.

IN ORDER TO ATTRACT THE ATTENTION OF THE STUDENT TO THE BOX:

The background colour of the box may be changed by invoking edit/HTMLeditor/

The very first line:
code:
<div class="img-rounded" style="float: right; background-color: #800000; width: 315px; height: 260px; border: 1px solid black; margin: 10px;">
break code
Using a browser search engine ---- search for something similar to this: " HTML colors" without the quotes.

There are a variety of such sites, pick one which displays various colours which are applicable, one can also use the link provided below.

It is suggested that one choose a relatively light colour such as #a6f7f3 which will produce a pale blue.

Then the next time use another colour such as pale pink.

To ease use, it is suggested that the instructor make a "collection" of the HTML colors in a text document, with the appropriate names, so that one does not need to navigate to the web page all the time. Merely copy and paste from the document.

In the above line of HTML select and delete #800000 and replace it with the code: Xa6f7f3.

Save.

I provide a link to a very easy use site, just adjust the slider and copy the code at the top left.

http://htmlcolorcodes.com/

My compliments to the develolpers and to the commenters to the OP.

James Sheldon
3 people found this helpful
Like • Show 1 Like1
Actions
- dhulsey@nmjc.edu @ JAMES SHELDON on Jan 29, 2017 10:49 AM
  Hi, James. The people having this discussion know that students can adjust their notifications, right? That is, if a student gets too many emails, she can opt out of particular kinds of notifications or have them condensed into a daily digest.
  
  As as an instructor, I opt out of many of the notifications as well. Funneling the notifications a student chooses to receive would not be ideal because some students do appreciate some notifications. A better solution might be to educate students on how to choose what notifications they get and how, but that is simply my two cents.
  
  How do I set my Canvas notification preferences?
  4 people found this helpful
  Like • Show 3 Likes3
  Actions
  - JAMES SHELDON @ dhulsey@nmjc.edu on Jan 30, 2017 10:50 AM
    Lol
    thanks for the very germain question! I do not know, from the "blasts" that have been sent out it is a lot of people "with concerns". The University does not use Canvas they use that "other one".
    I, personally, do not send out that many e-mails and when I do they are for a very targeted reason, and, by and large, I don't think that the other teachers at my college do either. Canvas was just deployed 'in earnest" last semester and I am one of the early adopters.
    Sooo, yes the staff in online help probably "know" but, since they don't actually "have classes" i don't know if they really KNOW, for them, at this stage it may be that they know intellectually but not have a real handle on the how and why and all that.
    Findamentally, if the university sneezes the colleges get a cold, so how far this will go is beyond my pay grade.
    But, the point is that this kind of announcement will probably assume more importance nationwide, because if it is perceived as being a problem here it is probably so being in other areas.
    Or, it may be that we DO NOT have all that many going out and it is a prophylactic as it were.
    dunno, i'm just a simple guy!
    james
    2 people found this helpful
    Like • Show 2 Likes2
    Actions
- Kelley L. Meeusen @ JAMES SHELDON on Jan 30, 2017 9:52 AM
  Hi James:
  Your advice about adjusting the colors is spot-on! In fact, I have created a Style Guide in word for all the HTML hacks I routinely use, and it includes my favorite color palette.
  I have also created some standard Banners that I use - such as for professional development courses, and record their HTML snippets in my Style Guide. Very handy tool.
  
  As for the Notifications issue, I agree with Dallas E Hulsey that students need to be trained in how to set their Notification preferences. Also, there are many feature ideas open for voting to improve the Notifications feature that you might be interested in including:
  
  Notifications to remind user to submit assignment by today
  Silence Notifications for Discussions
  Email Read Notification
  Global announcements - should generate notifications , and my personal favorite
  Notifications by Course
  
  KLM
  4 people found this helpful
  Like • Show 2 Likes2
  Actions
JAMES SHELDON Jan 30, 2017 11:06 AM
Ecccctualllyyy.....this has all worked out to be somewhat like what I did in "that other IMS". I have the "formal announcement" box at the top of the page, and animated gif in the banner and the announcement box in this page below.

For those not familiar with HTML
Navigate to the Home page, click edit, click HTML Search down through the HTML code, and look for "<p> and </p> About maybe two inches or so down, maybe 20 lines, depending on your setup you will find the following.

<div class="img-rounded" style="float: left; background-color: #3b6cee; width: 800px; height: 100px; border: 1px solid black; margin: 10px;">
<h3 style="color: #ffffff; background-color: #3bee43; text-align: center; margin: 0px; padding: 0px;">Quick Announcement</h3>
<div id="cc-homepage-announcements" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;">this is merely a test</div>
</div>
I have changed the "background-color" which will change the color IN THE TEXT BOX - the text "can" be entered here but it is easier to enter it just in regular box.
The width and the height have been changed to 800px (pixels) and height 100px. This makes it wide and not so high and just below the banner box.
The next background color box is the top title box.
I changed the word "announcement" to "Quick Announcement" to differentiate from a "regular formal announcement".

It would be BEST to actually COPY all of the above code that is the original configuration into a text editor or wordprocessor, and SAVE. that way if you mess something up you can just delete all the above(with the changed stuff) and paste the original back in.

Be sure to SAVE, or it all goes away.
if anyone among the devs, or others has comments please so post.
james
3 people found this helpful
Like • Show 1 Like1
Actions
- JAMES SHELDON @ JAMES SHELDON on Jan 30, 2017 11:09 AM
  LOL I forgot to mention that this will make a "wide" and "not as tall" box instead of square.
  The box can be "moved left" , the float left, or moved right, or floated right, but not "centered".
  sorry
  james
  2 people found this helpful
  Like • Show 1 Like1
  Actions
MICHELLE CICCARIELLO Jan 31, 2017 8:03 PM
This is great! I found an older way of doing this which did not look as good or work as well: I LOVE this one! Thank-you so much for sharing!!!
2 people found this helpful
Like • Show 2 Likes2
Actions
- Kelley L. Meeusen @ MICHELLE CICCARIELLO on Feb 2, 2017 3:56 PM
  Thanks Michelle!
  
  I actually gussied up that old one, and others in this thread have included more tips for gussying it up.
  
  It works well, and I still use it despite Canvas having developed a way to display announcements on the home page. I just prefer this very flexible little box.
  
  KLM
  2 people found this helpful
  Like • Show 0 Likes0
  Actions

Create an Announcements Box on your Course Home Page

Announcements 6/3/15

Outcomes

Related Content

Recommended Content

Incoming Links