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.
This discussion post is outdated and has been archived. Please use the Community question forums and official documentation for the most current and accurate information.