Course based CSS and JavaScript

(11)

I think that admins or course designers should also be able to set a custom CSS file and Javascript file for each course.

These 2 files should also be attached to course content when added into Commons.

The rich content editor is frustrating as it rips out modified HTML and giving course designers access to the entire Canvas Theme is a risk. 

17 Comments
Stef_retired
Instructure Alumni
Instructure Alumni

Hi,  @david_turk , as currently written, this idea contains two separate requests: one for course-based themes, and a second for additional sub-account theming capability. Sub-account admins currently have theming capability, as long as that has been enabled at the account level, as detailed in How do I manage themes for an account? and How do I set details for an account? . You might be interested in supporting https://community.canvaslms.com/ideas/16986-theme-control-in-subaccounts" modifiedtitle="true" title....

Would you please edit the description to remove the second request so as to create a singular focus on the course request? 

Thanks.

david_turk
Community Participant

Thanks Stefanie,  edited. 

Stef_retired
Instructure Alumni
Instructure Alumni

Thanks, David! It's now open for voting.

kharris20
Community Explorer

Custom CSS and JS per-course would save me from a lot of typing and verification, resulting in a more uniform and better experience for my students in my courses.

michael_campbel
Community Member

Regarding inline styling MDN says 

Avoid using CSS in this way when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within in a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the the website.

https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured

James
Community Champion

I am in the midst of creating my own custom JavaScript to load MathJax and my own themes for styling for some Fall 2020 courses that start in less than a month. There is no way that I am going to implement this for the entire institution. You would think that I would be in favor of this proposal, but I'm not.

Every time my Canvas admin has asked me to put custom JavaScript into the global account through the theme editor, I've ripped the JavaScript apart and pointed out problems with it. This includes code she found online from a founder of Instructure that she wanted to include. There is a lot of problematic programming out there from people who know what they're doing. Giving the faculty the ability to implement it on a course level allows them to adversely affect the overall Canvas experience. One infinite loop could bring the Canvas system to a halt.

There are themes that could benefit as well. I wrote a VBA script in Excel that would take the formatting of the cells in a table, slap in a caption, and create the HTML needed to style it nicely. I then have to paste that into the HTML editor in Canvas. What I would loved to do is add a class to the table that lets it know what styling to use. That would save a lot of time developing things.

My wife just created a new instructor training bootcamp for teachers that were going online for the fall for the first time because of COVID. She went through and styled every page so the heading and text had different backgrounds. I never would have done that to the background, I would prefer to leave it on white. She spent a lot of time doing that. I injected some CSS into my browser and showed her what it could look like and how easy it was when you separate CSS from the content.

Inline styling is bad. There's no doubt about it. Canvas allows people to do it, but I want to imagine that they purposefully make it hard to do so that people don't do it.

Too many faculty have their own notions of what looks good. Unfortunately, it's not always good. I remember the time I was doing a peer review of an online course and the instructor had used text various colors in their syllabus because they wanted it to be colorful, not the boring black and white. That teacher loved pastel, so there was a lot of pastel, which failed accessibility contrast checks. It was hard on my eyes to read.

Faculty often design only for their devices. They use tables designed for a 27 inch monitor with 1920x1080 resolution and don't consider what will happen to that table on a smart phone or someone with a laptop with 1366x768 resolution.

Some faculty get it. Some are great at designing. Some are excellent JavaScript programmers. The majority are not.

What should happen is that people should come together and design styles that can be used across the account, rather than putting it in the hands of the instructor. Then you can separate style from content as you're supposed to, you make sure someone isn't going to crash the system, and you provide uniformity across courses, which is beneficial to the learner. That also keeps each instructor from loading their own JavaScript UI library and forces people to standardize on one.


JavaScript and CSS can be implemented at the subaccount level. That means that you can have variations. If you cannot get the entire institution to agree, perhaps you can get your department to agree.

I am using the subaccount trick to hold my math courses where I need MathJax even though I check to make sure there is math content on the page before I load the MathJax JS. I briefly explained what I am doing today to the other STEM teachers and mentioned mhchem to the chemistry professor. I haven't heard back whether or not they have an interest. I don't want to use MathJax, I would prefer that my content be inside Canvas natively and if I already had a lot of content there, I would leave it. I'm switching to an OER Calculus text for Calc 1 and 3 this fall and we're completely teaching online, I need to put a lot of content inside Canvas and using the equation editor to create each one of them is going to take a long time. When I'm done, I can always write a script that will download each page and convert the code into what Canvas uses for equations, but this is going to help me get up and going.

As an instructor, Canvas admin, and back-end programmer, I want theming left as it is -- at the sub-account level.

dineshkumar_tha
Community Explorer

We would like to add additional custom styles using CSS-3 parameters.. 

If we want to add a simple border-radius, we have to go with theme support... In this case, it's hard to manage dynamic border-radius values on different pages.

 

Is there any feature plan that supporting CSS-3 styles on course pages from Rich Text Editor?

JesseJohnson
Community Member

I believe Canvas will be well served to conditionally allow embedded javascript in pages. My cursory look at the code base suggests that the sanitizer is monolithic. Obviously, allowing students to post javascript is out of the question. My organization has already made multiple requests to embed javascript code on their course pages. I'd suggest a default of javascript being disabled and allowing it on a course basis from an administrator, so the administrator always knows what course pages may need review. Or it could even be a setting per page, where the person writing the page has to toggle the setting. I've seen requests on this site and elsewhere asking for this functionality and my prediction is that the need will only grow.

JesseJohnson
Community Member

My request was merged here, but I'm actually advocating for something different: inline javascript which can be enabled at the account and course level.

titaniumbones1
Community Member

While there are many security concerns with javascript, course-level CSS seems to me a somewhat less onerous ask. I do think that availability of CSS3 properties would make a big difference in the usability of long pages on the site; I'm especially thinking of layout engines.  See my question about the existing CSS Allowlist here for some more details.   

 

I don't know what it would take to get this implemented -- perhaps developers would like to parse the CSS and maybe preface every selector with a #content-wrapper parent to avoid breaking the institution's look and feel? But in any case it would be nice to have this option available.

hechla
Community Participant

I like this idea in general, but more for testing. Creating a new subaccount just to test some new custom CSS and Javascript is a pain. Just allow me to apply my custom CSS to a course for testing at the very least. 

dineshkumar_tha
Community Explorer

It would be great to support full HTML instead of stripping HTML tags in rich text editor (or) having option to enable/disable from account settings to control the HTML tags handling on rich text editor.

Rightnow, we cannot embed any additional stylesheets via the rich text editor and we totally belongs to the Themes that only Admins can manage.

dspiel
Community Participant

Allowing access to an institution-created javascript would be helpful on pages and also the syllabus as we have been looking into automatically loading institutional information to all syllabus and would be controlled at the Canvas admin level.  That way every page is updated automatically.  If this was a feature then having to go out and spend $15k for a much more complicated system where teachers would have to be trained on how to use this it.

chriscas
Community Coach
Community Coach

@dspiel,

If there is institution-level javascript in place (in the root account theme, usually), it should run on every single page in that account.  I specifically have some javascript which will add information to every syllabus page on my github.  I'm not sure if this is what you're referring to or not, but that part is definitely possible to do today for anyone with admin access.

chriscas
Community Coach
Community Coach

As a Canvas administrator, I would have to agree with @James on this overall request.  I do totally understand the request and agree it would be useful for some people, but for the vast majority of teachers it's more likely to lead to issues than end up solving problems...

When doing CSS, would teachers verify whatever they do works in all browsers?  What about ones that are 2 versions old?  What about Safari (which isn't available for PC users).  What about mobile apps?  iOS and Android are both different, and sometimes functionality changes on a phone vs tablet.  What about the new "dark mode" on the mobile apps?  So many variables even for those who are very familiar with CSS (or javascript) to deal with, and also then keep up to date as browsers, apps, and standards change.  Then we have to look at teachers who aren't really familiar with the technology and just copy/paste things they find through google searches...

I know teachers want more control over presentation in certain areas, but I think the challenges outweigh the benefits.  If there is a huge need, i'd say that teachers could always talk to their local Canvas admin to talk things over and see if something could be added to a root account or subaccount theme (though for many of the support and maintenance reasons I mentioned above, the answer will probably be "no" most times).

-Chris

dspiel
Community Participant

Thank You @chriscas.  I've placed the code in the main script of the main theme but it isn't showing up.  I can't remember based on policies if we can leave an email address here, but mine is dspiel@columbiabasin.edu if I could ask a few quick questions.

ProductPanda
Instructure
Instructure
Status changed to: Archived
Comments from Instructure

As part of the new Ideas & Themes process, all ideas in Idea Conversations were reviewed by the Product Team. Any Idea that was associated with an identified theme was moved to the new Idea & Themes space. Any Idea that was not part of the move is being marked as Archived. This will preserve the history of the conversations while also letting Community members know that Instructure will not explore the request at this time.