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

Canvas themed CSS for LTI tools?

Jump to solution

Does anyone have a simple CSS stylesheet that you'd be willing to share that mimics the basic style of the Canvas UI that you use in your own in-house LTI tools?  I just need something that'll make a basic in-house LTI tool look and feel a little more like a native Canvas tool.  david_taylor lance_grigsby

1 Solution

Accepted Solutions
ag3811
Community Participant

Most of the Canvas style uses Bootstrap.  We've found that simply using Bootstrap gets us most of the way.

View solution in original post

10 Replies
jpoulos
Instructure
Instructure

Canvas LMS 
I think this is what you are asking for ^

Jesse Poulos

Partner Integrations Specialist

Instructure

John_Lowe
Community Champion

Thanks, Jesse.  Unfortunately not in this case.  That shows me what classes to use if I were doing pages and things within the existing Canvas CSS, but using the full Canvas stylesheet in an LTI frame really jacks with the formatting and page scrollling. I am really just looking for a simple stylesheet that mimics the native Canvas one for basics like font family, colors, sizes, lists, and tables. 

ag3811
Community Participant

Most of the Canvas style uses Bootstrap.  We've found that simply using Bootstrap gets us most of the way.

View solution in original post

bro16111
Community Participant

One of the things I use to get the styling of Canvas is to use a Chrome extension CSS Used. This will copy the relevant CSS for a given page in Canvas

ismail_orabi
Community Participant

Try adding the $Canvas.css.common variable to your LTI config and you will get the url of the css file passed to you on launch. 

If you start using React in the future, InstructureUI provides a great library of components

I came here to say exactly this, @John_Lowe ‌.  

The nice thing about use the LTI variable method is that your LTI will consume changes to the stylesheet automagically, instead of you having to maintain a copy/fork/whatever of it.

Although pulling in the common.css file allows you to style the LTI to look similar to Canvas you will be missing all the CSS variables that are set through the theme editor. You either need to get the LTI launch to pass these through as well or hardcode a copy of them. In my testing if I didn't pull in the brand variables I found form buttons won't be the right colour and some elements (eg radio buttons lose their selection toggle) aren't very useable.

We do this by including $com.instructure.brandConfigJS.url in the launch and run a bit of JavaScript to set the styles from CANVAS_ACTIVE_BRAND_VARIABLES.

Is this the approach you are using?

matthew_buckett
Community Contributor

I just added $com.instructure.brandConfigJSON to be included in the launch and then converted to CSS serverside, to test that it worked. But the effect is the same as you pklove.

It would be helpful if Instructure would add support for $com.instructure.brandConfigCSS.url so that I didn't need todo as much work. I know they see their React UI as the way forward, but supporting this would just make people's live easier.