Homepage Banner Template

For additional assistance on how to modify and add the Homepage Banner to your course, navigate to the Modifying the Homepage Banner Template section below.

Below are the steps for how to modify the Homepage Banner template asset we have provided and add it to your course:

1. Click on the Homepage Banner Template asset. This will open a Google Drawings Copy Document page. Click Make a copy.
2. Within Google Drawings, you can add/replace images or edit the text as desired. 
3. Rename the file by selecting File > Rename.
   • 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 file "Homepage Banner" versus "Copy of Homepage Banner".
4. Once all edits are made, select File > Download > PNG image (.png).
   • Note: JPG and SVG files are also supported
5. Navigate to your Canvas course, and click on Files from your course navigation pane.
6. Click Upload and choose the image file that was downloaded.

Below are the steps for how to add the button to your Homepage: 

1. From the course navigation, click Home to navigate to your Homepage, then click Edit.
2. From the Rich Content Editor, click on the downward facing arrow next to the Images icon and select Course Images. 
3. Select the image from the right-side menu.
4. Click Save. 

For additional guidance, watch the Adding Buttons to the Course Homepage in Canvas video (5:40). 

Syllabus
This button is linked to a Page pre-loaded with Texas A&M’s minimum syllabus requirements that is designed as a guide to help with the heavy work of creating a syllabus. Use this Page to fill in the blanks provided with the course information. 

Office Hours
This button is linked to a Page pre-loaded with Office Hours information that serves as a place for faculty to add detailed information about office hours, including a place to add a Zoom link or office location. 

University Resources
This button is linked to a Page with links to helpful university support resources for students.  This includes links to contact information for academic resources, such as the Library, University Writing Center, and also Technology and Campus Resources.

Canvas Resources
This button is linked to a Page with important Canvas resources for students, such as tutorials to help students with getting started in Canvas, Canvas tools, and links to Canvas support.  

Mental Health
This button is linked to a Page with links to mental health resources available to all students at Texas A&M University, including a QR code to download the MySSP app for 24/7 access to care.

Note: Do not delete the folder titled 23 SPRING TEMPLATE ASSETS (DO NOT DELETE) located within the Files section of your course. Deleting these assets will cause the image files provided to break and cause issues for students while viewing your content. 

For additional assistance on how to modify and add the assets to your course, go to the Modifying the Resource Buttons section below.
 

1_ResourceButton	2_ResourceButton	3_ResourceButton	4_ResourceButton	5_ResourceButton
6_ResourceButton	7_ResourceButton	8_ResourceButton	9_ResourceButton	10_ResourceButton
11_ResourceButton	12_ResourceButton	13_ResourceButton	14_ResourceButton	15_ResourceButton
16_ResourceButton	17_ResourceButton	18_ResourceButton	19_ResourceButton	20_ResourceButton
21_ResourceButton	22_ResourceButton	23_ResourceButton	24_ResourceButton	25_ResourceButton
26_ResourceButton	27_ResourceButton	28_ResourceButton	29_ResourceButton	30_ResourceButton

Below are the steps for how to modify the Student Resource Button template assets we have provided and add it to your course:

1. Click on the Student Resource Button asset (linked in the above section). This will open a Google Drawings Copy Document page. Click Make a copy.
2. Within Google Drawings, you can add/replace images or edit the text as desired. 
3. Rename the file by selecting File > Rename.
   • 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 file "Course Resources" versus "Copy of Resource Button".
4. Once all edits are made, select File > Download > PNG image (.png).
   • Note: JPG and SVG files are also supported
5. Navigate to your Canvas course, and click on Files from your course navigation pane.
6. Click Upload and choose the image file that was downloaded.

Below are the steps for how to add the Student Resource Buttons to your Homepage: 

1. From the course navigation, click Home to navigate to your Homepage, then click Edit.
2. From the Rich Content Editor, click on the downward facing arrow next to the Images icon and select Course Images. 
3. Select the image from the right-side menu.
4. Click Save. 

Below are the steps for how to link a Student Resource Button to a resource: 

1. From the course navigation, click Home to navigate to your Homepage, then click Edit.
2. From the Rich Content Editor, select the newly created button and click the downward facing arrow next to the Links icon. 
3. Select one of the following: 
   • External links: This will hyperlink the button to an external URL
   • Course links: This will hyperlink the button to a course content item.
4. Locate the course link or paste the external link, then click Save. 

For additional guidance, watch the Adding Buttons to the Course Homepage in Canvas video (5:40). 

By default, these buttons no longer included by default in every template. If you choose to use these buttons, you can easily upload them into your course shell and create hyperlinks to the buttons using the tools in the Rich Content Editor in Canvas. 

For additional assistance on how to modify and add the assets to your course, go to the Modifying the Navigation Buttons section below. If your course is organized using another structure such as Chapters or Units, we recommend creating modified versions of the Module navigation buttons using the Blank Button Template. 
 

Grey Button Blank	Yellow Button Blank	Maroon Button Blank	Black Button Blank	Blue Button Blank
Grey Week Set	Yellow Week Set	Maroon Week Set	Black Week Set	Blue Week Set
Grey Module Set	Yellow Module Set	Maroon Module Set	Black Module Set	Blue Module Set

Below are the steps for how to modify the Navigation Button template assets we have provided and add it to your course:

1. Click on the Navigation Button asset (linked in the above section). This will open a Google Drawings Copy Document page. Click Make a copy.
2. Within Google Drawings, you can add/replace images or edit the text as desired. 
3. Rename the file by selecting File > Rename.
   • 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 file "Week 1 Button" versus "Copy of Week 1 Button".
4. Once all edits are made, select File > Download > PNG image (.png).
   • Note: JPG and SVG files are also supported
5. Navigate to your Canvas course, and click on Files from your course navigation pane.
6. Click Upload and choose the image file that was downloaded.

Below are the steps for how to add the Navigation Buttons to your Homepage: 

1. From the course navigation, click Home to navigate to your Homepage, then click Edit.
2. From the Rich Content Editor, click on the downward facing arrow next to the Images icon and select Course Images. 
3. Select the image from the right-side menu.
4. Click Save. 

Below are the steps for how to link a Navigation Button to content: 

1. From the course navigation, click Home to navigate to your Homepage, then click Edit.
2. From the Rich Content Editor, select the newly created button and click the downward facing arrow next to the Links icon. 
3. Select one of the following: 
   • External links: This will hyperlink the button to an external URL
   • Course links: This will hyperlink the button to a course content item.
4. Locate the course link or paste the external link, then click Save. 

For additional guidance, watch the Adding Buttons to the Course Homepage in Canvas video (5:40). 
 

The Canvas Student and Canvas Teacher app each have a Dark Mode setting. Due to the Texas A&M Canvas style guide, some buttons and features are difficult to use when in Dark Mode. Below are the best practices to optimize the Dark Mode for users.

• Ensure that the chosen colors for each course provide high contrast. Users can adjust the color for each course if necessary.
• Change the dashboard to High Contrast UI on a computer. This can help eliminate some of the issues encountered in Dark Mode.
• Instructors may find it easier to review Quiz results in Light Mode rather than Dark Mode.
• Some course content, such as pages that rely heavily on the TAMU template, may need to be temporarily viewed in Light Mode.