How do I upload custom JavaScript and CSS files to an account?

[#1]

In Canvas, you can use the Theme Editor to brand your account. However, if you want to apply additional branding that is currently not supported in the Theme Editor, you can upload custom cascading style sheets (CSS) and JavaScript (JS) files to your account. Files are hosted directly in Canvas. Any theme applied to the account also applies to all sub-accounts, though you can upload CSS/JS files for individual sub-accounts.

The Theme Editor supports desktop and mobile upload files. Standard CSS/JS files are applied to HTML pages in the Canvas desktop application, which can include the login page for mobile devices. Mobile CSS/JS files are only applied to user content displayed within the Canvas iOS or Android apps, as well as in third-party apps using the Canvas API, but mobile files do not apply to user content displayed in mobile browsers.

Custom JavaScript and CSS files are subject to the same account and sub-account branding inheritance rules as when creating a theme in the Theme Editor.

Before adding custom JavaScript and CSS files, you must contact your Customer Success Manager to enable custom branding for your account and any sub-accounts. Once custom branding is enabled, the option to upload custom CSS and JS files is available in the account and all sub-accounts.

Custom File Risks

If you cannot use the native Theme Editor options for branding, you must be aware of the associated risks of using custom files, which may cause accessibility issues or conflicts with future Canvas updates:

• You should have advanced understanding of JavaScript and CSS and must maintain your own code.
• Custom files may conflict with future changes to the Canvas DOM (eg: element class names or HTML structure) and are therefore not supported. Instructure disclaims any liability for any changes made to your custom override files.
• You are responsible to review web content accessibility guidelines to ensure your files meet any web accessibility testing or other compliance standards that may be required in your jurisdiction. You are responsible for making your modifications accessible to screen readers, users with text contrast and color contrast needs, and users relying on High Contrast Styles as a user feature setting.
• When experimenting with custom branding, always confirm your branding changes in your institution's beta environment or test environment.

Notes:

• The Theme Editor is not available for Free-For-Teacher accounts.
• If you are a sub-account admin and the Themes link is not visible in Account Navigation, Themes has not been enabled for sub-accounts. If the CSS/JS Upload tab is not visible, file uploads have not been enabled for sub-accounts.

Open Account

In Global Navigation, click the Admin link [1], then click the name of the account [2].

Open Themes

In Account Navigation, click the Themes link.

Note: If sub-account themes have been enabled, each sub-account also includes a Themes link. To open the Theme Editor for a sub-account, click the Sub-Accounts link to locate and open the sub-account, then click the sub-account's Themes link.

Open Theme Template

If you do not yet have a Canvas theme for your account, use a template to create a new theme. You can choose from the Default Canvas template, a minimalist template, and a State U. template. If your Customer Success Manager has enabled the K12-specific feature setting, the K12 Theme also appears as a template.

To create a new theme, hover over a template and click the Open in Theme Editor button [1], or click the Add Theme button [2] and select a template from the list.

Open Saved Theme

If you previously created and saved a theme, you can edit saved themes at any time. Saved themes display in the My Themes section. To open a saved theme, hover over the name of the theme and click the Open in Theme Editor button [1].

To create a new theme based on a saved theme, click the Add Theme button [2] and select the name of the saved theme from the list [3]. This option helps you avoid overwriting your previously saved theme.

Open Upload Tab

In the Theme Editor sidebar, click the Upload tab.

Upload Custom Files

To upload files for the Canvas desktop application, locate the CSS file/JavaScript file headings [1]. To upload files for user content in Canvas mobile and third-party apps, locate the Mobile app CSS file/JavaScript file headings [2].

Locate the file type you want to upload and click the Select button [3], then locate the file on your computer.

Locate additional files for upload, if required.

Preview Theme

To preview your theme, click the Preview Your Changes button.

Canvas will generate the preview of the components based on your uploaded files.

Manage Files

To manage your files, click the Upload tab again [1].

To remove and upload a new file, click the Remove icon [2]. You can make additional changes and upload your revised file.

To view the code for your file, click the View File link [3]. As the file is stored directly in Canvas, use this link if you ever need to download the file.

Save Theme

Once you are satisfied with your template changes, save your theme by clicking the Save Theme button.

Create Theme Name

If you modified a theme from a template, the Theme Editor creates a copy of the theme. Templates cannot be edited directly. In the Theme Name field [1], enter a name for your theme. Click the Save Theme button [2].

Note: If you edited a previously saved theme, saving the theme overwrites the previous version of the theme and uses the same theme name.

Apply Theme

To apply your theme to your account, click the Apply theme button [1].

To exit the theme and return to the Themes page, click the Exit button [2]. You can open the theme and apply it to your account at any time.

Note: If your account allows sub-accounts to customize their own themes, any applicable changes you made will also filter down to any associated sub-accounts. Canvas shows the status of your Theme Editor updates; when the process for each sub-account is complete, the sub-account disappears from the progress window. When all sub-accounts have been updated, the Theme Editor redirects back to the Themes page.