Skip to Main Content
Chat With Us

History Faculty


Canvas manipulation

This is a guide for sources available for historians at Boston College targeted for professionals.

Editing your Canvas Course Sites

You have your Canvas course site and now you want to make it navigable for your students as they wade through mountains of online material. Here are a couple basic design elements CDIL has put together for your use. These elements employ some design tools--including a table of contents and progress bar--using CSS (Cascading Style Sheets) and a few lines of HTML. They are not code that we can tailor (e.g., colors, etc.) to your specific courses so much as make available as they are. Feel free to use use or decide again it. 

(The below content was created by Digital Scholarship Librarian Dr. Bee Lehman.)

What's on This Page

This page has a lot on it. You can use the following anchors (links down the page) to jump straight to a relevant box.

    Add or Update a Module TOC

    To add a module TOC to your Canvas page:

    • Go to your Home Page
    • Look at the upper, right of the screen for the rocket ship [] or press (shift+alt+d).
    • Run your cursor over the rocket ship and click on the expanded text []
    • Click on "Add Advanced Elements"
    • Check the "Add and Configure" check box
    • Recommended: Make sure you have 1 column
    • Recommended: Next to "Include Quick Links" select "All"
    • Make sure to have a blue eye (as opposed to crossed out eye) next to any module you want in the list.  
    • Save your page

    Note: Sometimes to Module list shows up on the wrong part of the page. You can go into the html coding and move the relevant coding yourself - or - contact your subject librarian to do so. It'll take Bee five minutes to move (or less). 

    Update Module Names and Organization

    • To update your module list, open Design Tools
    • Under "Module List," click "Update Module Names"
    • Check your list to make sure titles and organization updated
    • Save your page

    Updating Front Page Module List

    Once you have your module list on your front page, you can update it by:

    • Go into the page edit screen
    • Pressing alt+shift+d (to open the design tools bar)
    • Go to "add advanced elements" and click on "module list" if it's not already open
    • Click "update module names"
    • Save your changes

    And that's it!

    Progress Bar: Add to Sub-Pages

    Want to add or edit the progress bars--provided by CDIL--in Canvas? Setting the progress bars up in your Canvas pages is straightforward. 

    Follow these steps:

    1. Go to the page (or assignment, etc.) you want to add the bar to.
    2. Click on the "Edit" (empty) button.
    3. Click on the "HTML Editor" (empty) link on the upper right of the box. 
    4. emptyCopy and past the following text into the HTML Editor box at the top:
      <div id="kl_custom_css">&nbsp;</div>
      <div id="kl_wrapper_3" class="kl_summer kl_wrapper">
      <div id="kl_banner">
      <h2><span id="kl_banner_right">Readings</span></h2>
      <div id="kl_module_navigation_block" class="">
      <h3>Module Navigation</h3>
      <p class="kl_module_progress_icons" style="display: none;">Icon Progress Bar/Navigation (built in browser, hidden in app)</p>
      <div class="kl_current_module_container"><span class="kl_current_module_name">Course Welcome</span></div>
    5. Change the "Readings" in the line <h2><span id="kl_banner_right">Readings</span></h2> to whatever text you want (I usually use the page/assignment title).
    6. Click the blue "Save" button under the editor box on the right. 
    7. Look at your page and make sure it loaded properly.
    8. Repeat on additional pages as desired. 

    Let me know if you'd like assistance or have questions. 


    Copying another Canvas page (or elements)

    To copy another Canvas page or elements thereof:

    • Click on "Settings" in the course's (desitination course) left hand navigation bar 
    • Under Settings, click on "Import Course Content" on the right hand tool bar
    • The Import page has a drop down menu for "Content Type" --> select "Copy a Canvas Course"
    • Search for the course you want to copy and select it
    • Choose to copy
      • the whole course (everything including announcements) -or-
      • specific course content 
    • Choose to "adjust events and due dates" or manually alter them (I suggest checking the dates either way) 

    Let me (Bee) know if there are any hitches. 

    Changing the Banner

    On a page (I use "Home Page"),

    1. Click the "Edit" icon. 
    2. Click the "script" ("</>") icon under the edit box. 
    3. Copy and Paste the following :

    <div style="position: relative; text-align: center; width: 100%;"><img class="kl_image_full_width" style="height: 300px; width: 100%;" role="presentation" src="" alt="banner image" />
        <div style="position: absolute; top: 50%; padding: 10px 50px 10px 20px; background-color: white; color: black;">
            <h1>Title of your Class</h1>
        <div style="position: absolute; left: 0px; padding: 10px 10px 10px 10px; background-color: black; color: white; width: 100%; text-align: left;">Class Number | Prof. Name</div>

    1. Change the highlighted yellow text to the URL for the image you want to use.
    2. Change the blue highlighted blue text to the relevant course title, number, and instructor's name. 
    3. Change the purple highlighted text to alter the background color and font color to your preference (link to page with color names). 
    4. If you want to change your image height, alter the orange text.
    5. Click "Save."

    Faculty Information Box

    If you're interested in setting up an instructor information box (figured right), here's what you can do:

    1. Go to the page you want to edit (I use "home page," which I set as my front page).
    2. Click "Edit."
    3. Switch to the HTML editor by clicking </> under the rich text edit box on the right.
    4. Paste in the following code where you want it:

          <p><span style="font-family: 'Lato Extended', Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 22px;">Instructor Information</span></p>
    <div id="kl_user_details_6214280" class="kl_user_details"><img class="kl_image_align_left kl_image_round_white_border" src="" width="150" height="225" />
        <p class="kl_user_detail" style="margin-top: 10px;"><i class="fas fa-user" aria-hidden="true"><span class="dp-icon-content" style="display: none;">&nbsp;</span></i>&nbsp;Name</p>
        <p class="kl_user_detail"><i class="fas fa-tag" aria-hidden="true"><span class="dp-icon-content" style="display: none;">&nbsp;</span></i> Title or Info</p>
        <p class="kl_user_detail"><i class="fas fa-envelope" aria-hidden="true"><span class="dp-icon-content" style="display: none;">&nbsp;</span></i> <a href="" target="_blank" rel="noopener"></a></p>
        <p class="kl_user_detail"><i class="fas fa-university" aria-hidden="true"><span class="dp-icon-content" style="display: none;">&nbsp;</span></i> Contact Information</p>
        <p class="kl_user_detail"><i class="fas fa-clock" aria-hidden="true"><span class="dp-icon-content" style="display: none;">&nbsp;</span></i> Office Hours, etc.&nbsp;</p>

    1. Replace the image URLs with the image you want to use. To do so, you can do to your faculty page, cntr+click (right click) on your profile picture, and click "copy image address." You can delete the image address above and replace it with your image's address. Feel free to use a different picture instead. 
    2. Click "Save."

    Let me know if there are hiccups.

    For Additional Help

    For additional recommendations, contact your History Liaison, Erin, at or schedule an appointment.