Change Header Image on Mobile Login Page

[rseilham]

I worked with  @jjordan60 ‌ from our good neighbor at Valencia College to figure out how to change the header on the mobile web and mobile app login page for Canvas. Below is how you can do it yourself (NOTE: You need to be an admin with access to theme editor). 

Add the following line of code to your web CSS in the theme editor. 

.mobileLogin-Header {z-index: 1; background-image: url(https://valenciacollege.edu/images/logos/valencia-college-logo.svg) !important; background-position: center; background-repeat: no-repeat; background-size: 300px 108px; min-height: 108px;}‍‍‍‍‍‍‍‍

You will need to change the background-image element to match your school's logo, but that's it! 

The final results will look like the following. 

Disclaimer:

Custom File Risks

If you cannot use the native Theme Editor options for branding, you must be aware of the associated risks of using custom files, which may cause accessibility issues or conflicts with future Canvas updates:

• You should have advanced understanding of JavaScript and CSS and must maintain your own code.  
• Custom files may conflict with future changes to the Canvas DOM (eg: element class names or HTML structure) and are therefore not supported. Instructure disclaims any liability for any changes made to your custom override files.
• You are responsible to review web content accessibility guidelines to ensure your files meet any web accessibility testing or other compliance standards that may be required in your jurisdiction. You are responsible for making your modifications accessible to screen readers, users with text contrast and color contrast needs, and users relying on High Contrast Styles as a user feature option.
• When experimenting with custom branding, always confirm your branding changes in your institution's beta environment or test environment.

[KristinL]

Thanks for breaking down this process, Ryan! Adjusting the CSS was actually fairly simple, once I found the best image file to use. I love being able to help students using Canvas Student and faculty using Canvas Teacher at-a-glance. If a user doesn't see our logo, I know they're not at the right domain. It has made the back-to-school rush in the tech office a little easier to manage.