Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Position Image and Caption Side by Side

It may be that you want to have your captions displayed beside your images, either to the left or to the right. Luckily for you, this is pretty easy to do with some small CSS customizations added to your active theme’s style.css file.

IMPORTANT: you may need to adjust your slider dimensions once you have tweaked the CSS to your liking to ensure that your slider is displaying properly.

Caption to the Right

If you would like to have your caption to the right of the image, add the following code to your active theme’s style.css file:

.soliloquy-container .soliloquy-item .soliloquy-image { 
  max-width: 60% !important; 
  margin: 0 !important; 
}
.soliloquy-container .soliloquy-caption { 
  max-width: 40% !important; 
  left: auto !important; 
  bottom: auto !important; 
  right: 0 !important; 
  top: 0 !important; 
}

You can adjust the max-width percentages and positioning values as needed to get it looking just right for your specific website.

Caption to the Left

If you would like to have your caption to the left of the image, add the following code to your active theme’s style.css file:

.soliloquy-container .soliloquy-item .soliloquy-image { 
  max-width: 60% !important; 
  margin: 0 !important; 
  float: right !important; } 
.soliloquy-container .soliloquy-caption { 
  max-width: 40% !important; 
  bottom: auto !important; 
  top: 0 !important; 
}

Even / Odd Alternating Caption Position

If you want to position the caption to alternating sides for each slide instead of all on one side you can add the following CSS to your active theme’s style.css file to get started:

/* Even Slides Caption to the Left */
.soliloquy-container .soliloquy-item:nth-child(even) .soliloquy-image { 
  max-width: 60%; 
  margin: 0; 
  float: right; 
} 
.soliloquy-container .soliloquy-item:nth-child(even) .soliloquy-caption { 
  max-width: 40%; 
  bottom: auto !important; 
  top: 0 !important; 
}

/* Odd Slides Caption to the Right */
.soliloquy-container .soliloquy-item:nth-child(odd) .soliloquy-image { 
  max-width: 60%; 
  margin: 0; 
}
.soliloquy-container .soliloquy-item:nth-child(odd) .soliloquy-caption { 
  max-width: 40%; 
  left: auto !important; 
  bottom: auto !important; 
  right: 0 !important; 
  top: 0 !important; 
}

Other Notes

If needed, you can adjust the color and size of the caption font by using this CSS in your active theme’s style.css file:

.soliloquy-container .soliloquy-caption .soliloquy-caption-inside { 
  color: #000 !important; 
  font-size: 16px !important; 
  text-align: left !important; 
}
[i]
[i]