Theme Settings

 

theme icon

With these settings, you can:

  • Change colors for the entire interface
  • Upload your library's logo, favicon, and logo for Aspen LiDA
  • Add a footer image
  • Change the heading and body fonts, or upload your own
  • Add CSS to customize your site

Use Themes settings to customize the look of your entire Aspen Discovery site. Aspen Discovery provides you with a pre-loaded default theme. If you are a single library, one theme is likely all you will need. For help managing themes within a cooperative or consortium, click here.

 

 

Display Name v. Theme Name

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.

 

Updated 2023-04-18 km bws
Add a Logo

Adding a Logo

  1. Visit  Theme & LayoutThemes.
  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 recommended size is 250px x 100px. If you want a larger banner image, the maximum recommended size is 1140px x 225px

 

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!

 

Add a Favicon

Adding a Favicon

 
A favicon is a small icon that appears on the tab in the web browser.
 
themes_favicon
 
  1. Visit  Theme & LayoutThemes.
  2. Under Favicon, click Select an Image. The image must be 32px x 32px.
  3. Select your favicon image and click Open.
  4. Scroll to the bottom and click Save Changes and Stay Here.
  5. You should now see your favicon in the browser tab.
Upload Background Image for Default Covers

What Are Default Cover Images?

When Aspen cannot find a cover from one of its many sources, it will auto-generate a cover based off of the library's theme with a variety of shapes and lines.

These covers will look something like this:


 

Replace Default Cover Image With Custom Image 

In Aspen, you can apply a custom image to the lower half of all of the default covers instead of the auto-generated image.

To do this, go to Aspen Administration > Theme & Layout > Themes > click into the theme you want to apply this too > Background Image for Default Covers > Upload an image and save.

We recommend an image of 280x280px. Images in the covers will automatically resize depending on the screen size.

You can use free design software like Canva to create a custom size.

This is a great way to apply library branding throughout the catalog.

 

Once you upload your logo, you may have to do a hard refresh on your catalog page to force a reload of your cover images. 

To perform a hard rerefesh:

  • On Mac: Command + Shift + 'R' key
  • On a PC: Shift + F5
  • Or, hold the shift key while clicking the Reload button on your browser.
  • Right click and select Reload

Once reloaded, you will see your cover images applied:

If you use a smaller image and do not fill the entire 280x280 space, there will be a white background behind your image. 


Remove the Default Cover Image 

To remove the image and go back to the default autogenerated image at any time, go back into your Theme settings and remove the uploaded Background Image for Default Covers. When you do a hard refresh again, the covers will return to the default cover image based on your theme.


Add Same Custom Cover Image to Multiple Catalogs at Once

For consortiums using Aspen, you may want to apply the same custom cover image to multiple or all catalogs at once.

To do this, you can utilize an existing default theme or create a new one. You may already be using a theme that you are extending for things like footers, favicons, base colors, or CSS. This theme is often labeled 'default'.

If you are already using this, you'll likely find this theme repeated in the Extends Theme column.

If you are unsure, you can try searching your themes.

 

 

 

If you don't see a custom or default theme, simply scroll to the bottom and click on Add New to create a new theme.

In the default theme, upload the custom cover icon following the instructions above.

Once you have the icon uploaded, either select libraries and click Batch Update Selected or select Batch Update All.

 

 

From the dropdown, select Field to Update - Extends Theme and Extends Theme - select the theme you uploaded the formats icons into from the dropdown > Update. 

Now, check your library catalogs to confirm the format icons are showing.

 

 

 

 

Updated 2023-07-12 km bws
Change Colors

Click Here to View Theme Color Settings


Change Colors

 
The theme colors that will have the most impact on the overall look of your site are the Primary, Secondary, and Tertiary Background colors, the Menubar colors, and the Browse category colors.
 
 
 
 
 
 
However, almost all colors within the Aspen interface can be customized with these settings, so be sure to explore the other color menus and experiment!
 
 

 
 

To change theme colors:

 
  1. Visit  Theme & LayoutThemes.
  2. Change the color for an interface component by clicking the color box for that component. This will open a drop-down color selector tool. Drag the slider to adjust hues. Click and drag to adjust the color saturation.

themes_colorslider 

 

  1. You can also change colors by manually typing in the RGB values or pasting in the hex color code, if known.
  2. To grab colors from a logo or another image, use the eyedropper tool.

 

themes_eyedroppertool

 

  1. When finished making color adjustments, save your changes at the bottom of the screen.

 

Contrast Ratio
The Contrast Ratio column will help you decide on background and text color combinations that are legible to your users. The higher the contrast ratio, the better! Combinations with an acceptable contrast ratio will appear in green.
 
 
 
 
If your color combination does not have enough contrast, the ratio will appear in red and Aspen will not allow the changes to be saved.
 
 
By default, the Contrast Ratio scale is set in Theme & Layout > Layout Settings to 4.5 (Default, WCAG 2.0 AA compliance) but you can change it to 7.0 (WCAG 2.1 AAA compliance).
Change Fonts

 

  1. Visit  Aspen Administration > 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.

 

themes_selectafont

 

  1. To upload custom fonts, click the Select a font button under Custom Heading Font or Custom Body Font and choose your font files.
  2. Scroll to the bottom of the screen and save your changes.
  3. To remove a previously uploaded custom font, click the Remove checkbox underneath your uploaded file and save your changes.
Change the Cover Image Style

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

Make the Header and Footer Full Width

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

Add a Header Background Image

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

 

2023-02-08 md bws
Add a Footer Image

Adding a Footer Image

 

  1. Visit  Theme & LayoutThemes.
  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.

Add Text to Footer

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

These include:

  • Footer colors

 

 

 

When saved, images or text will show here:

 

Upload Custom Format Category Icons

These are the default format category icons that display in Aspen. Learn more about the format icons here.

 

To customize these icons, go to Aspen Administration > Theme & Layout > Themes > click into Theme > Format Category Icons

There is a recommended size of 50x50 px for these icons.

It is recommended to have your icons have a transparent background and generally .png and .svg are the highest quality images.

You can use free design software like Canva to create a custom size and download icons.

You will need to upload two files for each icon, one for when the icon is not selected and one for when it is selected.

 

Once uploaded, if you refresh the page, you should see the icons uploaded.

You may want to check on the icons by clicking on them to make sure both your images are showing.

 

 

Add Format Icons to Multiple Themes

For consortiums using Aspen, you may want to apply a custom set of icons to multiple or all catalogs at once.

To do this, you can utilize an existing default theme or create a new one. You may already be using a theme that you are extending for things like footers, favicons, base colors, or CSS. This theme is often labeled 'default'.

If you are already using this, you'll likely find this theme repeated in the Extends Theme column.

If you are unsure, you can try searching your themes.

 

 

If you don't see a custom or default theme, simply scroll to the bottom and click on Add New to create a new theme.

In the default theme, upload the format icons following the instructions above.

Once you have the icons uploaded, either select libraries and click Batch Update Selected or select Batch Update All.

 

From the dropdown, select Field to Update - Extends Theme and Extends Theme - select the theme you uploaded the formats icons into from the dropdown > Update. 

Now, check your library catalogs to confirm the format icons are showing.

 

 

 

Updated 2023-07-10 km bws
Upload Custom Explore More Images

These are some examples of the default Explore More icons that display in Aspen. Learn more about Explore More here.

To customize these icons, go to Aspen Administration > Theme & Layout > Themes > click into Theme > Explore More Images

There is a recommended size of 400x400px for these images.

It is recommended to have your images have a transparent background and generally .png and .svg are the highest quality images.

You can use free design software like Canva to create a custom size and download icons.

Add Explore More Images to Multiple Themes

For consortiums using Aspen, you may want to apply a custom set of icons to multiple or all catalogs at once.

To do this, you can utilize an existing default theme or create a new one. You may already be using a theme that you are extending for things like footers, favicons, base colors, or CSS. This theme is often labeled 'default'.

If you are already using this, you'll likely find this theme repeated in the Extends Theme column.

If you are unsure, you can try searching your themes.

 

 

If you don't see a custom or default theme, simply scroll to the bottom and click on Add New to create a new theme.

In the default theme, upload the Explore More images following the instructions above.

Once you have the icons uploaded, either select libraries and click Batch Update Selected or select Batch Update All.

 

From the dropdown, select Field to Update - Extends Theme and Extends Theme - select the theme you uploaded the formats icons into from the dropdown > Update. 

Now, check your library catalogs to confirm the format icons are showing.

 

Updated 2023-10-17 km bws
Copy a Theme

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.

 

Updated 2023-04-17 km bws
Create a High Contrast Theme

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.

 

 

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.

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.

After browsing, select a theme and click Import.

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.

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.

 

Updated 2023-04-24 km bws
Create a Dark Mode Theme

To allow users to choose a Dark Mode theme 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 Community permisison under Community Sharing:

You can also optionally select this related permission:

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

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

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

Select which theme you'd like and click Import.

The imported theme will appear in your Theme settings where you can make adjustments.

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

Make sure to upload a Dark Mode version of your logo(s) to this theme as well. 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, apply the dark mode theme to desired libraries/locations and save.

Now users will have access to a dark mode theme! This can be accessed by clicking Languages and Display in the top-right corner and/or from the Your Preferences section of the user account.

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

 

Updated 2023-04-18 km bws
Apply Multiple Themes to a Catalog

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.

Aspen will keep the theme created first as the default theme. That theme should be sorted to the top/first in the list of Themes. To set a different theme as the default theme, sort it to the top.

 

Updated 2023-09-12 km bws
Custom CSS

Adding Custom CSS

Users can add custom CSS to fine-tune the way your catalog looks. If an element exists in the Aspen interface and is not adjustable within the standard Theme settings, chances are you can customize it with 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.
Add Background Logo

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;
}
Round Browse Categories

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;
}

Remove Background Color from System Message
/*  REMOVE BACKGROUND COLOR FROM SYSTEM MESSAGE  */
#system-message-header {
background-color: transparent;
}
Remove Background Color From Self Registration Form

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 Colors

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
/**** Change color of Add to List button ****/

button.btn.btn-sm.btn-tools.addToListBtn {
background-color:#68ffea;
}
Change Color of Grouped Work Format Background
*-- 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;
}
Hide the Divider Lines Between Facets in the Facet Panel

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;
}

Hide Breadcrumbs

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; }

Theme Setting Definitions

General: "Page Background Color" through "Header Text Color"

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.


 

Seen here in red.


 

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


 

Seen here in hot pink. 

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


 

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.

General: "Breadcrumbs Background Color" through "Footer Text Color"

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.

General: "Primary Background Color" through "Tertiary Text Color"

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 >


 

Secondary Text Color

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


 

 Color

Seen here in lime green.

 

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


 

 Color

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

 

2023-04-11 md bws
Menu

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.

Browse Categories

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.

Tabs

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.

 

 

Updated 2023-05-05 km bws

 

Layout Settings

 

Layout icon

With these settings, you can:

  • Set the linking behavior of your logo image
  • Change the icon for your catalog's Home Link
  • Change the breadcrumb text
  • Toggle the Library Hours and Locations link on or off
  • Adjust the minimum contrast ratio for theme colors

  

Use Layout settings to customize how certain elements of your interface behave.
Aspen Discovery provides you with a pre-loaded default theme. If you are a single library, one theme is likely all you will need.

  

Layout Settings

Layout Settings

Use Layout settings to customize the how certain elements of your interface behave.

 

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 Link
In Aspen Administration > Primary Configuration > click into the Library System > Basic Display > Home Link, enter a URL - this is typically the URL for the external library website. If not filled in, the default will be your "home" page of Aspen (typically the browse category display page).
You can adjust where Aspen applies this Home Link or disable it completely.

 

Visit  Theme & Layout > Layout Settings and click into the appropriate settings.
Note: To check which set of settings is attached to which catalog, you can go to Aspen Administration > Primary Configuration > click into the Library System > Basic Display > Layout Settings.
Where to use custom Home Link from Library Settings

Within Layout Settings, you have a setting for: Where to use custom Home Link from Library Settings with the following options. 
This relates to the navigation of your header logo, your home icon and breadcrumbs.

Use Home Link in Breadcrumbs and Menu:

This will set the defined Home Link to the Library Home breadcrumb and the Library Home Page link in the hamburger/side menu.

 

 

Use Home Link for Logo:

 

This will have the logo in the header go to the defined Home Link (typically the library website). 

 

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.

 

Use Book icon instead of Home icon for catalog home link
Aspen's interface provides a Home icon to bring users back to the main page of the catalog. By default, this appears as a house.

 

To change the icon to a book:
  1. Visit  Aspen Administration > 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.

 

 

Updated 2024-05-02 km bws
Catalog Home 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.
Show Top of Page Button

In Aspen Administration > Theme & Layout > Layout Settings > click into settings > there is an option for Show Top of Page Button.

This relates to the arrow that helps users quickly navigate from the bottom of the Aspen page to the top. 

Note: Even if enabled, this does not display on tablet and phone devices due to size and accessibility

Note: The color of the arrow is controlled by the Tertiary colors in the Theme settings.

 

Updated 2024-05-02 km bws
Show Dismiss Placard Button Options

Placards can be marked Dismissable when they are created. This allows logged in users to close out the placard if they no longer wish to see it. We recommend this, especially for placards where you have assigned a lot of trigger words that are generic and might cause the placard to show repetively to users. 

By default, the button for dismissal looks like this and displays the text "Don't show this again"

There are additional button options in Aspen Administration > Theme & Layout > Layout Settings:

Changes made here will be reflected immediately.

If you only select Show Dismiss Placard Button in Top Right Corner:

The button will look like this:

If you only select Show Dismiss Placard Button as X (Close) Icon:

The button will look like this:

If you select both Show Dismiss Placard Button in Top Right Corner and Show Dismiss Placard Button as X (Close) Icon:

The button will look like this:

 

Minimum contrast required for themes

In Aspen Administration > Theme & Layout > Layout Settings > click into your setting > there is a Minimum contrast required for themes option.

The default setting is: 4.5 (Default, WCAG 2.0 AA compliance)

The additional option is: 7.0 (WCAG 2.1 AAA compliance)

This relates to the accessibility scale for the Contrast Ratio when setting up your Theme colors and what ratios you need to achieve in order to save your theme.

Video Tutorials