Custom CSS and JavaScript Documentation

[jpastorek]

I am looking to utilize CSS and JavaScript to create some custom styling for a new Course Template, but I cannot seem to find any documentation on the use of custom scripts within Canvas. The only thing I can find on the guides is how to upload the files.

Does anyone know of any good documentation or at least a starting point for the actual files themselves? I am looking for information such as:

• how to reference the HTML objects in the DOM
• what classes are used already in Canvas (to avoid any redundancy)
• what kinds of things can you actually style with custom files

I would love to see some example code so I can at least get an idea of what to do. I already know how to write basic full-stack web apps, but it is frustrating that Canvas offers the use of custom code but doesn't provide any docs (at least that I can find...). I am yet to check github.

Right now I am creating Pages with the built-in html editor, but it is quite slow-going as I can't use any custom classes and certain tags get automatically removed, not to mention inline css styling per html element...

[dbrace]

Hi @jpastorek,

I am not a developer and only an admin/main technical support person for Canvas at my institution.

What I can say in general is that it can be challenging to find locations of custom CSS and JS with Canvas because: (1) even if they work, they are not officially supported and (2) if someone posted a series of examples, they (even with a disclaimer) could be expected to support (fix) it

With that said:

1. Instructure has presence on GitHub and a repository for Canvas LMS at https://github.com/instructure/canvas-lms
2. consider poking around in (and asking questions) the Canvas Developers Group in the community instead of in the main Q&A forum (I know, it can be a struggle to know where to go to)
3. make sure to regularly check everything posted at Canvas Product Releases because a small change could impact your entire Canvas (use beta to make sure that everything continues to display and work as expected)
4. while different it is still related, the API documentation could also be helpful for certain aspects
5. become friends with the inspect functionality and developer tools in your preferred web browser(s) because there are a lot of elements for the underpinnings of the LMS

I hope this information helps you out, even if only a little bit.

-Doug