How do I customize a catalog using CSS, JS, or HTML files?
As a Catalog admin, you can customize your catalog using images, a cascading style sheet (CSS), JavaScript (JS), or Hyper Text Markup Language (HTML) files. You can either paste the source code or insert links to external files. If you are linking to external files, best practice is to use a secure site to host your custom style files; otherwise, they may break when trying to load.
You can also use HTML/CSS to customize a program certificate or course certificate.
You can upload images for your 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)
Notes:
- If it has been enabled for your institution, you may be able to use the Storefront Theme Editor to customize your branding without using CSS/JS/HTML.
- If custom branding is not added to a subcatalog, the parent catalog customization applies by default.
- The appearance of the Catalog Listings page may vary depending on the platform version or any custom styling applied through website code, such as CSS, JS, or HyperText Markup Language (HTML).
Open Admin
Click the User Name drop-down menu [1]. Then, click the Admin link [2].
Open Catalogs
Click the Catalogs tab.
Open Catalog
To open an existing catalog, click the catalog name link.
Open Customizations
Click the Customizations tab.
View Custom Branding Options
By default, the Customizations tab displays the Branding page [1]. You can add custom images [2], 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]: displays in your catalog or subcatalog page headers. Supported file types are PNG, JPG, GIF, and SVG.
- Logo [2]: displays in listing tiles, listing pages, email notifications, enrollment forms, and student dashboards. Supported file types are PNG, JPG, GIF, and SVG.
- Favicon [3]: display in browser tabs. Supported file types are ICO, PNG, and GIF.
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].
Upload Image
Drag and drop an image file to the Upload Image space [1]. Alternatively, to upload a file from your computer, click the Drag and Drop or Click to Browse your Computer link [2].
Remove Image
To remove an uploaded image, hover the cursor over the image until the Remove image icon displays.
Click the Delete image button.
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.
Save Branding Customizations
Click the Save button.
