post: Soliloquy: Custom styling and stylesheets

Home

Soliloquy: Custom styling and stylesheets

Working With WordPress

  

Articles

CSS Plugins WordPress

Soliloquy is one of the better slider plugins out there for WordPress. It comes with a free ‘lite’ version with essentially the core of the plugin available, and a licenced version which comes with the additional support and a range of functional add-ons.

It is also very customisable via css, which can be added on a per-slide basis, or added to your themes stylesheet. The html structure for the slider panel is compact and manageable with id’s for the slider and plenty of classes for the internal components.

The html for a slider is below:


<div id="soliloquy-container-23" class="soliloquy-container soliloquy-transition-fade soliloquy-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="http://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="https://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> 

The documentation for the plugin details a number of ways to customise the css, for example to always show the navigation arrows:


.soliloquy-container .soliloquy-controls-direction { display: block !important; }

Notice the !important at the end of the selector? This is added to override the default css in the plugin stylesheet. This is because there is no way at that point to know if the theme style.css will be loaded before or after the plugin styles.

It’s a bit of a messy way of doing things. There is a better alternative: separate slider custom css and tie it to the plugin’s stylesheet. This is by creating a new stylesheet, e.g. slider.css and enqueue it with the plugin css as a dependency. It will then always be loaded after the plugin stylesheet and so override the plugin default styles. It also separates custom css from your theme’s styling.

In your themes functions.php file add the following.


// Register sliderstyle sheet.
add_action( 'wp_enqueue_scripts', 'theme_register_slider_style' );

/**
 * Register style sheet.
 */
function theme_register_slider_style() {
	wp_register_style( 'slider', get_template_directory_uri() . '/css/slider.css', 'soliloquy-style-css' );
	wp_enqueue_style( 'slider' );
}

Notice the ‘soliloquy-style-css’? That is the handle allocated to the plugin slider when it is enqueued by WordPress. It is used as a dependency, so that the ‘slider’ style is tied to it, and outputted after the plugin style by WordPress.

Now create a slider.css theme and place it in a css folder within your themes folder – where the functions.php file is. In the slider.css file you can add the same style as before, but a cleaner version. Any other slider css customisations can also be added here.


.soliloquy-container .soliloquy-controls-direction { display: block; }

Of course this won’t alter the css hierarchy and any inline styles will still trump any stylesheet unless overridden by !important, so there are always caveats and exceptions.

comments powered by Disqus