Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

The HTML Structure of Soliloquy

When styling your slider, it is important to know what type of HTML structure you can expect, along with any particular classes and IDs that come along with the HTML. Knowing the HTML structure can help you identify where styling should occur and gives you a general flow for how the slider is constructed.

HTML Layout

Below you will find the complete HTML layout for a default slider. Enabling/disabling options will add or remove some of these elements, but this should give you a general idea for the structure flow.

<div id="soliloquy-container-23" class="soliloquy-container soliloquy-transition-fade soililoquy-fade soliloquy-theme-classic">
    <div class="soliloquy-wrapper">
        <div class="soliloquy-viewport">
            <ul id="soliloquy-23" class="soliloquy-slider soliloquy-slides soliloquy-wrap soliloquy-clear">
                <li class="soliloquy-item soliloquy-item-1 soliloquy-image-slide" draggable="false">
                    <a href="https://soliloquywp.com/features/" class="soliloquy-link" title="You can make beautiful responsive sliders in 60 seconds or less.">
                        <img id="soliloquy-image-944" class="soliloquy-image soliloquy-image-1" src="http://cdn.soliloquywp.com/wp-content/uploads/2012/02/fast.jpg" alt="Best Responsive WordPress Slider Plugin" data-soliloquy-src-mobile="http://cdn.soliloquywp.com/wp-content/uploads/2012/02/fast.jpg">
                    </a>
                    <div class="soliloquy-caption">
                        <div class="soliloquy-caption-inside">
                            <h2 class="soliloquy-fc-caption">60 Seconds Flat</h2> Soliloquy is so easy to use that <strong>you can make your next responsive WordPress slider in 60 seconds or less.</strong> Just click on this slide to see for yourself!</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="soliloquy-controls soliloquy-has-pager soliloquy-has-controls-direction">
            <div class="soliloquy-pager soliloquy-default-pager">
                <div class="soliloquy-pager-inner">
                    <div class="soliloquy-pager-item">
                        <a href="" data-slide-index="0" class="soliloquy-pager-link active"><span>1</span></a>
                    </div>
                    <div class="soliloquy-pager-item">
                        <a href="" data-slide-index="1" class="soliloquy-pager-link"><span>2</span></a>
                    </div>
                    <div class="soliloquy-pager-item">
                        <a href="" data-slide-index="2" class="soliloquy-pager-link"><span>3</span></a>
                    </div>
                </div>
            </div>
            <div class="soliloquy-controls-direction">
                <a class="soliloquy-prev" href=""><span></span></a>
                <a class="soliloquy-next" href=""><span></span></a>
            </div>
        </div>
    </div>
</div>

As you can see from above, the flow of the HTML structure is logical. There are plenty of classes and unique ID’s for you to style your slider.

ID Structure

The ID structure in Soliloquy is one that follows a logical pattern: ID appended with “-{your_slider_ID_here}”. For example, let’s say you created a new slider that gives you an ID of 234. If you wanted to target the outermost container for that slider only, you would use the following code:

#soliloquy-container-234 { 
	/** Your custom CSS would go here */ 
}

Class Structure

Classes are used liberally in Soliloquy to allow you the most styling freedom possible. When you want to style all sliders in a particular manner, it is best to target Soliloquy classes.

For example, let’s say you want to float all of your sliders to the right. By adding this code to your theme’s style.css file, every Soliloquy slider that appears on your pages will float to the right:

.soliloquy-container { 
	float: right; 
}

Other Notes

Soliloquy will automatically append some inline styling when the slider is initialized in order to provide the best possible slider experience. If you want to analyze what inline styles are generated, I suggest you use the Chrome Developer Tools for Google Chrome to inspect the slider once it has been loaded on your page.

[i]
[i]