How do I add a logo, CSS, JavaScript, or HTML file to customize a catalog?
As a Catalog admin, you can customize your Catalog using cascading style sheet (CSS), JavaScript (JS), or Hyper Text Markup Language (HTML) files. Catalog supports both a copy the source code, or links to external files. It is recommended that you use a secure site to host your custom style files, otherwise they may break when trying to load. HTML/CSS can also be used to customize a program certificate or course certificate.
You can also upload a catalog header logo and catalog badge logo, as well as a browser favicon. For details and specifications, please view the Canvas Catalog Logo Guidelines.
Instruction Files:
- CSS instruction file
- JS instruction file
- HTML email header instruction file (to view the code, right-click and save the link to your computer)
- HTML email footer instruction file (to view the code, right-click and save the link to your computer)
Note: If custom branding is not added in a sub-catalog, it inherits the parent catalog. settings, and other customization options.
View Custom Branding Options
By default, the Customizations tab displays the Branding page [1]. You can add custom images [2], style CSS and JS [3], and email header and footer HTML [4].
Add Logos and Favicon
You can upload the following image types to customize your catalog or subcatalog:
- Header [1]: display in your catalog or subcatalog page headers.
- Logo [2]: display in listing tiles, listing pages, email notifications, enrollment forms, and student dashboards.
- Favicon [3]: display in browser tabs.
To upload a header, logo, or favicon image, click the Upload Image button [4]. To view details about where the image displays in Catalog, hover over the item Information icon [5].
Add Custom CSS and JavaScript
View the CSS and JS notification [1]. You must maintain your CSS and JS to avoid conflicts or errors caused by Catalog product updates and improvements.
Enter your custom CSS, or add a link to your secure CSS file in the Custom CSS field [2].
Enter your custom JS, or add a link to your secure JS file in the Custom JS field [3].
Add Custom Email Header and Footer
Custom email headers and footers do not override email template formatting. Instead, they extend the email header and footer.
Enter the custom header HTML in the Custom Layout HTML Header field [1].
Enter the custom footer HTML in the Custom Layout HTML Footer field [2].
Learn about creating custom email templates for Catalog notification emails.
