Announcement box in Canvas

Did you know??

Portland sartorial poke yuccie, echo park chillwave blue bottle pitchfork heirloom try-hard microdosing enamel pin crucifix deep v pok pok blog. Ramps retro occupy cloud bread.

Four loko literally helvetica cardigan. Thundercats fixie brunch hell of gastropub microdosing four loko. Portland mumblecore poke, fixie lomo fashion axe yuccie schlitz irony tilde bicycle rights try-hard literally shabby chic. Photo booth blue bottle cloud bread, artisan copper mug portland gochujang everyday carry tumeric humblebrag.

You can create a custom announcement or "Did you know??" box on any page in your Canvas course by using some simple HTML code. More or less, it might look similar to the interaction you see to the right (it looks much better in Canvas). ➠

These interactions are very easy to create and edit in Canvas, and the benefit is that with the vertical scrolling capability, you can create an informative hotspot on your page that doesn’t take up too much real estate or distract from the main content you are presenting. You can view a live example of this code on my demo Canvas page.

Let’s dive into the code and start exploring how to do this.

The HTML Code

To begin, simply copy and paste this code onto your Canvas page (or announcement, assignment, quiz, discussion post, etc.):

<div class="img-rounded border border-trbl border-round" style="float: right; background-color: #f0f4f3; width: 315px; height: 260px; margin-left: 50px; border: 1px solid #E8E8E0;">
    <h3 style="color: #ffffff; background-color: #607f7e; text-align: center; padding: 5px;">Did you know??</h3>
    <div style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px 15px; text-align: left;">
        <p>Portland sartorial poke yuccie, echo park chillwave blue bottle pitchfork heirloom try-hard microdosing enamel pin crucifix deep v pok pok blog. Ramps retro occupy cloud bread.</p>
        <p>Four loko literally helvetica cardigan. Thundercats fixie brunch hell of gastropub microdosing four loko. Portland mumblecore poke, fixie lomo fashion axe yuccie schlitz irony tilde bicycle rights try-hard literally shabby chic.</p>
        <p><img id="127461336" src="/courses/2560052/files/127461336/preview" alt="baby panda.jpg" data-api-endpoint="https://canvas.instructure.com/api/v1/courses/2560052/files/127461336" data-api-returntype="File" /></p>
    </div>
</div>

First thing you will want to do is replace the heading <h3> with your own, as well as the two paragraphs and the image. Once you have your own content in there, let’s take a look at which elements you can customize.

Anatomy of the code

I know that’s a jumbled mess of explanation, but start by copying and pasting the code into a sandbox and simply change one element at a time. Try playing around with the color schemes and change the font and background colors.

For an in-depth tutorial on creating color schemes in your Canvas course, refer to my dedicated video.

Try altering the width and height, or the padding properties. Have some fun and explore the options.

---

Please consider subscribing to our YouTube channel for more Canvas tips and tricks. It is so easy and so free. The only thing you have to do is click this link: http://bit.ly/how2canvas

And follow us on social media

Twitter: https://twitter.com/HowToCanvas

Instagram: https://www.instagram.com/HowToCanvas

Facebook: https://www.facebook.com/HowToCanvas