[Mobile - Canvas Student] Include mobile login in Theming options

[SethBattis]

Right now, if a user logs in to our Canvas instance on a mobile device, they have no way of knowing which Canvas instance they are logging in to. This is true of both mobile browser (left) and mobile app (right) logins.

While it is certainly possible to generate CSS that will style this login (this, for example) to match institutional branding, the trend towards more admin-friendly theming would be welcome here.

As there are numerous instances of Canvas in the wild -- I gather Instructure has been fairly successful in garnering institutional adoption -- and our students often have logins in several instances, some confirmation as to which instance they are logging into in the moment is really helpful. In fact, it supports our support team in sorting out user errors if we're able to ask "well, was the login where your username wasn't working blue with a lion on it?"

It would be really keen if the general login options could just be scaled to match the mobile login screen, perhaps thusly:

Note that all the magic I did to create this login page is toggle device mode in the Chrome Developer panel and roughly scale and center the desktop login. Seems like all the info necessary to create a branded mobile login is already in the Theme system. Please use it!

[SethBattis]

 @Renee_Carney ‌ Just saw this — it's how I've been doing it since theming started!

[Renee_Carney]

 @SethBattis ‌

Have you had a chance to check out the changes to the mobile login page in the Canvas Beta Release Notes (2017-08-14)?  Is it getting closer?

[Renee_Carney]

The changes to the mobile login page are headed to production soon!  https://community.canvaslms.com/docs/DOC-12064 

[sonia_molina]

Hi there.

I've been struggling on how to change the mobile login logo. But I had no luck... The problem here is that I don't know which css classes or ids are behind the code of the Web mobile login. 

 @SethBattis ‌ I went to your Git solution. Can you give me a clue on how did you change this logo? I'm breaking my head on how to change it. No css seems to work, and nothing at all...

Please, if someone knows how to personalize the login logo, I would be so grateful.

At least, it would be interesting to know the Web mobile login URL... How to get it so we can inspect code and modify it with CSS Renee?

Thanks!

[Renee_Carney]

 @sonia_molina  

There is a great group of people in the Canvas Mobile Users Group‌ that might be able to help you out!  I'll specifically ping  @rseilham ‌ &  @KristinL ‌, and we'll see if they can help!

[rseilham]

Hi  @sonia_molina ‌,

It's possible to stylize the mobile login page, but you must do this through the web css (since it's technically a web page) and no the mobile CSS. Check out the following and let me know if this helps you out. 

https://community.canvaslms.com/message/111036-change-header-image-on-mobile-login-page 

Hope this helps! 

[sonia_molina]

Hi  @rseilham ‌,

Maybe I'm doing something wrong... I upload a CSS for the mobile app... but it's not working yet. And I copied exactly the same example... but it didn't work. I don't know what is not working at all...

[rseilham]

Hi  @sonia_molina ‌,

You want to make sure you are uploading the CSS file, NOT the Mobile app CSS file. This style is part of the web and not the app. 

I suggest you create a simple CSS file with just the following lines of code to see that it works, and then adjust from there. 

.mobileLogin-Header {
     z-index: 1;
     background-image: url(https://www.ucf.edu/brand/files/2016/07/UCF-tab-NoBleed_vert-KG-7406.png) !important;
     background-position: center;
     background-repeat: no-repeat;
     background-size: 150px 202px;
     min-height: 202px;
}
.touch {
     background-color: #231f20
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

You will want to adjust the image on line 3 and the sizes on line 6 and 7 to match your logo. You can adjust the background color on line 9 if you need to. 

Hope this helps.

[sonia_molina]

Hi Ryan.

I found just yesterday that the place I had to upload it was the regular CSS or Javascript file, NOT the mobile one!!! (as you mention). For me was a really big problem to end up with that solution, as it's specified nowhere. I suggest the Canvas Community to write down that specifically, as it's not obvious... I was uploading it at Canvas app styles and Javascript, as it was supposed to be...

Thank you very much for your help!

[Renee_Carney]

 @sonia_molina  Is there a specific guide you expected to see it in?  Please let me know and we'll pass the information on to the docs team!