Template: Icons, Banners, & Buttons Customization Options

Template Icons

This template is pre-loaded with a selection of course icon images. The icons are available via the Course Files. These icons can be added anywhere you have the Rich Content Editor (RCE). For more information on adding an image to a Canvas page via the Rich Content Editor, please review the following: Canvas Guide - How do I insert course images into the Rich Content Editor using the Content Selector? Links to an external site.

Icon Catalog

award.pngbook.pngbookmark.pngcalendar.pngcheck-mark.pngchecklist.pngcircle-arrow.pngclock.pngcomputer.pngdirections.pngexclamation-point.pngflag.pnggear.pngglobe.pngkey.pnglightbulb.pngmagnifying-glass.pngpaper.pngpencil.pngperson.pngpuzzle.pngquestion-mark.pngspaceship.pngspeech-bubble.pngstar.png

Home Page Banners 

This template is pre-loaded with 3 Home Page banners. You can change your course banner by completing the following steps:

  1. From the Home Page, select "Edit"
  2. Click on the current course banner image
  3. Select the "Embed Image" icon from the menu directly above the banner
    • Select "Canvas"
    • Select "Course files"
    • Select "images"
    • Select "home-page-images"
    • Scroll until you see the banner you'd like to use and click on it once
    • Add the Alt text to describe the image (for example, ART 1000 Home Page Banner)
    • Select "Update"
  4. Select "Save" on the page 

Advanced Step

You can also adjust the scaling of the course banner by adding a width percentage using the HTML Editor. This is helpful for mobile design as it allows the course banner to scale as the page size changes. To do so, please complete the following:

  1. From the Home Page, select "Edit"
  2. Select "HTML Editor"
  3. Scroll to the top of the HTML page
  4. After the text that includes your home page banner Alt tag, add the following text (including quotations): "width=100%"
  5. Select "Save"

Here is a screen-shot demonstrating the "width=100%" text included within step #4:

Width HTML Screenshot

Customize Your Home Page Banner

If you'd like to change the images within the banners themselves, you can do the following:

  1. From the table below, select the theme text to open up the Google Draw "Copy Document" page and choose "Make a copy".
  2. Within Google Draw, you can replace the images by clicking on the original image and then choosing from the options within the "Replace Image" drop-down box.
  3. Rename your new banner by either double-clicking on the image title located at the top left of the Google Draw screen or by selecting File > Rename.
    • Please Note: This image title will be a part of the default Alt tag so it is important to name the banner to correspond with the course subject matter/theme. For example, you would name a "LIT 2000: Introduction to Literature" banner "LIT-2000-Introduction-to-Literature" versus "Copy of Science Banner". 
  4. Once completed:
    • Select "File",
    • Choose "Download As", and
    • Select "PNG img".
  5. Finally, upload the banner into your Course Files and replace the current Home Page banner with your customized version. For assistance in inserting course images, please review the following Canvas Guide: How do I insert course images into the Rich Content Editor using the Content Selector? (Links to an external site.)

Tip: See the Advanced Step section above to learn how to adjust the scaling of your customized banner.

Home Page Banners with Customization Links

Theme

Select The Theme Text To Customize

 Banner Image
General Education Banner Links to an external site. general-education-banner.png
Books Banner Links to an external site. books-banner.png
Science Banner Links to an external site. science-banner.png

Home Page Buttons

If you'd like to edit the buttons, you can do the following:

  1. From the table below, select the theme text to open up the Google Draw "make a copy" page and choose "Make a copy".
  2. Within Google Draw, you can add/replace images by clicking on the original image and then choose from the options within the "Replace Image" drop-down box.
  3. You can also edit the text as desired.
  4. Rename your new button by either double-clicking on the image title located at the top left of the Google Draw screen or by selecting File > Rename.
    • Please Note: This image title will be a part of the default Alt tag so it is important to name the button to correspond with the intended destination/hyperlink. For example, you would name an "About Your Professor" button "About-Your-Professor" versus "Copy of About Your Professor". 
  5. Once completed:
    • Select "File",
    • Choose "Download As",
    • And select "PNG img".
  6. Upload the button into your Course Files and replace the current button with your customized version. For assistance in inserting course images, please review the following Canvas Guide: How do I insert course images into the Rich Content Editor using the Content Selector? Links to an external site.
  7. On the Home Page, select the customized button and choose from the various options on the right-side menu to hyperlink your button to its destination (ex. Canvas Resources page). 
  8. Select Save.

Home Page Buttons with Customization Links

Theme

Select The Theme Text To Customize

 Button Image
Class Announcements Links to an external site. class-announcements.png
Class Resources Links to an external site. class-resources.png
Post A Question Links to an external site. post-a-question.png
Learning Modules Links to an external site. learning-modules.png