History Faculty

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

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

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!

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" () button.
3. Click on the "HTML Editor" () link on the upper right of the box. 
4. Copy 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:
   
8. Repeat on additional pages as desired. 

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

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. 

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="https://bpldcassets.blob.core.windows.net/derivatives/images/commonwealth:bc389312g/image_access_800.jpg" 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>
    <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>
</div>

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

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="https://www.bc.edu/content/bc-web/schools/mcas/departments/history/people/faculty-directory/name/_jcr_content/profileImage.img.png" 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="mailto:email@bc.edu" target="_blank" rel="noopener">email@bc.edu</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>
</div>

5. 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. 
6. Click "Save."

Let me know if there are hiccups.