Change Header Image on Mobile Login Page

Discussion created by Ryan.Seilhamer@ucf.edu Champion on Aug 3, 2018
Latest reply on Aug 23, 2018 by Kristin Lundstrum

I worked with James Jordan 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. 




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: