Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Customize the Soliloquy Lightbox

Soliloquy is highly customizable with CSS, including the Soliloquy Lightbox. In this example we’ll reposition some of the lightbox elements to display the thumbnails beside the main image.

Note: This document is relevant only if you have a Developer or Master license and you’re using the Lightbox Addon.

The Soliloquy lightbox can be easily customized using CSS to reposition and restyle the various elements.

First, we need to configure our slider’s settings as follows:

  • Enable the Lightbox for your slider.
  • Set the Lightbox Title Position to ‘Over’.
  • Enable Lightbox Arrows for your slider.
  • Enable Lightbox Thumbnails, and specify the desired dimensions. In this demo the thumbnails are set to 75 x 75 pixels.

For our demo of customizing the Soliloquy lightbox there are a few essential settings we want to enable.

Next, we’ll use CSS to reposition and style each element in the lightbox. To modify all lightboxes on your site be sure to add the CSS to your active theme’s style.css file.

.soliloquybox-overlay-fixed, .soliloquybox-wrap, .soliloquybox-skin, .soliloquybox-outer, soliloquybox-inner { height: 100% !important; width: auto !important; }
.soliloquybox-wrap {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 60% !important;
  height: 100% !important;
  padding: 20px 0 20px 20px !important
}
.soliloquybox-skin {
  background: none !important;
  border-radius: 0 !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.soliloquybox-outer { background: #000 !important; }
.soliloquybox-inner {
  height: 100% !important;
  width: auto !important;
  margin: auto !important;
  text-align: center !important;
}
.soliloquybox-image {
  height: auto !important;
  width: auto !important;
  max-width: -webkit-calc(100% - 109px) !important;
  max-width: -moz-calc(100% - 109px) !important;
  max-width: -o-calc(100% - 109px) !important;
  max-width: calc(100% - 109px) !important;
  margin: auto !important;
}

/* Thumbnails */
#soliloquybox-thumbs {
  top: auto !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: 40% !important;
  height: 100% !important;
  padding: 20px 20px 20px 0 !important;
}
#soliloquybox-thumbs ul {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  text-align: center !important;
  padding: 15px !important;
  background: #fff !important;
  overflow: scroll;
}
#soliloquybox-thumbs ul li {
  float: none !important;
  display: inline-block !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 2px !important;
  background: #fff !important;
}
#soliloquybox-thumbs ul li a {
  border: none !important;
  background: none !important;
}
#soliloquybox-thumbs ul li.active {
  border: 1px solid #000 !important;
}

/* Close Icon */
a.soliloquybox-close {
  top: 0 !important;
  right: 0 !important;
  background-color: #333 !important;
  height: 55px !important;
  width: 55px !important;
  background-image: none !important;
  opacity: 1;
  display: table !important;
  text-align: center !important;
}
a.soliloquybox-close:before {
  content: '\00d7';
  color: #666;
  font-size: 40px;
  font-family: serif;
  vertical-align: middle;
  display: table-cell;
}

/* Navigation */
.soliloquybox-nav span {
  visibility: visible !important;
  width: 55px !important;
  top: 0 !important;
  margin: auto !important;
  background-color: #aa8420 !important;
  background-image: none !important;
  height: 100% !important;
  display: table;
  text-align: center;
  opacity: 1;
}
.soliloquybox-next span { 
  right: 0 !important;
  height: -webkit-calc(100% - 55px) !important;
  height: -moz-calc(100% - 55px) !important;
  height: -o-calc(100% - 55px) !important;
  height: calc(100% - 55px) !important;
  top: 55px !important;
}
.soliloquybox-prev span { left: 0 !important; }
a.soliloquybox-close:hover,
.soliloquybox-nav:hover span {
  opacity: 0.7;
}
.soliloquybox-next span:before,
.soliloquybox-next span:after,
.soliloquybox-prev span:before,
.soliloquybox-prev span:after {
  display: table-cell;
  vertical-align: middle;
}
.soliloquybox-next span:after {
  content: '2192';
  width: 100%;
  left: 0;
  font-size: 45px;
  color: rgba(255,255,255,0.5);
}
.soliloquybox-prev span:after {
  content: '2190';
  width: 100%;
  left: 0;
  padding-top: 55px;
  font-size: 45px;
  color: rgba(255,255,255,0.5);
}

/* Lightbox Title / Caption */
.soliloquybox-title.soliloquybox-title-over-wrap {
  width: -webkit-calc(100% - 109px);
  width: -moz-calc(100% - 109px);
  width: -o-calc(100% - 109px);
  width: calc(100% - 109px);
  left: 55px;
}

To modify the navigation background color change the HEX value on line 101 as desired.

That’s it, you now have a Soliloquy Lightbox that displays the thumbnails inline with the main image and a new navigation arrow style. You can use this as a place to get started customizing your own lightbox styling.

[i]
[i]