Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

How to Customize Video Slide Play Icon

You can easily modify the default appearance of Soliloquy’s video slide play icon using CSS.

Add the following to the bottom of your active theme’s style.css file and modify as you require:

.soliloquy-container .soliloquy-video-icon { 
  background-image: url('http://www.example.com/image.png') !important; 
  background-size: 50% 50% !important; 
}

/* Retina version */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min--moz-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2 / 1), 
only screen and (min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi), 
only screen and (min-resolution: 2dppx) {
  .soliloquy-container .soliloquy-video-icon { 
    background-image: url('http://www.example.com/image@2x.png') !important; 
    background-size: 50px 50px !important; 
  }
}
[i]
[i]