Appearance

Use the Appearance configurations to tailor the look and feel of your website or collections by modifying the header, and setting fonts and colors to reflect your branding.

Appearance configurations can be set at the global or collection level. Before changing configurations, confirm whether the Global Settings or Collections tab is selected.

Global settings are the default for your entire website. Collection settings affect only the selected collection. If no settings exist for a collection, then global settings are used. Any configurations set for a collection will override the global configurations.

Learn about:

Header

The header displays at the top of each page of your website. You can optionally configure headers for collections.

The Website Configuration Tool offers three ways to create or modify your header:

  • Modify the default header text and add an optional logo image
  • Upload a graphical, image-based header
  • Create an HTML-based header (HTML skills not required but may be useful)

Both the graphical and default header require you to set a background color. The color you specify displays as the color behind your header.

Following are example headers:




To configure the default header

  1. From the Website Configuration Tool, click Appearance > Header. (Confirm selection of the Global Settings or Collections tab.)

  2. Select Use the default header.

  3. Edit the Header text.

    Note: The Mobile View header will use the text in the Header text box even if the Use the default header radio button is not selected. Introduced in CONTENTdm 6.9, Mobile View is a preview version of the ongoing Responsive redesign of the CONTENTdm Website. As the redesign progresses, this behavior will be improved.

  4. Optionally, click Browse to upload a logo.

  5. Logo images must be in JPEG, PNG or GIF format and can be no larger than 76 x 76 pixels.

  6. Click the Background Color color block to use the color picker to choose or specify the color value. Click Done to close the color picker.

  7. Click Save Changes.

  8. Click Preview or Publish.

 

To configure a graphical header

  1. From the Website Configuration Tool, click Appearance > Header. (Confirm selection of the Global Settings or Collections tab.)

  2. Select Use a graphical header.

  3. Click Browse to use upload a custom header image.

  4. Custom header images (.jpg, .png, or .gif) can be no larger than about 828 x 76 pixels and are used as-is.

  5. Click the Background Color color block to use the color picker to choose or specify the color value. Click Done to close the color picker.

  6. Click Save Changes.

  7. Click Preview or Publish.

 

To create an HTML-based header

  1. From the Website Configuration Tool, click Appearance > Header. (Confirm selection of the Global Settings or Collections tab.)

  2. Click More Header Configurations, and then select Create a totally custom header with an HTML editor. An HTML editor displays.

  3. Enter the header text and format using the HTML editor. Note that you can insert images and links, specify fonts and background color using the editor.

  4. If you have HTML code you created using another editor that you want to paste into this editor, or if you want to edit in the code view, click the HTML button.

  5. Click Save Changes.

  6. Click Preview or Publish.

 

Text

You can configure the appearance of text-based headings, links, and other text on the website or optionally per collection.

Note: Some browsers have problems displaying Unicode characters. If you experience this issue, set the Font-Family drop-down for all options to Arial Unicode MS to fix the issue. 

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

Following are examples of the configurable text options.

    Level 1 Heading

    Used for key headings in the interface, such as:

  •  
    • Home page: Website name (displayed below the breadcrumbs [note: this is not the global header])
    • Collection landing page: Collection name (displayed below the breadcrumbs)
    • Item pages: Item title when viewing an item

    Level 2 Heading

    Used for key labels in the interface, such as:

  •  
    • Home page: Collection label text for "All Collections" list and "About Collections"
    • Item pages: Page title (displays below the item title)
    • Results page: Left navigation section headers (“Narrow your search by” and “Add or remove other collections to your search”)

    Level 3 Heading

    Used for prominent instructional text and labels in the interface, such as:

  •  
    • Item pages: Item title in the breadcrumbs. For compound objects, the item title is displayed in several ways using this heading level, including in the Thumbnails and Content navigation tabs.
    • Browse/Results page: Instructional text “Browsing items in:” or “You’ve searched”, as well as unclickable column headers (e.g., “Thumbnail”). The QuickView field labels also use this heading level (e.g., “Subject:” and “Description:”).    

    Directional Copy

    Used for less-prominent instructional text in the interface, such as:

  •  
    • Browse/Results page: Number of results, no results search suggestions (“Your search retrieved no results…”), and Results page Display Options dialog box text
    • Item pages: Number of pages (e.g., x “of 195”) and the Reference URL dialog box instructional text (e.g., “To link to the entire object, paste this link…”). If the carousel is used for compound objects, the  number of pages and the object title use this text style.

    Body Copy

    Used for most of the unlinked text displayed on the website, such as:

  •  
    • Home page: Collection descriptions
    • Item pages: Metadata and user-generated content
    • Browse/Results pages: Metadata and QuickView metadata
    • About page: Body text (by default: “Describe your website for visitors to your site.”)

    Body Links

    Used for most of the links on the website, such as:

  •  
    • Home page: Collection names
    • Collection landing pages: Item titles
    • Item pages: Metadata links, tag links. For compound objects, the Thumbnail and Content tabs page title links also use this style.
    • Results page: Collection names in left navigation, results metadata, Narrow Your Search options metadata links (facets)

    Action Links

    Used for clickable interface elements, such as:

  •  
    • Home page: “Advanced Search” and “Back to Top” links
    • Collection landing pages: breadcrumb links, “RSS” link
    • Item pages: “View Description”, “View as …”, “Report Abuse”, and “Print this Item” links. For compound objects, the “Previous”, “Next” and “Text Search” links also use this style.
    • Browse/Results page: Sortable column header links and the “Display Options” link 

 

To configure the appearance of text elements

  1. From the Website Configuration Tool, click Appearance > Text. (Confirm selection of the Global Settings or Collections tab.)

  2. Use the drop-down lists to change the properties you want to modify.

  3. Click the Color color block to use the color picker to choose or specify the color value. Click Done to close the color picker.

  4. Click Save Changes.

  5. Click Preview or Publish.

 

Misc Page Elements

You can configure the appearance of other page elements, such as page body background color, page box background and border colors.

Following example shows the configurable page elements options:

  • Body Background Color: The general page background color. Example shows a white body background color.
  • Page Box Background Color: The background color for page boxes. Example shows boxes with a light grey background color with a darker grey border (see above).
  • Page Box Border Color: The color of the outline of the page box. Example shows boxes with a light grey background color (see above) with a darker grey border color.

 

To configure the appearance of page elements

  1. From the Website Configuration Tool, click Appearance > Misc Page Elements. (Confirm selection of the Global Settings or Collections tab.)

  2. Click the color block to use the color picker to choose or specify the color value for the element you want to configure. Click Done to close the color picker.

  3. Click Save Changes.

  4. Click Preview or Publish.