How to Change the MetaSlider CSS Styles

To change the style of MetaSlider you should 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 customize the style of your slideshow with 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
• Find somewhere safe to change the CSS such as text editor. It’s important not to edit the CSS files that come with MetaSlider directly, or you will lose your changes when you upgrade.
• 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 on your website using one of these recommended methods.

We’ve included some examples of CSS changes below using the Nivo Slider option:

Changing the Caption Font Size

Use the following CSS to change the font size used in slideshow captions:

Changing the Caption Background Color

Use the following CSS to change the background color used for slider captions:

Move the Caption to the Right Hand Side

Use the following CSS to move the position of captions