By Kirsten on April 23, 2024
Update Your LibGuides A-Z Look & Feel with Bootstrap 5
LibGuides is built on Bootstrap, a framework of CSS, JavaScript, and HTML. This means you can increase the usability and functionality of your guides with Bootstrap components without extensive web development experience.
We're gradually moving LibGuides pages onto the latest-and-greatest Bootstrap 5-based framework - you've seen this already with last year's refreshed A-Z Database List. Next up: the new Blogs experience will be coming your way very soon!
This upgrade to Bootstrap 5 also brings you exciting Pages Look & Feel settings to allow you to customize the look and layout of these pages. These reworked settings allow you to make content customizations to the page layout, and font stylings (family, style, size, and color) for your text, links, and buttons without needing to add any custom CSS. Plus, you still have the option to add code customizations for even more control over the look and feel of your public pages!
Changing the Color of the A-Z Alpha Filters
While the possibilities for customization are endless, we've created a video to show you just how easy it is to change the color of the sorting letters at the top of your A-Z List, otherwise known as the A-Z alpha filters, using custom CSS.
Use this CSS code to change the color of the A-Z alpha filters on your LibGuides A-Z List:
/*add color to AZ alpha filters aka the sorting letters at the top */
#s-lg-az-index button {
color: #111111;
}
Customizations Galore!
This is just one of the many possibilities when it comes to the CSS customizations you can make on your new LibGuides A-Z List. So get creative and have fun!
For more Bootstrap 5 customization tips for your A-Z List, take a look at this FAQ or check out this training session recording. Plus, join us on Thursday, June 6 at 1pm ET for a live training session all about Bootstrap 5 system settings in LibGuides.