Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Reposition the Slider Navigation Bullets

You can easily use CSS to reposition the slider navigation bullets.

Center the Slider Navigation Bullets

To center the slider navigation bullets add the following CSS to your active theme’s style.css file:

.soliloquy-container .soliloquy-pager { 
  margin: 0 auto !important; 
  text-align: center !important; 
  width: 100% !important; 
}
.soliloquy-container .soliloquy-pager-link > span { 
  color: transparent; 
}

Right Align the Slider Navigation Bullets

To right align the slider navigation bullets add the following CSS to your active theme’s style.css file:

.soliloquy-container .soliloquy-pager { 
  margin: 0 5px 0 -5px !important; 
  text-align: right !important; 
  width: 100% !important; 
}
.soliloquy-container .soliloquy-pager-link > span { 
  color: transparent; 
}

Left Align the Slider Navigation Bullets

To left align the slider navigation bullets add the following CSS to your active theme’s style.css file:

.soliloquy-container .soliloquy-pager { 
  margin: 0 0 0 5px !important; 
  text-align: left !important; 
  width: 100% !important; 
}
.soliloquy-container .soliloquy-pager-link > span { 
  color: transparent; 
}

Position Slider Navigation Bullets Below Caption

If you’re displaying the caption and navigation bullets, depending on the theme, these may overlap by default. By adding some additional padding below the caption you can show the bullets immediately below.

.soliloquy-container .soliloquy-caption-inside { 
  padding: 10px 10px 35px !important;
}

Position Slider Navigation Bullets Below Slider

You can even move the slider navigation bullets below the slider using the following CSS:

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