Table of Contents
Overview
Default Website Settings vs. Website Settings for Individual Catalogs
Catalogs Website Specific Settings / Catalog Specific Settings
Website Fonts
General Settings
Website Color Settings
Page Breakdown
Related Articles
Overview
Just as you can customize page content, you can control the look and feel of your website via “Website Settings”.
You can configure Website Settings on a global scale and use those as default settings for all catalogs, but you can also further customize Website Settings for individual catalogs.
Note that you will need to click “Save” to preserve any changes you make to Website Settings.
Default Website Settings vs. Website Settings for Individual Catalogs
You can set a default style that can easily be applied to all catalogs, but you can further customize individual catalogs.
You can customize your default style in two different places: Catalog > Settings > Website or Admin > Public Catalog Settings.
To customize the style for an individual catalog, go to: Catalog > Settings > Catalogs > (Locate Catalog) > Website Settings.
To return an individual catalog to your default settings at any time, go to Catalog > Settings > Catalogs > Website Settings and select the red "Reset to Defaults" button at the bottom.
Catalogs Website Specific Settings / Catalog Specific Settings
Layout Name | Hide Course Details Modal | Hide Program Details Modal
Display Credits Details on Course Modal | Hide Download Catalog as PDF
Display Course Syllabus Card | Display Syllabus File Card | Custom Page Layout
Layout Name
You will set this field with your Customer Success Representative (PM or CSM).
Hide Course Details Modal
If this is set to “No” or not set at all, when a visitor to your public catalog clicks on a dynamic Course link, course information will open in a modal.
If this is set to “Yes”, when a visitor to your public catalog clicks on a dynamic Course link, they will be redirected to the Course Page, without any modal opening.
Hide Program Details Modal
If this is set to “No” or not set at all, when a visitor to your public catalog clicks on a dynamic Program link, Program information will open in a modal.
If this is set to “Yes”, when a visitor to your public catalog clicks on a dynamic Program link, they will be redirected to the Program Page, without any modal opening.
Display Credits Details on Course Modal
If this is set to “Yes”, the Course modal will include credits fields, as shown below.
Hide Download Catalog as PDF
If this is set to “Yes”, visitors to your public catalog will NOT see an option to “download catalog as PDF”.
If set to “No”, visitors to your public catalog will see an option to download the catalog as a PDF.
When you create a Catalog, it will default to “No” for this setting.
You can learn more about Catalog PDF generation here.
Display Course Syllabus Card
This option is for Syllabus customers.
If set to “Yes”, courses in your catalog will include a Syllabus card. This card is a pre-built set of fields (drawn from Curriculum Management) that could comprise a syllabus (e.g. outcomes, department, etc.).
The Syllabus Files Card is a card which would link to the PDF at the section level.
If set to “No”, the Syllabus card will not display in your catalog.
If nothing is set (default), this is the same thing as “No”.
Display Syllabus File Card
This option is for Syllabus customers.
If set to “Yes”, we will take each complete Syllabus Document for a given course’s section within the Catalog’s effective date range and display it as a PDF on the Syllabus card.
If set to “No”, courses will NOT include a pdf of the Syllabus.
If nothing is set (default), this is the same thing as “No”.
Custom Page Layout
Click the dropdown to choose your preferred page layout: vertical navigation or tabulated navigation.
Vertical navigation triggers subpages of a custom page to populate as tabs to the left of the content.
Tabulated navigation triggers subpages to populate as tabs horizontally across the top of the content.
If nothing is selected, the default setting is horizontal (“tabulated”).
Website Fonts
Overview
You can assign a custom or Google font to all headings, text, and navigation links within the catalog.
You can choose a typeface, color, and font weight for the h1, h2, h3, body text, interface text, sidebar, topbar, and footer.
Learn more about using custom or Google fonts here.
General Settings
Custom Before Page HTML | Custom After Page HTML | Footer Editor | Google Tag Manager Id
Favicon | Navigation Image | Home Link Type
Custom Before Page HTML
Use this to embed custom HTML snippets before the page (as a header). Learn more here.
Custom After Page HTML
Use this to embed custom HTML snippets at the bottom-most portion of the page (as a footer). Learn more here.
Footer Editor
Overview | Background Color | Footer Content and Custom Footer Links
Overview
Use this custom editing tool to create your own unique footer.
The footer can be used to add custom links to institution-specific sites, such as the institution’s home page, additional policy pages, terms of use pages, and any others.
Click “Edit Site Footer” and then “Add Row” to get started.
Background Color
Footer Content and Custom Footer Links
Google Tag Manager Id
If desired, configure Google tag manager tracking for analytics and then input your Google Tag Manager ID here.
Favicon
Your favicon is the small icon that appears in a browser tab; it helps users tell which tab is for which website at-a-glance.
This should be the same height and width to prevent any accidental cropping.
Click “Add image” to upload an image file from your computer.
Navigation Image
This should be your institution’s main logo.
It will be displayed at the top of your website.
Logo should be a maximum of 90 pixels high. Within that parameter, width is variable to allow for configurable logo scaling.
Home Link Type
You can determine if your “home link” in the navigation bar at the top of your website shows “text only”; your “logo only”; or “text and logo”.
This is useful if, for example, your institution name already appears in your logo and you wish to keep the name hidden to avoid repeating it (in which case, you would choose “logo only”).
If you select “text only” or “text and logo”, the “text” will point to your institution’s name (as defined at Admin > Settings > Display Name) + “Catalog”, e.g. General University Catalog.
This is called the “home link” because whenever a catalog visitor clicks it, they will return to the Catalog home page.
Website Color Settings
Overview | Picking a Theme | Contemporary Catalog Widgets
Overview
You can customize the color for many different areas of your website, including the background, navbar link, and much more.
Although you can set whatever color you like for all of the components listed below, we also have recommended colors to use if you wish to follow either what we call a “light theme” or “dark theme”.
See “Page Breakdown” section for recommended color settings for both themes.
Picking a Theme
Light Theme
Overview
White is used as the main background color, with brand colors used as accents.
This is better for a “clean” catalog look.
Navbar is in your brand color, with white text.
If you are using the light theme, you will need to copy/paste the below CSS code into the “Custom Before Page HTML” field in Website Settings.
CSS Code
<style>
/* Main page header background color set to white */
#main-content > div > div.relative.bg-theme-base.overflow-hidden > div.max-w-screen-xl.mx-auto, #main-content > div > div.relative.bg-theme-base.overflow-hidden, #main-content > div > div.relative.bg-theme-base.overflow-hidden > div.max-w-screen-xl.mx-auto > div
{
background-color: #ffffff !important;
}
/* Main page diagonal polygon on picture set to white */ #main-content > div > div.relative.bg-theme-base.overflow-hidden > div.max-w-screen-xl.mx-auto > div > svg
{
color: #ffffff !important;
}
/*Main page "Explore Courses" text set to white */ a.px-8.py-3.border.border-transparent.text-base.leading-6.font-medium.rounded-md.transform.hover\:scale-105.transition.duration-150.ease-in-out.md\:py-4.md\:text-lg.md\:px-10.color-theme-base.bg-theme-lightest
{
color: #ffffff !important;
}
</style>
Dark Theme
Your brand color is used as the main background color, with white as accents.
This approach is better for a more playful/creative catalog look.
Contemporary Catalog Widgets
Although website settings impact the fonts and colors of the widgets shown below, additional configurations are made at Catalog > Pages. Learn more here.
Page Breakdown
Overview | Website Color Settings | Website Font Settings
Overview
The tables and screenshots in this section indicate which website setting impacts which area of your public Catalog – and the suggested color for each if you’re following our light or dark theme.
The tables include:
#/Label in Screenshot - This number corresponds to the label in the “Reference Images” section at the bottom of this article.
Setting Name - How this setting is labeled in the Website Settings modal.
Used For - Lists out what this setting impacts in your Catalog.
Suggested Color for Light Theme - Suggested color to use if you’re following the Light Theme.
Suggested Color for Dark Theme - Suggested color to use if you’re following the Dark Theme.
Website Color Settings
Website Font Settings
Reference Images
