Custom JavaScript & CSS

[AnnaCorbett]

We want to explore customizing the JavaScript & CSS on our system to automatically adjust fonts/text sizes and provide a more consistent experience with text for our users: https://community.canvaslms.com/t5/Admin-Guide/How-do-I-upload-custom-JavaScript-and-CSS-files-to-an....

If you have customized this for your Canvas instance, would you be able to provide any insight on whether or not this customization is problematic or causes any issues when Canvas is updated? How does this change affect all text types (headers, paragraph, etc)?

Thank you for your time and insight!

Sincerely,

Anna

[chriscas]

Hi @AnnaCorbett,

Can you explain exactly what you're trying to modify about the font in Canvas?  The font-type (arial, times new roman, etc), the size of the font, the color, or something else?  If you're a Canvas admin, the theme editor will let you adjust the default color very easily.  Adjusting the type or size, in my opinion, will be a tougher task and guess I'm not sure what the benefit(s) would be.  I could envision all sorts of potential issues you could encounter by trying to adjust the font size, not to mention the numerous different things you'd need to adjust (and things like embedded content rom other systems likely wouldn't be affected leaving things looking very odd).  If you could give more details about the problem/solution you're looking for, we might be able to offer more advice.

-Chris

[AnnaCorbett]

Thanks, Chris!

We are in the midst of migrating content from Blackboard to Canvas and noticed that most text is coming through as Type 10 Verdana. Things are looking a bit odd in general.

This poses a bit of an accessibility issue, due to the small font size. The external service we partnered with to migrate courses, suggested customizing the javascript/css to quickly adjust normal text for all users/courses. I know there is always the workaround of zooming in and out using browser settings but am wondering if there is a way to globally set default font and size in Canvas to be a bit more accessible? If not, is there a way to customize for the course?

Thank you so much for your time and insight!

Cheers,

Anna

[chriscas]

Hi @AnnaCorbett,

Thanks for the context, that definitely makes more sense than what I was imagining.  As you may or may not know, the default font Canvas uses is Lato, and it's normally 12pt.  Since you're Verdana at a smaller size, I'm going to guess the HTML of your pages are explicitly defining the font and size in each line.  I would say the ultimate solution is to clean up the HTML (a site like HTML Cleaner could help strip out unnecessary HTML formatting).  With a mass migration, this is a probably a daunting task.  Since it sounds like you have hired a 3rd party company to help with your migration, I'd recommend asking them if they can help write some scripts/code to do some of the cleanup for you.  I honestly don't think a CSS/JS route is the right way to handle this, but someone else might chime in with a different opinion.

Hope this helps a bit!

-Chris

[JamesSekcienski]

@AnnaCorbett 

Is the content also set to 10pt Verdana font in Blackboard?  It seems odd that the migration process would result in these font styles being applied unless they were set that way in the original content.

I agree with @chriscas that this is likely caused by inline styles and wouldn't recommend the custom CSS/JS files to try to fix this.

[AnnaCorbett]

Thanks, Everyone! Gonna abandon the css/js customization route. I just heard back from our admins and this is what they were able to provide from each respective LMS Support team:

Canvas - Uses size 14 Lato font.
https://community.canvaslms.com/t5/Canvas-Releases/Canvas-Production-Release-Notes-2016-12-10/ta-p/2...

Blackboard -  the font size might be different in certain areas, such as the editor or main site. Our products are designed and developed in accordance with the internationally recognized Web Content Accessibility Guidelines (WCAG). You can find more details here: https://help.blackboard.com/Learn/Administrator/SaaS/User_Interface_Options/Ultra_Experience/Accessi...

[chriscas]

Hi @AnnaCorbett,

Just in case anyone comes across this thread in the future, I wanted to be clear about the font size.  With default browser settings, the font in Canvas should be Lato 12pt (or 16px if you prefer pixel size).  If you see a different font size by default (before pasting text into the editor), it seems likely that you've adjusted your browser's font size.

-Chris

[rn1]

If you can post the html for at page that looks odd, we might be able to figure out why the default font stack and font-size is overwritten.

[AnnaCorbett]

Here is an example of objectives that were pulled from a course that was recently imported from Blackboard to Canvas. It contains a title and normal text. I'm not sure why text varies so much, but we may just have to clean up each page as we go. It doesn't sound like there is a way to fix on a course or LMS level.

Example:

<p style="font-family: 'Open Sans', sans-serif; margin: 0px 0px 1em; padding: 0px; border: 0px; font-style: normal; font-size: small; color: #000000; text-align: start; text-indent: 0px; white-space: normal;">Upon successful Completion of this course, you will be able to:<span style="font-size: 13px;"><br style="font-family: 'Open Sans', sans-serif;" /></span></p>
<ol>
<li>Understand the market mechanisms that exist to channel funds to their best use.</li>
<li>Understand how investors view risk, return, and value.</li>
<li>Complete and understand time value of money calculations.</li>
<li>Explain the characteristics, uses, and taxation of investment vehicles.</li>
<li>Describe and measure the types of investment risk and returns.</li>
<li>Calculate and interpret quantitative investment concepts including statistical measures.</li>
<li>Value debt securities (bonds) and equity securities (stocks). Explain approaches to stock valuation.</li>
<li>Construct and analyze a diversified portfolio.</li>
<li>Develop investment strategies using debt and equity securities, derivatives, and alternative investments.</li>
<li>Develop asset allocation and portfolio re-balancing strategies.</li>
<li>Recognize characteristics of economic cycles.&nbsp;</li>
<li>Complete corporate financial analysis to diagnose strengths and weaknesses</li>
<li>Understand the how the marginal cost of capital acts as a guide to create value.</li>
<li>Complete capital budgeting analysis to select long-term projects for firm value maximization.</li>
</ol>

[chriscas]

Hi @AnnaCorbett,

You definitely have multiple definitions around fonts and sizes there...  To get back to a more default experience, you can remove the style= and everything contained there.  You can also remove the font-family and font-size declarations.  That would leave you with  <span> and </span> tags that are empty and unneeded.  As a final suggestion for what you pasted, the <br /> isn't really necessary as it just adds whitespace between the paragraph and list.  Here's a cleaned up version with the above changes....

<p>Upon successful Completion of this course, you will be able to:</p>
<ol>
<li>Understand the market mechanisms that exist to channel funds to their best use.</li>
<li>Understand how investors view risk, return, and value.</li>
<li>Complete and understand time value of money calculations.</li>
<li>Explain the characteristics, uses, and taxation of investment vehicles.</li>
<li>Describe and measure the types of investment risk and returns.</li>
<li>Calculate and interpret quantitative investment concepts including statistical measures.</li>
<li>Value debt securities (bonds) and equity securities (stocks). Explain approaches to stock valuation.</li>
<li>Construct and analyze a diversified portfolio.</li>
<li>Develop investment strategies using debt and equity securities, derivatives, and alternative investments.</li>
<li>Develop asset allocation and portfolio re-balancing strategies.</li>
<li>Recognize characteristics of economic cycles.</li>
<li>Complete corporate financial analysis to diagnose strengths and weaknesses.</li>
<li>Understand the how the marginal cost of capital acts as a guide to create value.</li>
<li>Complete capital budgeting analysis to select long-term projects for firm value maximization.</li>
</ol>