Adventures in CSS: Changing the way LibGuides gallery boxes display

We weren’t happy with the default way that LibGuides displayed labels and captions on the images in Gallery boxes, so I started tinkering with the CSS. We didn’t want the labels and captions to be white, and we didn’t want them to be on top of the images in the gallery. And we didn’t like the font sizes. So I fired up the Web Developer extension and started poking away, figuring out how the original CSS worked and what I could over-write to make some changes.

I don’t know that I would have made it too far without help from people who responded to my plea for help from the Library Society of the World, but in the end a few lines of CSS shifted the label and caption fields down below the images, and shifted the navigation buttons up above the images where they could be in a consistent spot no matter what size the image.

If you’d like to do something similar, go into the Custom CSS area of LibGuides and add the following:

<style>

.carousel-caption {position: relative; text-align: left; left: 2%; color: #5C5757 !important; text-shadow: 0 0px 0px rgba(0,0,0,.6); padding-top: 20px; padding-bottom: 0px;}
.carousel-caption h4 {font-size:16px;}
.carousel-caption p {font-size:12px; margin-bottom: 1px;}

.carousel-indicators {position:relative; margin-top: 20px; margin-bottom: -10px;}
.carousel-indicators .active {background-color: #5C5757;border: 1px solid #fff;}
.carousel-indicators li {background-color:#fff; border: 1px solid  #5C5757;}

.carousel-control.right {background-image: none;}
.carousel-control.left {background-image: none;}
.carousel-control {color: #000; margin-top: -25px;}

</style>

And if you come up with great ideas for tweaks beyond this, I’m all ears!