Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Customize the Navigation Arrows

You can easily modify the default appearance of Soliloquy’s navigation arrows using CSS.

In this example, we’ll customize the navigation arrows for the Basic theme by changing the background color, adding a border and border radius to them.

You can fully customize the appearance of Soliloquy's different elements, including the navigation, using CSS.

.soliloquy-container .soliloquy-prev,
.soliloquy-container .soliloquy-next {
  background-color: #6495ED;
  border-radius: 999em;
  border: 3px solid white;
  width: 34px;
  height: 35px;
.soliloquy-container .soliloquy-prev { 
  background-position: 45% center; 
.soliloquy-container .soliloquy-next {
  background-position: 55% center; 

The possibilities are endless using CSS, you can change the navigation arrow appearance, position, color, size and so on. You can also change the style when hovered over by using the following CSS selectors:

.soliloquy-container .soliloquy-prev:hover { /* Add your styles here */ }
.soliloquy-container .soliloquy-next:hover { /* Add your styles here */ }