Flexslider – change color of paging bullets

Hi Tom,

I found the right place for the CSS changes to solve these issues, but I have to say that I find the multiple CSS files in different places a bit confusing. Especially because the slider CSS (public / metaslider / flexslider) overrides the CSS of the website.

IMO it would be a huge improvement if you could build in a ‘custom CSS’ area which overrides all other CSS rules. This way it would be a lot easier to customize the colour of the page nav bullets without having to change the flexslider css itself. Suggested options / extra fields:
– caption text alignment
– color of active/inactive/hover paging bullet

Another improvement (IMO) would be to give the ‘flex-control-nav’ (paging) it’s own space right below the slider image, instead of floating above it.
Now the vertical alignment is done with a ‘bottom: ..px’ trick, but that’s causing some overflow in smaller screen: see screenshot. By giving the paging it’s own space, you also don’t hide the 40px or so at the bottom of the slider image. And the caption wrapper can be nicely placed at the bottom of the slider image – or maybey even made adjustable… ;).

Final point: the paging bullets are jumping to the right a little and back, when moving to the next slide. It only happens after playing with the ‘bottom: ..px’ lines in the CSS; with caption-wrap bottom at 40px and flex-control-nav bottom at 20px it’s just steady as a rock.
It’s only a minor issue, but I consider it ‘unwanted movement’… ;).

I hope you’ll find my suggested improvements usefull, maybe we see something back in the next release :).

Kind regards,
Gert-Jan

Hi Gert-Jan,

Thanks for the feedback ??

There should be no need to modify the flexslider CSS itself (in fact I don’t recommend it as you’ll lose your changes if you update!).

You can override any of the default CSS by copying the styles over to your themes stylesheet and prepending the selectors with “.metaslider”. This makes your new CSS selectors more specific, so the styles you define there will override the default styles (hence the name: cascading style sheets). I’ve written a short explanation here: https://www.metaslider.com/documentation/styling/

The flex-control-nav issue is one I’m aware of, it’s not a great way of doing it (in fact it’s caused some issues for myself, and I’d much prefer it as you’ve described), but it’s the ‘official’ flexslider way of doing it which is why it’s the way it is. The other problem is that if I changed it now then I’d risk breaking any customisations people have made.

The Theme Editor in Meta Slider Pro basically means you wouldn’t need to worry about any of these things, Meta Slider will do it all for you.

Regards,
Tom.

Hi Tom,

You’re welcome ??

Thanks for pointing out where I can find the styling instruction for the slider, this helps a lot.

For the flex-control-nav issue I found a neat trick: include a white space at the bottom of every image you use in the slider, the same height as the nav bar; this way the bar doesn’t ‘consume’ some space from the images.

Finally, I added some CSS to do a little resizing of the nav bar for when the port view gets smaller, just to keep it a bit in perspective with the responsive (thus resized) slider images ;). I was a little surprized this didn’t come as standard feature…

Regards,
Gert-Jan