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

[themidiman]

In your research you might find these resources handy:

• https://community.canvaslms.com/t5/Canvas-Resource-Documents/Canvas-HTML-Editor-Allowlist/ta-p/38706...
• https://instructure.design/#index

Digging through the elements to the specific one you want to attempt to style requires a bit of knowledge about CSS specificity and perhaps even ReactJS. 

You may consider adding classes to items that would be on wrappers to style certain elements containing them using preexisting classes that come with Canvas default theme. I don't know all the ones in the default them accomplish certain styling so I end up poking around on UI elements within Canvas using browser developer tools to see which classes achieve certain effects. I borrowed some code from another institution that had figured out some things on their own. Also I support an instructor who is one of the only qualified Navajo language instructors in Arizona who is asked to teach online. Since Navajo is a dying language I often relent with her that the written language doesn't have a lot of web front-end technology love. I've had to resort to taking screenshots of documents to embed in Canvas RCE that can use the Navajo glyph fonts when it would be much more conducive to be able to type them into the RCE and render the characters there.

Here is an example of a test override CSS file contents:

@font-face {
    font-family: 'Verdana Navajo';
    src: url('https://edutechie.ws/webfonts_experiment/fonts/VERDN.eot');
    src: url('https://edutechie.ws/webfonts_experiment/fonts/VERDN.eot?#iefix') format('embedded-opentype'),
         url('https://edutechie.ws/webfonts_experiment/fonts/VERDN.woff2') format('woff2'),
         url('https://edutechie.ws/webfonts_experiment/fonts/VERDN.woff') format('woff'),
         url('https://edutechie.ws/webfonts_experiment/fonts/VERDN.ttf')  format('truetype'),
         url('https://edutechie.ws/webfonts_experiment/fonts/VERDN.svg#Verdana Navajo') format('svg');
}

.navajo {
    font-family: 'Verdana Navajo';
    font-weight: bold;
    font-size:2em;
}

Here's the HTML code I used in a page for the RCE:

<a id="start" class="Button Button--primary" href="#">Start Here</a> 
<a id="instructor" class="Button Button--primary" href="#">Your Instructor</a> 
<a id="tutorial" class="Button Button--primary" href="#">Canvas Tutorial</a> 
<a id="resources" class="Button Button--primary" href="#">Additional Resources</a>



<div class="navajo">1234567890[]!@#$%&amp;*()</div>

The Navajo font uses the number keys and other characters for certain glyphs which is why you see those in the HTML code.

The rendered page looks like this:

Good luck on your research!

[michael5]

I did a lot of manual editing of our instance without reading any documentation. I've gotten used to the Canvas architecture over the years, but I remember it was quite daunting when I just got started, but really, CSS and JS works the exact same way it would on any regular website. So you could read whatever guide/basic CSS and JS documentation you can find and it will apply to Canvas.

To answer your questions:

1. You can find the DOM ids/classes by simply right-clicking on the objects in your browser and clicking "Inspect". You can even insert changes into the page in the window that appears to test your changes live before implementing them. Uploading a new CSS file in Canvas is fairly cumbersome, so get used to using the Developer Tools that open when you click "Inspect".
2. I've never seen a list of classes in use on Canvas, but if you inspect the elements in the DOM I'd say most of them are fairly self-explanatory, so you don't really need it. You're not creating new objects or classes, you're just editing existing ones - so the risk that you're predicting is largely irrelevant.
3. You can style and edit almost anything in Canvas if you know what you're doing. But if you're new to web development, start with CSS. CSS is a markup-language and JavaScript is a programming language. The difference between the two in terms of difficulty and complexity is massive and they're two completely different tools with different purposes.

Also, I highly recommend you take the basic courses in CSS and JavaScript on Codecademy before you begin. It doesn't take that long and it will actually save you a lot of time - it is faster to learn and then do than the other way around. 😉

[EthanDeceuster]

I work on the DesignPLUS product at Cidi Labs and we use the custom CSS/JS feature in Canvas extensively.  

To answer your questions directly,

• Reference HTML objects:
  • You can find ids and classes in the Canvas UI via browser developer tools as has already been mentioned (some classes that are generated by ReactJS are long strings of random letters so those aren't helpful, but there are still plenty of places in Canvas that use static ids and classes) 
  • CSS
    • use regular HTML selectors
      • EXAMPLE: div#content a { font-size: 14pt; } /* Any link inside the div#content element on a wiki page */
        • <a href="#">This link is 14pt.</a>
    • use custom CSS classes that you create (and yes, Canvas does preserve custom CSS classes in the HTML editor on any element)
      • EXAMPLE: .dp-font-14 { font-size: 14pt; } /* Any element with class dp-font-14 */
        • <p class="dp-font-14">This text is 14pt.</p>
  • JS
    • use document.getElementById('content')
    • use jquery selectors like $('#content')
• Avoid redundancy
  • Just prefix all of your custom classes and you'll be sure to avoid redundancy.  We use "dp" at the beginning of all our ids and classes so we don't conflict with Canvas, other vendors, or any custom CSS.  Maybe you could use "jp" at the beginning of all your classes?
• What can you style?
  • Anything!  There is no limit to what you can do in an external CSS stylesheet.  Just make sure that the CSS you use is supported in the browsers that Canvas supports and meets accessibility requirements.
  • Be careful applying styles to Canvas UI elements as these ids and classes change often.  If you're building pages in the HTML editor, that content will remain constant so you can reliably apply CSS to content in your control.
  • Check out the "Allowed Style Properties" section on this article to see the CSS that is allowed to be used inline in the HTML editor.  But remember, even if it's not on this list, you can use any CSS you want in an external file.

If it would be helpful to see some of the styles you can achieve via custom CSS/JS, check out the public DesignPLUS Library course to see samples of what's been built with our tools that rely solely on custom CSS/JS files.  

And have fun with it!

[jbono]

@EthanDeceuster, do you find that using custom CSS within DesignPlus "flickers" the page? I have a template that was created by the admin, but in my course, I am using custom CSS to make some adjustments. When doing so, the template loads first, and then less than a half second (but noticeable), the custom CSS loads, so you see a noticeable flicker. 

I attached an example video of this. I have yet to find a workaround or a fix to address this.

[EthanDeceuster]

Since the CSS in your course files is dynamically appended to the page after the content has loaded, the flicker effect is expected behavior and a known downside of using the Custom CSS tool at a course level.  See the user guide for other details about this specific tool.

The only workaround to end the flicker effect is to add your custom CSS code to the CSS file in the root or sub-account Theme in Canvas.  If your CSS lives there, then it will load simultaneously with the rest of the content. 

In the future, feel free to submit questions directly to support@cidilabs.com or join our community Slack group.  Thank you!

[jbono]

Excellent, thanks! And thanks for the resources.