Appearance

Learn how to use the Appearance section of the Website Configuration Tool to upload your favicon file, configure the header, and configure text and button appearance.

Use the Appearance configurations to tailor the look and feel of your website by modifying the header, choosing fonts and colors, and picking favicon to reflect your branding.

Appearance configurations can be set at the global or collection level, except for Favicon. Before changing configurations, confirm whether the Global Settings or Collection-level Settings tab is selected.

Favicon

Upload your organization's favicon in .ico format here.

 Note: Global Settings only.

Upload the favicon

  1. Navigate to the Website Configuration Tool and select the Global Settings tab.
  2. From the menu on the left, select Appearance > Favicon. 
  3. Select browse to upload a .ico file to use as favicon.
  4. Click Save, then choose to Preview or Publish.

 Note: Disregard the on-screen Path for custom Favicon file. Use https://Your_CONTENTdm_Website_URL/digital/favicon.ico instead.

Header

The header displays at the top of each page of your website.  In Website Configuration Tool, you can modify the header text, add an optional logo image, and set colors for elements in the header.

Configure the header

  1. Navigate to the Website Configuration Tool and select the Global Settings or Collection-level Settings tab.
  2. From the left-side menu, select Appearance > Header.
  3. Select Use the default header.
  4. Edit the Header text. This text appears in the header on desktop and tablet screens.
  5. Optional. Select Use an optional logo and click browse to upload a logo.

    •  Note: 

      • If you choose to display a logo, the header text will not appear on mobile-sized screens. 
      • If the width/height ratio of the image you upload is bigger than 16:3, it will behave differently, more like a banner than a logo.
  6. Optional.  Select Hide header text on desktop and tablet screens, if you do not want the header text to appear on any screens. 
    • You may wish to select this option if your logo has sufficient information to describe your website to your users and you do not wish to display additional text.
  7. Select the color selector box to specify the color value for:
    • Background Color
    • Header Text Color
    • Header Icon Color
      • Includes the  Advanced Search link, search button, and hamburger menu.
  8. Click Done to close the color selector window when you have finished.
  9. Click Save, then choose to Preview or Publish.

Text

You can configure the appearance of text-based headings, links, and other text on your website.

Because the same font styles are used in multiple places on the pages for cohesiveness and design consistency, we recommend that after changing any of the default configurations, you thoroughly review your site to make sure that your changes have the desired effect throughout the site.

Examples of the configurable text options  

Configurable text option Used for Examples
Level 1 Heading

Used for key headings in the interface.
  • About page: page title
  • Collection landing page: collection name
  • Item detail page: item title
Level 2 Heading

Used for key labels in the interface.
  • Home page: collection label texts for all collections list
  • Search and browse page: left-side filter section headers
  • Item detail page: page title for compound objects
    • Displays below the item title and in the page navigation to the right
  • Item detail page: metadata accordion headers
Level 3 Heading

Used for instructional text and labels in the interface.
  • Search and browse page: labels such as "Records 1-10 of ###"
  • All pages: hamburger menu texts 
Body Copy

Used for most of the unlinked text displayed on the website.
  • Home page: website description
  • Collection landing page: collection description
  • Item pages: metadata and breadcrumbs
  • Search and browse page: metadata
  • About page: page text
Body Links

Used for most of the links on the website.
  • All links in Body Copy mentioned above
  • Item pages: linked breadcrumbs, metadata links
  • Search and browse page: left-side filter metadata links (facets)
  • All pages: footer links
    •  Note: footer links don't take any hover and visited colors.

Configure the appearance of text elements

  1. Navigate to the Website Configuration Tool and select the Global Settings or Collection-level settings tab.
  2. From the left-side menu, select Appearance > Text.
  3. Use the drop-down lists to choose the properties for each setting under the different configurable text options.
  4. Select the color selector box to specify the color values. Click Done to close the color selector window when you have finished.
  5. Click Save, then choose to Preview or Publish.

Buttons

Configure the appearance of buttons. Examples of buttons are: pagination, browse on the collection landing page, log in, expand view, print and download, secondary search and clear search.

Configure the appearance buttons

  1. Navigate to the Website Configuration Tool and select the Global Settings or Collection-level settings tab.
  2. From the left-side menu, select Appearance > Buttons.
  3. Use the drop-down lists to choose the properties for each setting:
  • Button Background Color
  • Button Text Color
  • Button Font-Family
  • Button Font-Size
  • Button Font-Weight
  • Button Background Hover Color
  • Button Text Hover Color
     
    • Click the color selector box to specify the color values. Click Done to close the color selector window when you have finished.
  1. Click Save, then choose to Preview or Publish.