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.
Hi- When will the new look and feel be ready for guides?
Thanks!
Ann Kaste
Hi Ann,
We are actively exploring versions of LibGuides that would use Bootstrap 5. That said, we are still in the research & development stage, which can be subject to change, so we don’t have any dedicated timeframes to share with the community just yet. Keep an eye out here for updates to come!
Best,
Springy Kirsten