Creative Ideas for Soliloquy’s CSS Addon

Do you want to add some CSS styling to a Soliloquy slider? While Soliloquy’s simple tick boxes and settings are suitable for most things, you might want to do some extra tweaking. While you can edit all your sliders globally with your theme’s style.css file, the CSS addon allows you to tweak individual sliders!

The CSS addon is available for every pricing tier, so all you need to do is purchase Soliloquy! CSS can be tweaked by editing or creating a slider and going to the Misc section, then Custom Slider CSS. To apply your settings to all sliders, just add the code to your theme’s style.css.

Here are some examples of what you can do with CSS.

• Method 1. Remove the Caption Background
• Method 2. Show Caption/Navigation on Hover
• Method 3. Move Navigation Bullets Below Slider
• Method 4. Color Tint Slides
• Method 5. Change Bullet Colors
• Method 6. Display Captions Below Carousel
• Method 7. Add a Call to Action Button

Remove the Caption Background

Tired of that semi-transparent background behind your caption? If you don’t need it, use this code to just show text.

.soliloquy-caption-inside { 
  background: transparent !important; 
  filter: none !important; 
  -ms-filter: none !important; 
}

Once you’ve done this, you may want to change the font color so the text is visible on all slides. Just change the hex code here.

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside { 
  color: #000 !important; 
}

Show Caption/Navigation on Hover

With most slider themes, navigation and captions are always visible. To take out the clutter and let people see your images in all their glory, make the elements appear only on hover.

Bullets:

.soliloquy-container .soliloquy-pager { 
  display: none !important; 
}
.soliloquy-container:hover .soliloquy-pager, 
.soliloquy-container.soliloquy-hover .soliloquy-pager { 
  display: block !important; 
}

Arrows:

.soliloquy-container .soliloquy-prev, 
.soliloquy-container .soliloquy-next { 
  display: none !important; 
}
.soliloquy-container:hover .soliloquy-prev, 
.soliloquy-container:hover .soliloquy-next { 
  display: block !important; 
}

Caption:

.soliloquy-caption { 
  display: none !important; 
}
.soliloquy-container:hover .soliloquy-caption, 
.soliloquy-container.soliloquy-hover .soliloquy-caption { 
  display: block !important; 
}

Alternately, use this code to make navigation arrows always visible on themes that hide them!

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

Add this if using the Metro theme:

.soliloquy-container .soliloquy-prev { 
  left right: 0 !important; 
  opacity: 1 !important; 
}
.soliloquy-container .soliloquy-next { 
  right: 0 !important; 
  opacity: 1 !important; 
}

Move Navigation Bullets Below Slider

Do you prefer your navigation always visible but off the slider entirely? Just move the nav bullets below the slider! Check out these other examples of positioning the bullets with CSS.

.soliloquy-container { 
  max-height: none !important; 
}
.soliloquy-container .soliloquy-pager { 
  position: relative !important; 
  bottom: -10px !important; 
}

Color Tint Slides

You can add color tinting to a slider! Add red or green for a holiday feel, black to dramatically darken images, or whatever you’d like. Just paste in the hex color and change the opacity of the tinting. Check out the rest of the color tinting tutorial if you want to add or remove the tint on hover!

.soliloquy-container .soliloquy-item { background-color: #65306D !important; }
 
.soliloquy-container .soliloquy-image { opacity: 0.5 !important; }

Change Bullet Colors

The color of the navigation not doing it for you? You can change the navigation bullets’ colors by simply modifying the hex codes in the snippet below! This example should create all black bullets.

.soliloquy-container .soliloquy-pager-item {
    border: 2px solid #000 !important;
    border-radius: 999em !important;
}
.soliloquy-container .soliloquy-pager-link {
    background-image: none !important;
    width: 10px !important;
    height: 10px !important;
}
.soliloquy-container .soliloquy-pager-link:hover, .soliloquy-container .soliloquy-pager-link.active {
    background-image: none !important;
    background-color: #000 !important;
}

Display Captions Below Carousel

If you use the carousel addon, you may know that long captions can start to cover up your images. To avoid this, this code will move captions below the carousel!

.soliloquy-container .soliloquy-wrapper {
   overflow: hidden !important;
}
.soliloquy-container .soliloquy-viewport {
   overflow: visible !important;
}
.soliloquy-container .soliloquy-caption {
   position: relative !important;
}

Add a Call to Action Button

This tutorial gets a bit more technical with HTML, but it’s a really creative example of how far you can really get with a little ingenuity! Follow it and your slides will have a customizable CTA.

Customize Your Sliders

Want to give it a spin? Check out our guide on styling Soliloquy with CSS and try making your own styles! Even if you’re new to CSS, you might be surprised at what you can do. Or feel free to copy these examples and use them as-is in your sliders.

If you’re comfortable editing advanced files and working with HTML, there’s even more customizing to be done. Check out the Extending documentation!

And please drop us a follow on Facebook and Twitter for more WordPress tutorials!

Published by [email protected]