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
Solved! Go to Solution.
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.
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.
Is this the approach you are using?
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.