Customize Catalog Connector

You can style your Catalog Connector embed widgets using CSS to match your site’s branding.

Styling the Connector OutputLink to this section

Because Catalog Connectors output structured HTML, you can apply styles using a custom CSS file. To help you start, we provide a basic starter stylesheet:

Download the Catalog Connector CSS Starter File

Your team or design agency can:

Adjust layout, spacing, fonts, and color schemes to match institutional branding

Add additional classes or responsive styling based on your site’s framework

Host the modified CSS in your CMS and link it globally or per page

You can view the output from a connector in your browser’s dev tools and target key classes like .connector-description, .connector-course, or .connector-header.

Where to Add the Custom CSSLink to this section

To apply the stylesheet, link to it in the Custom CSS URL field when editing a connector inside the CMS:

1. Go to Content > Connectors.
2. Click the connector (e.g., CMS).
3. In the Custom CSS URL field, enter the full URL to your hosted stylesheet.
   • Example: https://www.example.edu/styles/cms-custom.css
4. Save.

This CSS will apply to all embedded catalog content rendered by that connector.