Styling

To change the style of Meta Slider you will need to override the default Meta Slider styles with your own styles. If you’re not comfortable with editing the CSS yourself, you’ll be glad to know that Meta Slider 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 Meta Slider 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 Meta Slider 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 Meta Slider 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

Changing the caption background colour

Add the following CSS to your themes style.css file

Move the caption to the right hand side

Add the following CSS to your themes style.css file