[ARCHIVED] Using CSS & JS in Theme Editor

[ann_strickland]

I feel like I have searched everywhere for an answer to what I thought was a simple question (received opposing answers from Support & CSM team). I have not been able to get a confirmed answer so I am posting my question here.

In the Theme Editor, can I upload both a CSS & JS file for two completely different things and one not affect the functionality of the other? The reason I am asking is because I am not able to test this since the JS file is for a 3rd party implementation and the functionality will only work in the production environment.

I am simply looking for confirmation that the two can co-exist happily in the same instance.

[robotcars · Accepted solution]

Hi  @ann_strickland1 ,

The contents of the CSS and JavaScript files are independent unless what's provided in them is designed to work together. So, the contents of either/both can contain things that work together, or independently.

You should have no problem placing the tool into your JavaScript if that's what the vendor docs say.

Couple of checklist items...

• Ensure they don't require you to put any API Tokens in the code.
• Hopefully the code is self contained so that it doesn't interfere with anything in the Global Scope.
• Try to put vendor code in a sub account above the courses, instead of the Global themes. Unless it's specifically designed for global use. This helps keep things smaller and faster for users, and ensure that your new feature only runs where it's designed for. For instance, one of our schools uses ReadSpeaker, this is installed at the theme for the sub account of the courses for that school, instead of our Global JavaScript.

Let me know if there's anything else I can help with.

cc: Canvas Developers‌

[ann_strickland]

Hi carroll-ccsd, 

Thanks so much for your response. This is incredibly helpful since I could not find this information in any of the Theme Editor files. Thanks for the checklist as well. It is a self contained code, does not contain API Tokens in the code, and it is for global use. 

Usually, I am able to test these types of things but this one I could not and since it is global I wanted to be extra cautious.