When you create a theme there is a Display Name and Theme Name option.

Theme Name

The Theme Name will only show internally. You might want to name this something like 'Default' for single systems or for consortiums, the name of the library system that will primarily be using the theme like 'Main' or 'East' or 'Central'.

The Theme Name will display in areas like Aspen Admin > Primary Configuration > Basic Display where your themes for that system are listed.

Display Name

The Display Name will be what patrons will see when they are selecting the theme they want to view Aspen in if you have multiple themes enabled. You might want to name this something like 'Default' or other patron friendly term to differentiate between your normal/standard theme and others that you might have, like Dark Mode or High Contrast.

If you are planning on sharing the theme with the Aspen community, the default name when sharing will also pull from the Display Name field (although this can be adjusted when shared).

For consortiums that have multiple themes enabled for their patrons, don't forget about the Batch Update All button, where you can select Field to Update > Display Name and change them all to something like Default to standardize the patron experience.

Adding a Logo

1. Visit  Theme & Layout → Themes.
2. Under Logo, click Select an Image.
3. Select your logo image file and click Open.
4. Scroll to the bottom and click Save Changes and Stay Here.
5. You should now see your logo at the top of the catalog page and as a preview image in the logo section of the Theme settings.
6. To change the logo image, simply repeat this process and select another file for upload.

Note: The maximum recommended size for a logo image is 750px x 150px. If you plan to display your library name in the header, the maximum recommend size is 250px x 100px.

If your library does not currently have a logo, you can easily create a simple logo using the free online design tool Canva.

We suggest you use .svg or .png files for crisp images. You can even upload a .gif to have your logo move!

Adding a Favicon

Click Here to View Theme Color Settings

Changing Colors

Changing Fonts

1. Visit  Theme & Layout → Themes.
2. Scroll to the Font section. (Tip: Use the CTRL + F shortcut to search for "Font" within the page for easier navigation.)
3. Use the dropdown menus to select one of Aspen's pre-loaded fonts. You will see a preview of your changes in the text to the right of the font selection menu.

4. To upload custom fonts, click the Select a font button under Custom Heading Font or Custom Body Font and choose your font files.
5. Scroll to the bottom of the screen and save your changes.
6. To remove a previously uploaded custom font, click the Remove checkbox underneath your uploaded file and save your changes.

To adjust the cover image layout of cover images, go to Aspen Administration > Themes & Layout > Themes > Cover Image Style.

You can select from:

• Border/Picture Frame
• Shadow/Floating

Border/Picture Frame

Shadow/Floating

To make the header and footer full width, go to Aspen Administration > Theme & Layout > Themes > check "Make Header & Footer Full Width."

Default Width

Full Width Header

High Contrast Theme

Aspen's high contrast theme option enables base CSS enhancements for the following:

• Adds a filter to increase contrast to the overall styling (this includes images!)
• Increases the minimum font size
• Adds underlines to all links
• Adds “pointer” cursor to all links
• Inverts the colors on modals (so that they contrast from the main Aspen body)

These enhancements will be applied automatically to the High Contrast theme (when "High Contrast Theme" is checked). 

In order to offer a high contrast theme, you will need to either create your own or import one from the community. We recommend importing an existing high contrast theme from the community to make setup easier.

Create Your Own

If you want to create your own high contrast theme:

Go to Aspen Admin > Theme & Layout > Themes > click into your default theme (or other theme you want to copy)

Give your new theme a new Theme Name (this is internal) and Display Name (this is what shows to the patrons)

Check the box for High Contrast Theme

Next, upload any corresponding logos.

Save the theme.

To apply the theme to your library catalogs, either select Library Systems from the bottom of the theme or go to Aspen Admin > Primary Configuration > Library Systems > click into the library system > Basic Display > Add New > select the new High Contrast theme you created from the dropdown.

Click Save.

Now, users will see this and other themes you have available at the top of your header under Languages & Display. 

When a logged in user clicks on this, it will take them to My Preferences within their account and they will be able to select any themes available to them in the Display Mode dropdown.

Once they make a selection and click save, the catalog will automatically change for them.

Get a High Contrast Theme from the Community

If you have permissions to import community content, then you can also use one of ByWater's pre-created High Contrast themes.

Learn more about Community Sharing. 

To access shared community themes, from the bottom of the Themes page in Theme & Layout, there will be an Import Community Content button.

After clicking that button, you will have a modal that will allow you to search or browse for themes by name, contributing library, and description. For example, you will see themes provided by ByWater Solutions.

After browsing, select a theme and click Import.

There are at least two shared High Contrast themes from ByWater Solutions at this time - one optimized for High Contrast on White and one optimized for High Contrast on Black.

Then, you will be brought to the screen to edit that theme.

You can give it a new name and apply to any libraries that need it.

Logos and custom fonts will not be copied over. You must re-add these to the new themes(s).

Changes made to the imported theme will not sync with the community theme you imported from -- you are making a copy of the theme from the community server which you can then modify on your own server.

Header background images are optional, and fill the header space behind your logo. In order for this to work, you would ideally need to upload a version of your logo with a transparent background, so the header background can show through. Make sure the colors of your logo will work well with whatever background you choose -- you still want your logo to be legible!

To add a header background image, go to Aspen Administration > Theme & Layout > Themes to see the header background settings.

• For header and footer, you can make them full width by checking "Make Header & Footer Full Width" at the top of Theme settings.
• Select an image to upload to Header Background Image.
  • The optimal dimensions would have a minimum of 1200px width and a range of 128px-250px height (suggested 175px).
  • A file with smaller dimensions may look blurry or pixelated when used as a header background.
  • We recommend experimenting to see what looks best depending on the image you've selected.
  • Keep an eye on the file size! Large images may have an impact on loading times for your users.
• In Header Background Image Fit, choose from:
  • Cover - the image maintains its aspect ratio, and fills the full dimensions of the header area. This may result in the image being clipped.
  • Contain - the image maintains its aspect ratio and displays the full image without clipping, and is resized to fit completely within the header area.
• In Header Background Image Repeat, choose from:
  • No Repeat
  • Repeat
  • Repeat X
  • Repeat Y

Full width header background image with Cover and No Repeat selected

Full width header background image with Contain and No Repeat selected

Note: In this image, the Background Color is set to black

Full width header background image with Contain and Repeat selected

Adding a Footer Image

1. Visit  Theme & Layout → Themes.
2. Navigate to the Footer Image section.
3. Click Select an image to upload your footer image file.
4. Use the Footer Image Link field to add a hyperlink URL for your footer image, if desired.
5. To add alt text to your footer image, add that to the Footer Image Alternative Text field.
6. Scroll to the bottom of the screen and save your changes.

The maximum recommended size for a footer image is 250px by 150px.

Some basic footer customizations are available in Aspen Administration > Theme & Layout > Themes.

These include:

• Footer colors
• Footer Image (250px x 150px max)
• Footer Image Link
• Footer Image Alternative Text

Beyond Theme settings, there are additional settings to add footer text and/or images in Aspen Administration > Primary Configuration > Library Systems > Basic Display > Footer Text. 

When saved, images or text will show here:

If you want to copy a theme:

Go to Aspen Admin > Theme & Layout > Themes > click into your default theme (or other theme you want to copy)

Give your new theme a new Theme Name (this is internal) and Display Name (this is what shows to the patrons)

Upload any logos to the new theme.

Apply the theme to the correct library.

Save.

To apply multiple themes to a library (example: a default theme and a dark theme), you can do this in two main ways.

From within the theme

When you are creating a theme, scroll to the bottom and select the Library Systems and Locations you want the theme to apply to.

For consortiums, take note of the Apply to All Libraries and Clear Libraries buttons available.

From within Library Systems

When you are ready to apply a theme, you can also go to Aspen Admin > Primary Configuration > Library Systems > click into the library system > Basic Display > Add New > select the themes you want applied to that library system > Save

These changes will be applied instantly.

To allow users to choose a Dark Mode option for your catalog, you can experiment with making your own OR you can import a pre-created Dark Mode theme from the Aspen community. To use the Aspen community version:

First, check your permissions in System Administration > Permissions.

You will need the Import Content from the Community permisison under Community Sharing:

You can also search for these and you might be interested in both of these related permissions:

• Share Content with Community - Controls if the user can share content with other members of the Aspen Discovery Community they are connected with.
• Import Content from Community - Controls if the user can import content created by other members of the Aspen Discovery Community they are connected with.

Next, go to Aspen Admin > Themes & Layout > Themes > Import Community Content

This will pop up a modal with all available themes from the community.

Select which theme you'd like and select Import.

You will see in the Description things like "provided by ByWater Solutions" or other library

This will pop you into the theme to make adjustments.

You can change the Theme Name (internal) and/or the Display Name (what displays to patrons)

Make sure you also upload any logos.

You may have to make adjustments to your logo depending on the colors to match the dark mode theme using a free online design tool like Canva.

Next, you would need to apply the theme to any libraries you want this theme available to and click save.

Now users will be able to have access to a dark mode theme when they are logged out and logged in!

Once the dark theme is selected, the changes will be applied instantly.

Adding Custom CSS

1. Visit  Theme & Layout → Themes.
2. Scroll down to the Additional CSS text box and paste in your CSS code.
3. By default, the Additional CSS Application option is set to Append to parent CSS. If your changes do not appear, you may need to switch this to Override parent CSS. For most purposes, Append to parent CSS should be fine.

Repeating Background Image

To add an image as your background, upload one in Aspen by going to Aspen Administration > Web Builder > Images.

Once the image is added, you’ll need the URL. In your uploaded image, click View image and copy the URL. Your URL should look something like:
https://yourlibrarysite/WebBuilder/ViewImage?id=1

Then, all you need to do is plug that URL into this CSS code into your Theme:

/*Add repeating background image*/
body {
background: url(INSERT YOUR IMAGE URL HERE);
}

This will give you a repeating image as your background:

Scrolling Background Image

If you have an image that you don’t want to repeat, but would like to have it scroll with the page, you can use this CSS code:

/*Add scrolling background image*/
body {
background: url(INSERT YOUR IMAGE
URL HERE);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

To round your browse categories, go to Aspen Administration > Theme & Layouts > Theme > Additional CSS and add:

/*Rounded Browse Category Buttons*/
div.jcarousel>ul>li{border-radius: 7px;}

horizontal-menu-bar-container {
padding: 0 !important;
}

To change icons in Explore More, first decide what image(s) you want to use. Upload the image(s) in Web Builder > Images > Upload and then View Image > copy the Image URL to plug into the code below.

To target icons in Explore More box, add this CSS to Aspen Administration > Theme & Layout > Themes > click into your library > Additional CSS 

Library Symbol for Lists and Catalog Results:

img[src*="/library_symbol.png"] {content: url(https://{YOURASPENURL}/WebBuilder/ViewImage?id={IMAGENUMBER});
}

Web Page Image:

img[src*="/webpage.png"] {content: url(https://{YOURASPENURL}/WebBuilder/ViewImage?id={IMAGENUMBER});
}

Note: To find an image src* =, In Explore More, right click > Inspect and see the image default name.

/*  REMOVE BACKGROUND COLOR FROM SYSTEM MESSAGE  */
#system-message-header {
background-color: transparent;
}

To remove the the background color (default is a light blue) from your Self Registration form, you can add this code snippet to Aspen Administration > Theme & Layout > Theme > Additional CSS:

#selfRegDescription {
background-color: transparent;
}

Change placard color for all placards

.placard {
background-color: #FFFFFF;
}

Change placard color for individual placard

would need the specific id of that placard

div#placard1.placard {
background-color: #FFFFFF;
}

/**** Change color of Add to List button ****/

button.btn.btn-sm.btn-tools.addToListBtn {
background-color:#68ffea;
}

*-- Change Color of grouped work display background -- *
.row.related-manifestation.grouped {
background-color:#68ffea;
}

.row.related-manifestation.grouped .row.displayed.striped-odd {
background-color:#68ffea;
}

To hide the divider lines between facets in the facet panel, you can add this code in Aspen Administration > Theme & Layout > Themes > Additional CSS

/*Remove lines from facet panels*/
.facetTitle {
border-top: none;
border-bottom: none;
}

/*Remove lines from other side-bar
panels*/
.sidebar-links .panel-heading {
border-top: none;
border-bottom: none;
}

If you want to use the Full Header and Footer but don't want your logo and menus to shift, you can use this CSS snippet in your theme:

Note: The hex code in the background: transparent linear-gradient section (in this code it is #000000) should be set to whatever your Primary Background Color is.

The line of the footer color matches the Tertiary Background Color.

*** - Full header and footer without shifting - ****

#horizontal-search-container:before {
content:"";
background: transparent linear-gradient(270deg, #000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
width: 200vw;
position: absolute;
margin-left: -50vw;
height: 100%;
z-index: -1;
overflow-x: hidden;
}

div#page-header.container-fluid {
width: 80%;
margin: auto;
}

div#page-menu-bar.container-fluid {
width: 80%;
margin: auto;
}

div#horizontal-menu-bar-container {
border-bottom-width: 0px;
}

Header:

Footer:

There are some bread crumb customizations available in Theme & Layout > Layout Settings when it comes to controlling Home vs. Browse.

If you'd like to hide all breadcrumbs, you can add this code to the page's Theme > Additional CSS:

.row.breadcrumbs { display: none; }

Page Background Color

Seen here on the sides in hot pink. 

Body Background Color

Seen here in lime green behind the browse category covers.

Seen here in lime green behind the catalog records display.

Body Text Color

Seen here in red. 

Link Color

Seen here in red.

Link Hover Color

This is the color of the hyperlinked text when you hover over the Link Color. In blue is the Link Color (display text color) and then the Link Hover Color is set to purple in this screenshot to show you how it changes when hovered over.

Result Label Color

Seen here in red.

Result Value Color

Seen here in purple. This is the non-hyperlinked text in the result display.

Header Background Color

Seen here in hot pink. 

Typically this would be white and/or matching the background of your logo.

Header Text Color

In Aspen Administration > Primary Configuration > Library Systems > if you have Show Display Name in Header checked then the library system name will show in the header in this text color. 

Seen here in red.

Breadcrumbs Background Color

Seen here in lime green.

Breadcrumbs Text Color

Seen here in red.

Search Tools Background Color

If you are using the classic/legacy Search Tools box at the bottom of the page, this controls this background color. Seen here in red.

Search Tools Text Color

Seen here in red.

Search Tools Border Color

The box around the search tools box.

Footer Background Color

Seen here in hot pink.

Footer Text Color

Seen here in black.

Primary Background Color

Seen here in red. 

Will also be the background color of the Explore More box header and outline. Seen here in red.

The "white" portion of the Explore More box is your Primary Background Color at 30% opacity.

Primary Text Color

Must pass the contrast ratio with the Primary Background Color.

The default magnifying glass color in the search box is white.

The default text in the search bar dropdown menus are dark gray: #333333.

The Primary Text Color will also be in the text of the Explore More box. Seen here in white.

Secondary Background Color

Secondary Background color is used when generating default covers. Seen here in purple. 

It will also become a theming option for rows when using Web Builder. 

By default, what you pick for Secondary Background Color also changes what is set in Closed Panel Background Color.

Closed Panel Background Color controls the closed facets as well as the menus within the detailed record display and the Admin modules.

You can also change the Closed Panel Background Color separately toward the bottom in Panels > Closed Panel Background Color.

Secondary Text Color

This color must pass the contrast ratio with the Secondary Background Color.

Tertiary Background Color

Seen here in lime green.

The tertiary background color is also the background color of the Up Arrow.

Tertiary Text Color

The tertiary text color is the color of the Up Arrow and must pass the contrast ratio with the Tertiary Background Color.

At the bottom of your Theme settings, you'll find an expandable section called Menu.

Menu Background Color

Seen here in hot pink.

Menu Text Color

Seen here in red.

Menubar Highlight Background Color

Seen here in purple.

Menubar Highlight Text Color

Text seen here in silver/gray.

Menubar Dropdown Background Color

Seen here in light pink.

Menubar Dropdown Text Color

Seen here in dark red.

At the bottom of your Theme settings, you'll find an expandable section called Browse Categories.

 Browse Category Panel Color

Seen here in red.

Selected Browse Category Background Color

Seen here in lime green.

Selected Browse Category Text Color

Text seen here in black.

Selected Browse Category Border Color

Border around the selected browse category seen here in purple.

Deselected Browse Category Background Color

Seen here in teal.

Deselected Browse Category Text Color

Text seen here in black.

Deselected Browse Category Border Color

Border around the deselected browse categories seen here in blue.

The Tabs menu includes colors related to the tabs in the Account > Checked Out Titles and Titles on Hold.

The default colors are:

To show which each of these colors relate to, we adjusted them for this example.

The Inactive Tab Background Color are the tabs that are deselected. Seen below in pink.

The Inactive Tab Text Color relates to the color within the number circle. Seen below in white.

The Active Tab Background Color is the default All tab and any tab you are hovering over. Seen below in green.

The Active Tab Text Color relates to the color of the number circle. Seen below in black.

Layout Settings

 

Aspen Discovery provides you with a pre-loaded default setting. If you are a single library or library system sharing one catalog, one layout setting is likely all you will need. If you ever create additional layout settings, make sure that your new layout setting is assigned to your Library System settings by going to Primary Configuration > Library Systems > edit your setting > Basic Display > Layout Settings, then select the appropriate setting profile.

---

 

Layout Settings in a Consortium

If your instance of Aspen contains multiple scoped catalogs, you can handle layout settings in a few different ways, but ultimately it's up to your consortium and what works best for you and your member libraries. Here are a few options based on common scenarios:

 

1. Maintain one layout setting that will be used by all members of the consortium. 

2. Create a layout setting for each scoped catalog, so everyone has complete control over their own layout settings.

3. Create a few different layout setting options and name them based on their configuration. Then, assign these settings to the individual libraries based on the configuration they want for their discovery layer. Example:

 

 

If creating multiple layout settings, make sure that the appropriate layout settings are assigned to the individual libraries by going to Primary Configuration > Library Systems > edit setting > Basic Display > Layout Settings, then select the desired layout setting profile.

Home Icon

1. Visit  Theme & Layout → Layout Settings and click into the appropriate settings.
2. Click the checkbox next to "Use Book icon instead of Home icon for catalog home link"
3. Save your changes.

Home Link

Use Home Link for Logo:

 

 

Use Home Link for Breadcrumbs, Menu, and Logo: The specified Home Link will apply to all of the above.

 

Do not use: If specified, a Home Link will not be used for any of these elements. Instead, they will link to the main page of your catalog.

---

 

Breadcrumb Link Text

This changes the text of the breadcrumb links. For example, if you're using your library website in the Home Link in library system settings, you might want to make these labels more descriptive. Instead of "Home," you might want the link to say "Library Website." Instead of "Browse," you could change it to "Browse the Catalog" or "Catalog."

 

---

 

Show Library Hours and Locations Link

 

Check this box to show a link to the Library Hours and Locations page within the account menu, as shown below. 

If you don't want to show the Library Hours and Location link, make sure this box is unchecked.