Problem changing login image in Canvas mobile version

[g0nicba]

I have a problem, searching in the community I found this code to be able to change the login image to that of the institution where I work.

.mobileLogin-Header {
z-index: 1;
background-image: url(https://instructure-uploads.s3.amazonaws.com/account_228140000000000001/attachments/21194/LOGO_UCC_c...) !important;
background-position: center;
background-repeat: no-repeat;
background-size: 250px 108px;
min-height: 108px;
}

It worked perfectly but the problem is that using this simple code created problems in the classrooms. They did not load images, genially for example. (we have CidiLabs installed) Could this be the problem? Has anything similar happened to anyone?

From already thank you very much!

[chriscas]

Hi @g0nicba,

I don't see how the CSS you pasted above would affect other areas of Canvas itself.  When you added that section to your existing CSS file, I wonder if you perhaps deleted another character somewhere (maybe a semicolon ending a line) or something along those lines.  It's so easy to make a small mistake with CSS/JS files...  Usually the mistakes just lead to the customizations not working, but I guess there are other possibilities too.  For that reason, many school/institution admins (like me) try to keep CSS/JS customizations to a minimum.  I actually feel like having the correct image show on the app login screen should be more of a feature request with Instructure than something admins should customize with CSS, but I know that process would not lead to a quick fix either.

I moved this topic to the Developers Group in case someone else there may see something wrong with your CSS or this approach that I have overlooked.

-Chris

[g0nicba]

Hello @chriscas 

I only added that CSS code, I was in charge of verifying that I had not added something extra or deleted something, that is why I do not understand why this happens to me, I take the advice of customizing as little as possible through the CSS and I agree with you that It would have to be an instructure option since when the canvas logo is displayed on mobile this generates confusion, it gives you the sensation of being on a free canvas page. Thank you very much for your willingness to find the answer!

[Pete5484]

I can't see a problem either! It's pretty much identical to what I'm using (and we also have Cidilabs). 

Does your browser console log show any errors?

What happens if you roll-back to the previous css?

And, I agree with @chriscas that this should be part of theme config and shouldnt require css mods! 

/***FIX CANVAS MOBILE LOGIN HEADER ***/
.mobileLogin-Header {
    z-index: 1;
    background-image: url(https://instructure-uploads-apse2.s3.ap-southeast-2.amazonaws.com/account_210940000000000001/attachments/22694/TTI-Logo-380x110.png) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px;
    min-height: 108px; 
}