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. 

We recommend having your subject librarian (Dr. Bee Lehman) setting up the template for you and then editing it as you go. That said, if you'd like assistance let Bee know and they're happy to help (give them two days please). 

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.

    TOC: Change Titles

    Once Bee has placed the template for your table of contents (TOC) in your Canvas Page, changing entries is quite simple. 

    sample TOC for CanvasFor example, if you have a TOC with simple titles (e.g., "Part I," "Part II," and decide you want to changethem, take the following steps:

    1. Go to your course home page.
    2. Click on the "Edit" (empty) button.
    3. Click on the "HTML Editor" (empty) link on the upper right of the box. 
    4. Scroll through the code in the HTML Editor until you see the lines that look like (I usually use a find command to jump to the text):
      <h3>Course Modules</h3>
    5. If you want to change the titles, look for the text associated with the title you want to change. Using the example TOC, if you wanted to change "Part I" you'd look for the line of code with that phrase (once again, I usually do a find to jump to the text):
      <li><a class="kl_connected_module" href="https://bostoncollege.instructure.com/courses/1609742/modules/2157147" data-api-endpoint="https://bostoncollege.instructure.com/api/v1/courses/1609742/modules/2157147" data-api-returntype="Module"><i class="icon-standards" aria-hidden="true"> </i>Part I</a></li>
    6. To change your title, simply add text in-between the angle brackets (e.g., >Part I<) to the title you want (e.g., > Part I - The Fall of the Imperial Rule<).
      The line of code would now read <li><a class="kl_connected_module" href="https://bostoncollege.instructure.com/courses/1609742/modules/2157147" data-api-endpoint="https://bostoncollege.instructure.com/api/v1/courses/1609742/modules/2157147" data-api-returntype="Module"><i class="icon-standards" aria-hidden="true"> </i>Part I - The Fall of the Imperial Rule</a></li>
      sample TOC with titlesNote: If you use a colon (:) instead of a dash (-) in your TOC titles, anything after the colon will be hidden (coding issue).
    7. Click the "Save" in the lower right. 
    8. Check your updated TOC for accuracy.

    Let Bee know if you have any questions. 

     

    TOC: Add an Entry

    Once Bee has placed the template for your table of contents (TOC) in your Canvas Page, adding or removing entries is quite simple. 

    To add an entry, take the following steps:

    1. Go to your course home page.
    2. Click on the "Edit" (empty) button.
    3. Click on the "HTML Editor" (empty) link on the upper right of the box. 
    4. Look for the code that starts with
      <div id="kl_modules" class="kl_modules_tabbed kl_vertical_progress kl_locked">
      <ul>
      Note: The <div> HTML line tells Canvas to draw on a CSS container dictating color, shape, etc.
      The <ul> is an HTML tag telling the browser (Firefox, etc.) to begin an "unformatted list" (hence the "ul").
    5. Find the place in your TOC you want to add your entry. 
      For this example, I am adding a "Part V" to the end of my list, which means I'm scrolling to the bottom for the last entry and the tag marking the end of the list:
       <li><a class="kl_connected_module" href="https://bostoncollege.instructure.com/courses/1609742/modules/2164660" data-api-endpoint="https://bostoncollege.instructure.com/api/v1/courses/1609742/modules/2164660" data-api-returntype="Module"><i class="icon-standards" aria-hidden="true"> </i> Part IV - The Reform Era</a></li>
      </ul>
      Note: The </ul> HTML line tells Canvas to end your unformatted list. Most HTML coding opens with angle brackets (<>) and closes with angle brackets with the added slash (</>). 
    6. Copy a complete list item line (starting with <li> and ending with </li>).
      For this example, that means  <li><a class="kl_connected_module" href="https://bostoncollege.instructure.com/courses/1609742/modules/2164660" data-api-endpoint="https://bostoncollege.instructure.com/api/v1/courses/1609742/modules/2164660" data-api-returntype="Module"><i class="icon-standards" aria-hidden="true"> </i> Part IV - The Reform Era</a></li>empty
    7. Paste the copied list item in after the </li> closing the previous list item (for this example, before the </ul>).
    8. Replace the two URLs in the list item with the relevant module's URL. 
      Note: You can get the relevant module's URL by: 
      1. Look at the "Links" list on the right.
      2. Select the "Modules" dropdown list.
      3. Right click on the relevant module and "Copy URL."
      The two URLS should be identical. The first is drawing in the hyperlink and the second is pulling in the content of that module for the sublist. 
    9. Change the title wording (here "Part IV - The Reform Era") to the new module title (here "Part V - The Contemporary Era").
    10. Click the "Save" in the lower right. 
    11. Check your updated TOC for accuracy.empty

    Let Bee know if you have any questions. 

     

    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>
      <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>
      </div>
      </div>
      <p></p>
    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.
      Example:
      empty
    8. Repeat on additional pages as desired. 

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

     

    For additional help

    For additional recommendations, contact your subject liaison (Dr. Bee Lehman) at brittany.lehman@bc.edu or schedule an appointment with them.