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

abc.pngannouncement.pngapple-and-book.pngarrows.pngart.pngbackpack.pngbook.pngcalendar.pngchecklist.pngcanvas.pngcheckmark.pngclipboard.pngcomputer.pngcomputer-screen.pngdiscussion.pngdirections.pngexclamation-point.pnggear.pngglobe.pnggym.pnghome.pnginfo.pngjournal.pnglibrary.pngmeal.pngmusic.pngnavigation.pngnotepad.pngnumbers.pngpaper-and-pencil.pngpresentation.pngquestion-mark.pngresources.pngscience.pngtarget.pngvideo.png

Home Page Banners 

The Home Page for this template is customizable. For a step-by-step guide in setting your front page and changing your Course Home Page, please review the following Canvas Guides:

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 "Curriculum and Home Page Banner Link" text to open up the Google Draw "make a copy" 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. You can select the text box to edit the text.
  4. 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 "Mrs.Carr's 4th Grade Course" banner "Mrs-Carrs-4th-Grade-Course" versus "Copy of Welcome Banner". 
  5. Once completed:
    • Select "File",
    • Choose "Download As",
    • And select "PNG img".
  6. 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.)

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

Home Page Banners with Customization Links

Banner Title

 Banner Image
ABCs Banner Links to an external site. ABCs-Banner.png
Back to School Banner Links to an external site. Back-to-School-Banner.png
Colored Pencils Banner Links to an external site. Colored-Pencils-Banner.png
Earth Banner Links to an external site. Earth-Banner.png

Newsletter Banners with Customization Links

Banner Title

Banner Image
Class Newsletter - Pencils Banner Links to an external site. Class-Newsletter-Pencils.png
Class Newsletter - Newspaper Banner Links to an external site. Class-Newsletter-Newspaper.png
Class Newsletter - Pencil Cup Banner Links to an external site. Class-Newsletter-Pencil-Cup.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 a "For Parents" button "For-Parents" versus "Copy of Help". 
  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

Button Title

 Button Image
Our Class Links to an external site. Our-Class.png
Subjects Links to an external site. Subjects.png
Related Arts Links to an external site. Related-Arts.png
Parent Info Links to an external site. Parent-Info.png