Coursedog

Submit a Ticket My Tickets
Welcome
Login  Sign up

Website Settings - Contemporary Catalog


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

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


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.


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


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. 


  • 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. 

  • 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 | Dark 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

# in ScreenshotSetting NameUsed ForSuggested color for Light ThemeSuggested Color for Dark Theme
1Theme Lightest Color
  • Borders
  • Navigation links inside Navigation bar
  • Hero Unit - Left hand CTA button 
  • Hero Unit - Main text 
  • Action Widget - Right-hand button background
Main brand color Secondary brand color
n/aTheme Lighter Color
  • Discontinued in the Contemporary layout and will be removed as an option.
  • In the older Standard layout, this controls the focus ring around the search field.
n/an/a
3Theme Light Color
  • Hero Unit - Right hand CTA button 
  • Program, Course, Department Pages - Breadcrumb links
  • Department Pages - Course codes
  • Department Index - Links and Bullet points
  • Program Pages - Links         
Secondary
brand color
Secondary brand color
4Theme Color
  • Buttons, accents, spinners, link hover state
  • Hero Unit - Background 
  • Action Widget - Left-hand button background
  • Course Modal - Navigation Button color upon hovering
Main brand colorMain brand color
5Theme Dark Color
  • Header text
  • Topbar Navigation - Background
  • Course Modal - Navigation Button base color (when not hovering)
Secondary brand colorMain brand color (or darker version of brand color)
6Theme Darker Color
  • Discontinued; not used in the layout and will be removed as an option.
  • With questions, or for applicability to older layouts, reach out to your Customer Success Manager. 
n/an/a
7Theme Darkest Color
  • “Powered by Coursedog” Footer - Background
Main brand colorMain brand color (or darker version of brand color)
8Theme Navbar Link Color
  • Topbar - Link Color 
White (#FFFFFF)
Or whatever reads best
White (#FFFFFF) or main brand color
9Theme Navbar Background Color
  • Sidebar - Navigation background
  • Program and Course Indices - “Clear Filters” button background
Main brand colorWhite (#FFFFFF)


Website Font Settings 

Label  in Screenshot

Setting Name

Used For

Suggested color for Light Theme

Suggested Color for Dark Theme

A

H1 Headers

  • Course and Program Indices - Search main title 

  • Course and Program Indices - “Results” text

  • Course Preview - “Course details text”

  • Course Preview and Course Page - Course title 

  • Program Page - Program Title

  • Department Index - Alphabet and Main headings 

  • Department Page - Department Title

Main brand color

Secondary brand color

B

H2 Headers

  • Homepage Action Widget - Header 

  • Course Page - Subheader

Secondary brand color

White (#FFFFFF)

C

H3 Headers

  • Course and Program Indices - Index main headers 

  • Course and Program Pages - Non-Nested information headers 

Varies by brand

Varies by brand

D

Body Text

  • Course Index - Body text of listings 

  • Course Preview - Field body text 

  • Course and Program Pages - Body text

  • Program and Course Pages - Horizontal bullets 2 (+3)

  • Program and Course Pages - Tab Headings

  • Action Widget - Body text

Dark color

Dark color

E

Interface Text

  • Hero Unit - CTA Button Font 

  • Action Unit - Button Text 

  • Course and Program Indices - Search/filter field headers 

  • Sidebar Navigation: Nested Links

Varies by brand

Varies by brand

F

Sidebar Elements

  • Applies to optional sidebar features. 

  • Talk to your Customer Success representative if interested. 

Varies by brand

Varies by brand

G

Topbar Elements

  • Sidebar* - Navigation Links

*This is called the sidebar in the UI but serves as a secondary topbar in the Contemporary Catalog.

White (#FFFFFF)

Main brand color

H

Footer Elements

  • In-app Footer - Text 

Typically white (#FFFFFF), but ensure it looks good on your main brand color

Typically white (#FFFFFF), but ensure it looks good on your main brand color



Reference Images


Related Articles

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.