Embed CSS in Canvas page?

[lmoline]

I use a fair amount of inline CSS to visually format the materials for my courses. One frustration I have is that I cannot use external or embedded styles to do this more efficiently: I have to micro style every instance of some content so that it is formatted correctly. This is not just a matter of formal preference, but rather it is to help students with some of the information that I need to share with them. I teach web technology, and this becomes an issue of usability.

For instance, I have some cheat sheets of common HTML and CSS validation errors, and in D2L, my former learning management system, I could easily use embedded styles so that these cheat sheets looked exactly like the HTML and CSS validation error pages that students would encounter when validating their work. In Canvas, the cheat sheets are much less helpful because the visual formatting doesn't work. I have attached screen shots:

D2L

Canvas:

I would like to be able to use an embedded style so that the 10 or 15 errors (on each of the HTML and CSS cheat sheets) are formatted in a comprehensible way. It would take a great deal of time to actually write inline styles for this, and it isn't reasonable to expect it. PDF or image versions of this document are far less usable and accessible, which is something Canvas seems to want to promote!

Is it possible to allow an embedded style sheet in a Canvas page? I have tried and have not been successful.

[Stef_retired]

Hi,  @lmoline ‌, you should be able to embed the "cheat sheets" in a Canvas page using an iframe. There are several resources here about this, and here's an example: Embedding an Uploaded HTML page in an iFrame 

[lmoline]

I would never have considered an iframe to solve a CSS challenge. I'll take a look. iframes present interesting accessibility challenges: it would be much more accessible to allow embedded CSS in a canvas page than this workaround! I'll certainly try this, but would it not be worth considering allowing embedded CSS in a Canvas page? What are the reasons that it is forbidden? I read the linked discussion, and it involved all sorts of accessibility-problematic desires (image maps!)

[Stef_retired]

 @lmoline ‌, if this is something you'd like to see added to the Canvas Rich Content Editor (RCE), please add your vote and comments to https://community.canvaslms.com/ideas/14174-allow-custom-css-in-editor 

[lmoline]

I'm not really wanting a custom CSS editor. I'm wanting to be able to write efficient styles. Using a visual editor to do the formatting I want would be just as time consuming and frustrating as writing inline styles, which I have the skills to do, just not the time. I just want access to an embedded style sheet. 

[lmoline]

I'm not sure that the accessibility problems that are introduced with the iframe are worth the trouble. I am confused that Canvas would prefer to introduce all the accessibility problems that are inherent in an iframe rather than just letting people use embedded styles; you blacklist problematic styles anyway, so the results of a self-styled Canvas page would be much preferable to the anything-goes styles in an iframe (not to mention all the problematic things that iframes introduce in terms of responsiveness, extra scrollbars, and content which is not accessible).

[Stef_retired]

 @lmoline , I've shared your question with the Instructional Designers‌ group; perhaps the members there can suggest other solutions.

[lmoline]

Thank you.

[sgilbert]

Hi Lisa.

Here is what I've done that seems to work OK in certain situations. 

I write my page using normal CSS (a style sheet or embedded css) and then run it through Pre-flight mailer. This Canadian Web app was originally created to embed CSS in email for newsletters. It reads your page and turns your embedded and external style sheets into inline CSS.

Premailer: pre-flight for HTML email 

[lmoline]

That is a very useful little utility! Other than a few little things that aren't worth bothering about, it did a very nice job with the styles.

[robotcars]

Since you're a web professional... I wonder if your institution would allow you to manage some of these for yourself/sub account using Canvas Themes, How do I upload custom JavaScript and CSS files to an account? I use this to set the styles for some of our designs and HTML elements. If you don't have access to Sub Account Themes, then inline CSS or the above [mailer] solution looks best. This is why stefaniesanders‌ suggested voting on Allow Custom CSS in Editor, which is more about letting course designers/instructors add JS/CSS to their pages/course similar to Canvas Themes, but at an appropriate user level... not a CSS editor.

[lmoline]

I'll contact my institution to see whether that access is available to me 🙂

[Chris_Hofer]

Hi  @lmoline ...

Checking in with you because this topic hasn't had much activity since the middle of September.  Has this question been answered to your satisfaction?  If so, please feel free to mark one of the above responses as "Correct".  Or, if you're still needing some assistance, please post a note below letting Community members know how we can help you out.  I'm going to mark your question as "Assumed Answered" (How we keep your questions flowing!‌), but that won't prevent you or others from posting additional questions/comments below related to this topic.  Hoping to hear back from you soon...thanks!

[lmoline]

I ended up using the pre-flight mailer suggestion above, and it worked well for this situation. However, I would still like to be able to format things more efficiently with external or embedded styles, which it seems Canvas just isn't interested in making available. My experience with Canvas as both I and students make the transition from another platform is that we struggle with the UNIFORMITY of everything. I go out of my way to format things so that there is stronger visual hierarchy and contrast. It is just a lot of work.

[steve72]

Lisa,

I've given up on making people understand what you mean here.

I agree with you but likely the editor technology they are using is not in-house so something like this will take somebody with clout and customer focus to fix.

In the meantime I use an inline solution here too.  Just for nice sytnax highlighting of code for my students.

Working Around Canvas LMS HTML Limitations 

[steve72]

In case anyone here is interested in how I solved this to get CSS styles into Canvas content, I made a post about it. Working Around Canvas LMS HTML Limitations .  Essentially use a style inliner and patch images.

Hope this helps - I would not hold my breath for Canvas to improve their editor/renderer to allow inline styles because it's likely not an inhouse product.