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.
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.
Scroll to the bottom and click Save Changes and Stay Here.
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.
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.
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.
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:
Visit Theme & Layout → Themes.
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.
You can also change colors by manually typing in the RGB values or pasting in the hex color code, if known.
To grab colors from a logo or another image, use the eyedropper tool.
When finished making color adjustments, save your changes at the bottom of the screen.
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).
Scroll to the Font section. (Tip: Use the CTRL + F shortcut to search for "Font" within the page for easier navigation.)
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.
To upload custom fonts, click the Select a font button under Custom Heading Font or Custom Body Font and choose your font files.
Scroll to the bottom of the screen and save your changes.
To remove a previously uploaded custom font, click the Remove checkbox underneath your uploaded file and save your changes.
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
Some basic footer customizations are available in Aspen Administration > Theme & Layout > Themes.
These include:
Footer colors
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.
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.
To customize these icons, go toAspen 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 likeCanvato 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 theExtends Themecolumn.
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 onAdd Newto 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 clickBatch Update Selectedor selectBatch Update All.
From the dropdown, select Field to Update -Extends Themeand 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.
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.
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.
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.
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 toAspen 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.
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.
Visit Theme & Layout→ Themes.
Scroll down to the Additional CSS text box and paste in your CSS code.
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.
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:
If you'd like to have a moving banner/gif then you can host the gif at a URL outside of Aspen. One way to do this is by uploading the gif to GitHub in a public repository.
Once the URL is generated, add this CSS to Aspen Administration > Theme & Layout > click into the theme > insert this code into the Additional CSS box and swap out the hosted URL:
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:
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.
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.
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.
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."
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 inAspen 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:
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.