There are many ways you can customize a LibGuides A-Z interface with the new 2023/2024 design. Here are a few examples from PALNI libraries.
To add custom CSS for your A-Z lists, use the LibGuides menu at the top of the screen and click on "Content > A-Z List Management > System Settings > Pages Look & Feel > Custom JS/CSS > Custom CSS.
First, you can remove the secondary introductory block of text from the top of the page.
<style>
/* Remove the second block of text from the page */
#s-lib-public-header-desc {
display: none;
}
</style>
Before:
After:
Next, you can add a custom color for the navigation bar.
<style>
/*Custom color for nav bar*/
#az-search-col-1>nav {
background-color: #006838;
}
</style>
Before:
After:
Next, you can increase the font size in the Nav bar.
<style>
/*increase font size in search/dropdown*/
.s-lg-az-search::placeholder, .select2-container--bootstrap5 .select2-search.select2-search--inline .select2-search__field::placeholder, .select2-selection__choice__display, .select2-container--open, .select2-container, ul.select2-results__option, ul.select2-results__options {
font-size: 14px !important;
}
</style>
Before:
After:
You can also customize the colors of the buttons used on the page. Note: "background-color" is the color of the button, "border-color" is the color of the border, and "color" is the color of the font.
<style>
/*Custom colors for Search button*/
#s-lg-az-filter-cols .btn-primary {
background-color: #AD972B;
border-color: #AD972B;
color: #000000;
}
#s-lg-az-filter-cols .btn-primary:hover {
background-color: #8e7c23;
border-color: #8e7c23;
color: #000000;
}
/*Custom colors for Filter button*/
#s-lg-az-filter-cols .s-lg-az-reset {
background-color: #AD972B;
border-color: #AD972B;
color: #000000;
}
#s-lg-az-filter-cols .s-lg-az-reset:hover {
background-color: #8e7c23;
border-color: #8e7c23;
color: #000000;
}
</style>
Before:
After:
Finally, you can customize the color of the A-Z navigation letters.
<style>
/*add color to AZ alphabet filters (the sorting letters at the top) */
#s-lg-az-index button {
color: #006838;
}
</style>
Before:
After:
Want to use all of this CSS? Here's a text file with all of the pieces of CSS on this page.