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

Include mobile login in Theming options

Include mobile login in Theming options

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.

 

186529_IMG_5068.PNGIMG_5068.PNG186530_IMG_5069.PNGIMG_5069.PNG

 

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:

186531_Screen Shot 2016-06-10 at 10.37.57 AM.pngScreen Shot 2016-06-10 at 10.37.57 AM.png

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!

21 Comments
kmeeusen
Community Coach
Community Coach

Hi  @SethBattis 

First, I do see the correct school URL in both your mobile examples, albeit they are not branded, but they are clearly displayed. We teach our students that there are many instances of Canvas world-wide, and that they need to make sure they are in our school's instance. That being said, probably half the reasons for login failure are wrong instance here (the other half split between caps-lock on a public PC, and I just forgot my password).

All that being said, I do not find any similar requests (perhaps my keyword choice were bad), so will suggest that your idea open for voting during the next period.

You can learn more about the voting process at How does the voting process work for feature ideas?

KLM

SethBattis
Community Contributor

Well, if your keyword choice was bad, so was mine… I wrote it up because I couldn't find anything else!

(Truth in advertising: I can get what I want now… but I want to get it more easily and transparently!)

Thanks!

Renee_Carney
Community Team
Community Team

This idea has moved to the next stage and will be open for voting among the Canvas Community, from Wed. July 6, 2016 - Wed. October 5, 2016.

Check out this doc for additional details about how the voting process works!

canvas_admin
Community Champion

I would love for this to happen since it's not as easy to discern ids and classes for mobile as it is via a web browser. 

 @xcotto ​, I think you and your colleagues would also be interested in voting this one up.

xcotto
Community Contributor

Definitely Mark. I was getting to work the mobile app  CSS/JS. Looking forward to put my vote here Smiley Happy

here are some examples I did on Mobile for the Logo and Background :

image1.PNGimage2.PNGIMG_2655.PNG

jbrady2
Community Champion

I would think this should be possible as our institution's branded authentication screen appears on my phone in both the browser and app for me to log-in.

Screenshot_20160824-081848.png          Screenshot_20160824-083900.png

Renee_Carney
Community Team
Community Team

205525_pastedImage_6.pngWe appreciate you, and the submission of your idea. Your dialogue helps our product teams prioritize feature development. Unfortunately, this idea has been archived because it did not meet the 100-vote threshold within the 3-month voting period. Learn more at: How does the voting process work for feature ideas?

Can archived ideas still become a feature?  Potentially, yes. Archived ideas can be resubmitted by Community members. As people’s needs change, previously submitted ideas may gain additional traction. Feature ideas are evaluated as a whole and influence product direction.

Renee_Carney
Community Team
Community Team

 @SethBattis ‌

I wanted to check back on this one and see if you have been able to theme your mobile login through custom js/css in the theme editor.  This should be possible now!

Looking forward to hearing back form you!

Renee_Carney
Community Team
Community Team

This idea will remain in the open voting forum as an idea related to Priority: Canvas Teacher App.

*Being a related idea does not guarantee it is slated for development, instead it indicates that the idea is related to the overall scope and is being used to inform the process.

ronmarx
Community Contributor

Good call on this feature,  @SethBattis ‌! #canvasteacher_new

SethBattis
Community Contributor

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

Renee_Carney
Community Team
Community Team

 @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
Community Team
Community Team

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

sonia_molina
Community Member

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
Community Team
Community Team

 @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
Community Coach
Community Coach

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
Community Member

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
Community Coach
Community Coach

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. 

285092_pastedImage_1.png

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
Community Member

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
Community Team
Community Team

 @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!