Canvas Guides (English)CatalogCatalog GuideAdmins - CatalogHow do I add a logo, CSS, JavaScript, or HTML file to customize a catalog?

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:

Note: If custom branding is not added in a sub-catalog, it inherits the parent catalog. settings, and other customization options.

Open Admin

Open Admin

In the User Menu, click the Admin link.

Open Catalogs

OPen CAtalogs

Click the Catalogs link.

Open Catalog

Open Catalog

To open an existing catalog, click the name of the catalog.

Add Catalog

Add Catalog

To add a subcatalog, click the Add Catalog button.

Open Customizations

Open Customizations

Click the Customizations tab.

View Custom Branding 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

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

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

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

Save Branding Customizations

Click the Save button.