800,000+ WordPress sites are already using MetaSlider!

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.