How To Change Colour Of Meta Slider Dots?

[Chris.Mc]

Hey,

I would like to change the dots of the Meta Slider to simple normal black dots. Is there a way to do this?

 

Thank you

[Chris.Mc]

This reply has been marked as private.

[Harry]

Hi Chris,

Please add below code to Claue > Theme Option > General Layout > Custom CSS

.metaslider .theme-default .nivo-controlNav a {
	width: 15px;
	height: 15px;
	background: #000;
	margin: 0 3px;
	border-radius: 50%;
	opacity: 0.5;
}
.metaslider .theme-default .nivo-controlNav a.active {
	opacity: 1;
}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Chris.Mc]

Thanks Harry,

unfortunately it doesn’t work. I played a bit with the occupacy and border specs, but nothing happened.

.metaslider .theme-default .nivo-controlNav a {
width: 15px;
height: 15px;
background: #000;
margin: 0 3px;
border-radius: 0%;
opacity: 1;
}
.metaslider .theme-default .nivo-controlNav a.active {
opacity: 1;
}

I purged the cache, but this didn’t help either.

Still the same dots

[Harry]

Hi Chris,

I remove redundant close tag of css code “}” you added before new code and change code to

.metaslider.ml-slider .theme-default .nivo-controlNav a {
	width: 15px;
	height: 15px;
	background: #000;
	margin: 0 3px;
	border-radius: 50%;
	opacity: 0.5;
}
.metaslider.ml-slider .theme-default .nivo-controlNav a.active {
	opacity: 1;
}

It now it work.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Chris.Mc]

Yep, beautiful.

Thanks mate

[Chris.Mc]

Hey Harris,

the new update of MetaSlider changed the look of the Nivo slider again.

 

Could you provide me with a new code, please?

 

Thanks mate

 

[Harry]

Hi Chris,

Please add below code

.metaslider.ms-theme-nivo-bar .slider-wrapper {
	border: none !important;
}
.metaslider.ms-theme-nivo-bar .nivo-controlNav {
	background: none !important;
	border-top: none !important;
}
.metaslider.ms-theme-nivo-bar:hover .nivo-controlNav {
	bottom: 10px !important;
}
.metaslider.ms-theme-nivo-bar.metaslider-nivo .nivo-controlNav a {
	width: 15px;
	height: 15px;
	background: #000;
	margin: 0 3px;
	border-radius: 50%;
	opacity: 0.5;
}
.metaslider.ms-theme-nivo-bar.metaslider-nivo .nivo-controlNav a.active {
	opacity: 1;
}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Chris.Mc]

Awesome, thanks.

If you kindly let me know how to remove the borderline as well as change the colour of the dots would be great

[Harry]

Hi Chris,

Please add more code

.metaslider.ms-theme-nivo-bar .slider-wrapper {
	border: none !important;
}

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Chris.Mc]

Awesome, thanks mate.

and background would be the dots, correct?

.metaslider.ms-theme-nivo-bar.metaslider-nivo .nivo-controlNav a {
width: 15px;
height: 15px;
background: #000;

[Harry]

Yes, it correct.

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts