Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Guide to Styling Soliloquy with CSS

The following guide should be used to help you understand how to best style and modify the appearance of Soliloquy. It acts as a general rule for all styling. More specific guides can be found by browsing our styling docs.

If you’re already familiar with using CSS you may be more interested in The HTML Structure of Soliloquy.

Soliloquy ID and Class Structure

Every critical Soliloquy element (such as slider containers, slide items, etc.) has a unique ID and at least one generalized class added to it.

For example, let’s take a look at the outer container of a slider. This is an example of what might be output to your screen:

<div id="soliloquy-container-23" class="soliloquy-container soliloquy-transition-fade soliloquy-fade soliloquy-theme-classic" style="max-width: 1100px; max-height: 314px; height: auto; background-color: transparent; background-position: initial initial; background-repeat: initial initial;>

Notice how the container has a unique ID, #soliloquy-container-23, and some generalized classes (.soliloquy-container, .soliloquy-fade, .soliloquy-theme-classic). The unique ID can be used in your CSS to target that particular slider only, while using a generalized class will apply to any other slider that shares the same class.

Soliloquy Containers

The outermost container is really the only container you need to style and adjust. You can position the slider via this container, add in box shadows and all of that other fun stuff. You can also apply borders to this container to give all of your images the “effect” of having a border. For example, here’s how we could add a border around the slider:

.soliloquy-container { 
  border: 5px solid #000; 
}

IE8 and 9 sometimes cause Soliloquy to display funny if you stick the slider inside a container that has a float applied to it. If this is the case, apply the float to the slider container instead.

IMPORTANT: we no longer provide support for issues that arise in IE8 as Microsoft has ceased supporting this version. We recommend updating your browser if you’re currently using IE8.

Another example is adding a box-shadow effect to the slider. You could do something like this to add a makeshift CSS shadow beneath your slider.

.soliloquy-container { 
  -webkit-box-shadow: 0px 8px 12px -6px #666; 
  -moz-box-shadow: 0px 8px 12px -6px #666;
  box-shadow: 0px 8px 12px -6px #666;  
}

Soliloquy Control Navigation

The control navigation for Soliloquy can be targeted by using the .soliloquy-pager class. That will target the outer element that holds each navigation bullet.

You will want to target this element is you want to reposition your navigation bullets. For example, if you want to move the navigation bullets to the top of the slider, you would use this:

.soliloquy-container .soliloquy-pager { 
  bottom: auto !important; top: 10px !important; 
}

If you wanted to move the bullets to the center, right or left, you can follow this tutorial here.

For targeting each individual navigation bullet, use .soliloquy-pager .soliloquy-pager-link. If a control navigation item is active (or you want to target the active bullet), use .soliloquy-pager .soliloquy-pager-item .active.

In the default theme, the navigation bullets are background image sprites. Let’s say you want to change this to your own image. You either need to create an image sprite or create two images (one for the normal state and another for the active/hover stat) and use the code below. Keep in mind you need to adjust the path based on where your images are stored and adjust the image dimensions to the size of yours:

.soliloquy-container .soliloquy-pager-link { 
  background: url(your_path/your_image.png) no-repeat scroll 0 0 !important; 
  width: 24px !important; 
  height: 18px !important; 
}
.soliloquy-container .soliloquy-pager-link:hover, 
.soliloquy-container .soliloquy-pager-link.active { 
  background: url(your_path/your_image_hover.png) no-repeat scroll 0 0 !important; 
}

And with that, you’ve just changed out the default bullets for Soliloquy. Pretty easy, right? The direction arrows follow the exact same concept.

Soliloquy Direction Navigation

The direction navigation (or arrows) for Soliloquy works much like the control navigation examples. You target the direction navigation container via .soliloquy-controls-direction. If you want to target the previous direction arrow, you would use .soliloquy-controls-direction .soliloquy-prev. If you want to target the next direction arrow, you would use .soliloquy-controls-direction .soliloquy-next.

Let’s say you want the direction arrows to be visible at all times. By default, they are hidden until you hover over the slider. You can adjust this pretty easily by using this CSS below:

.soliloquy-container .soliloquy-controls-direction { 
  display: block !important; 
}

When changing out the direction arrows, it is important to note how you should adjust margins to ensure that the arrows remain vertically centered in the slider. Here’s an example. Let’s say that the arrows you want to use are 24px x 18px in dimensions. Here’s how you would style the arrows:

.soliloquy-container .soliloquy-controls-direction .soliloquy-prev { 
  background: url(your_path/your_prev_arrow.png) no-repeat scroll 0 0 !important; 
  width: 24px !important; 
  height: 18px !important; 
  margin-top: -9px !important; 
}
.soliloquy-container .soliloquy-controls-direction .soliloquy-prev:hover { 
  background: url(your_path/your_prev_arrow_hover.png) no-repeat scroll 0 0 !important; 
}
.soliloquy-container .soliloquy-controls-direction .soliloquy-next { 
  background: url(your_path/your_next_arrow.png) no-repeat scroll 0 0 !important; 
  width: 24px !important; 
  height: 18px !important; 
  margin-top: -9px !important; 
}
.soliloquy-container .soliloquy-controls-direction .soliloquy-next:hover { 
  background: url(your_path/your_next_arrow_hover.png) no-repeat scroll 0 0 !important; 
}

Notice the the margin-top property should be exactly the negative half of the height of your arrow. So if your arrow height was 24px, the margin-top property should be -12px and so on and so forth.

Looking for more great examples? Browse our styling docs for inspiration on customizing your slider using CSS.

[i]
[i]