Canvas Commons branding

[julielkz]

Hi

We are trying to customize Canvas Commons, and I want to change the background color of the banner(attached see the screenshot). I made the change in global css 

.App-header {
    background-color:#121212;

}

but it does not work. Can someone help me?

[bneporadny]

Hey julielkz‌,

I'm not sure that you can change that utilizing the Canvas themes nor custom css  as Commons is an external tool. 

Brian

[julielkz]

Hey Brian,

Thanks for your reply.

Do you think we can use js to make the change?

li

[themidiman]

It would seem like you could. I get an object reference to that DOM element with the following expression and can access the style object and change it like so:

//DOM selector (plain JS)
document.querySelector('.App-header').style.backgroundColor = "red";‍‍

For some reason the jQuery css method doesn't seem to work even though I can get a valid jQuery object:

[julielkz]

Hi Jeffrey

I tested it, the code does not work. I always have difficulties to custimize UI for LTI tools, I wonder why?

thanks

li

[bneporadny]

Hi julielkz‌,

LTI tools while they look like they are inside of Canvas are actually external tools shown in the iFrame within Canvas (unless you have it pop open into a new tab) and because of that utilizing css and javascript‌ to customize them isn't going to work.