MetaSlider Documentation

To change the style of MetaSlider you will need to override the default MetaSlider styles with your own styles. If you’re not comfortable with editing the CSS yourself, you’ll be glad to know that MetaSlider Pro includes a live theme editor that lets you completely customise the style of your slideshow – no coding experience needed!

Here is a quick guide to updating the MetaSlider styling, some experience with HTML and CSS is assumed.

• Use FireBug or Chrome Developer Tools to find the CSS you would like to change
• Copy the CSS to your themes style.css file. It’s important not to edit the CSS files that come with MetaSlider directly, or you will lose your changes when you upgrade. You could also use a plugin such as Simple Custom CSS to add the styles to your site.
• Prepend the copied CSS selectors with “.metaslider “. This makes your selector more specific than the default selector, therefore overriding the default MetaSlider styles.
• Update the CSS as you wish – change padding, font sizes etc.

We’ve included some examples below.

Changing the caption font size

Add the following CSS to your themes style.css file

.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    font-size: 1.3em; /* adjust as necessary */
}

Changing the caption background colour

Add the following CSS to your themes style.css file

.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    background: red; /* adjust as necessary */
}

Move the caption to the right hand side

Add the following CSS to your themes style.css file

.metaslider .caption,
.metaslider .cs-title,
.metaslider .nivo-caption {
    right: 0px;
    bottom: 0px;
    width: 20%;
    height: 100%;
    left: auto;
}