cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
rseilham
Community Coach
Community Coach

Change Header Image on Mobile Login Page

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:

1 Reply
KristinL
Community Team
Community Team

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. Smiley Happy