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:

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.

Open Admin

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.

Add Catalog

To add a subcatalog, click the Add Catalog button.

Open Customizations

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

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

Remove Image

To remove an uploaded image, hover the cursor over the image until the Remove image icon displays.

Delete Image

Click the Delete image button.

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.