Change Header Image on Mobile Login Page

rseilham
Community Champion

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. 

284476_IMG_E6757B177FD2-1.jpeg

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: