Adding a gallery box to a guide

What is a gallery box?

You can create galleries of images, books, databases, guides, and/or LibCal Events using the Gallery box type. It's easy to set up, you can mix and match any of the mentioned content items, and control settings like slide/transition speed, number of slides that appear at once, navigation dots, captions, and more.

The Gallery box was built with accessibility in mind, though (as with most other areas of the system) exactly how accessible it remains largely depends on what's added. For example: the box is accessible via keyboard and screen reader; an Alt Text field is available for all images; the left / right arrows on the box (to denote navigation between slides), dots (also denoting navigation / more slides), and captions do not overlap images.

What are slides?

A slide is simply one of the items you add to the Gallery box. It could be a combination of an image and text, using one of the following items:

  • an Image,
  • a Book from the Catalog asset,
  • a Database asset,
  • a Guide screenshot,
  • an Event from LibCal.
Example of a Gallery box with 2 rows of slides, 3 slides per row, no captions.

Using the various settings in the Gallery box, you can also have several slides appear at once, in one row or in many. You could also have the transition of slides start automatically, or not -- there are many options for configuring the box just the way you want it.


Adding a gallery box

  1. While editing your guide, click on the page you want to edit in your guide's navigation menu (i.e. tabs or side-navigation).
  2. Click the Add Box link at the bottom of the column where you want the box to go. For example, to add a box to Column 2, click on Add Box - Column 2.
  3. In the Add New Box window, enter the title for your box in the Box Name field.
    • This will display in the box's heading.
    • If displaying the box-level navigation in a side-navigation guide, it will also display in the list of boxes for the current page.
  4. Select Gallery from the Type dropdown.
  5. From the Position dropdown, select where in the column the new box should be added. You can add it to the top, bottom, or following any box in the column. (Don't worry: you can always reorder the boxes later.)
  6. If you would like to display the box without any borders, padding, or heading on the public view of your guide, select the Floating Box checkbox.
    • While editing your guide, the box will still display with borders and a heading. The only difference is that you'll see the Floating Box () icon appear in the heading.
    • However, when previewing or viewing the public view of your guide, the borders and heading will be hidden.
  7. If you would like to hide this box from public view until its ready, select the Draft Mode checkbox.
    • While enabled, you can only view the box while editing the guide. It will not be visible on the public guide, or while previewing the guide.
    • Note: if your system has the Publishing Workflow (CMS-only) enabled, only a designated reviewer can take a hidden box out of draft mode.
  8. Click the Save button.

Clicking the Add Box link

Adding a new gallery box


Customizing the look of your boxes

One way to customize the appearance of your guides is by customizing the styles and colors of your content boxes. Want border-less boxes? Squared corners instead of rounded? Blue box headers instead of gray? These are just a few things you can do in your guide's Tab & Box Options. Tab & Box options can be set at three levels:

  • Admin users can customize the default Tab & Box Options for all guides in your system. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Group admins can customize the default Tab & Box Options for all guides in their group. To prevent users from deviating from these colors, admins can also lock every guide into those defaults. This can help maintain a uniform look and feel throughout your LibGuides site.
  • Guide owners and editors (and all admins) can customize the Tab & Box Options for individual guides. Admins have the ability to force each guide to use the same tab and box styles. If that's the case, then a guide's Tab & Box Options will be disabled.

CSS map for a gallery box

Diagram of a gallery box


Pointer - section 1

The entire box:

.s-lib-box: use this class to target all boxes in your guides

Tip: Remember, if you want to change the border color or width, you can do this in your look & feel settings!

Default CSS:

.s-lib-box {
  border-color: #cccccc;
  border-width: 1px;
  box-shadow: 0 8px 6px -6px #AAAAAA;
  border-radius: 4px 4px 4px 4px;
  background-color: #fff;
}

Pointer - section 2

The box header and title:

.s-lib-box .s-lib-box-title: use these classes to target your box headings

Tip #1: Remember, if you want to change the header background color or the font color, you can do this in your look & feel settings!

Tip #2: If you decide to hide your box titles, we suggest that you check the "Do not include this code on guide edit page" check box on your Custom JS / CSS page.

Default CSS:

.s-lib-box .s-lib-box-title {
  background-color: #f1f1f1;
  background-image: none;
  color: #888;
  border-bottom: 1px solid #cccccc;
  border-radius: 3px 3px 0px 0px;
}

Pointer - section 3

Gallery box area:

.s-lib-box-content : this class targets the gallery's "container", which houses the slide's content and navigation.

.slick-slider: this sets the margins & positioning for the slide's content.

.slick-initialized .slick-slide: this element contains the visible slide's image, title, and details.

.slick-slide a img: this code targets each image when the image has a link.

.slick-slide img: this code targets each image when the image does not have a link. It's best to use this code in tandem with .slick-slide a img.

Default CSS:

.s-lib-box-content {
  padding: 10px;
}

.slick-slider {
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-slide img {
  display: block;
  max-width: 100%;
  width: 100%;
}

Pointer - section 4

Navigation arrows:

.slick-prev, .slick-next: these are the gallery's left and right navigation arrows, respectively.

Default CSS:

.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev {
  left: -20px;
  z-index: 2;
}

.slick-next {
  right: -25px;
  z-index: 2;
}

Pointer - section 5

Slide text:

.slick-slide .s-lib-cpane-caption: this class targets both the Slide Title (the larger text) and the Slide Details (the smaller text).

.s-lib-cpane-caption h3: this will target the Slide Title only.

.s-lib-cpane-caption p: this will target the Slide Details only.

Default CSS:

.s-lib-cpane-caption {
  padding: 10px;
  width: 100%;
  display: block;
  vertical-align: top;
}

Pointer - section 6

Slide indicators (dots):

.slick-dots: this class targets the whole section of indicator dots.

.slick-dots li: this set's the positioning and margins of each dot (this element contains the dot, which is a button element).

.slick-dots li button: this targets each individual indicator dot.

.slick-active button: this targets the indicator dot of the current slide.

Default CSS:

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

Want to target one box? Click on the icon and grab the box ID! Then use that number to create the HTML ID.
Ex. If your box ID is 123, use #s-lg-box-123 in your CSS!
If you want to target a specific part of that box - like the box header - just combine the ID with the code above.
CSS code example:
#s-lg-box-123.s-lib-box .s-lib-box-title {
  background-color: #ff0099;
}

Related Articles