Override CSS not working

Hi,

The method does work. All the CSS on your page is treated the same by your browser – whether it comes from your theme, Meta Slider or somewhere else. If one CSS rule is more ‘specific’ than the others then it will take precedence over the others.

Please could you send me a link to your site, and point me in the direction of the CSS you’ve added?

Regards,
Tom.

Hello Tom

This is the URL: https://www.ddesigners.nl/meubel-demo

This is the code I added in thems’s style.css
(at the moment, while it did not worked, I edited the plugin core file…so it is working now)

/*Metaslider-plugin-background-arrows-runner*/

.metaslider.flex-direction-nav a {
background: url(“https://www.ddesigners.nl/meubel-demo/wp-content/themes/runner/img/bg_direction_nav.png”) no-repeat scroll 0 0 rgba(0, 0, 0, 0);
cursor: pointer;
display: block;
height: 30px;
margin: -20px 0 0;
opacity: 0;
position: absolute;
text-indent: -9999px;
top: 50%;
width: 30px;
z-index: 10;
}

Thanks, you’ll need to put a space in between .metaslider and .flex-direction-nav.

Any of the rules you’re not overriding can be removed (they’ll be picked up from the default CSS) – eg display: block, opacity etc.

Regards,
Tom

Ok Tom thanks!

I will give it a go!

Grtz!

Sito

Hi Tom,

It does work, …but when I follow your instructions, …

I want to change the image, which is a sprite, isn’t it?

I want to use this one, I created in Photoshop:
https://www.ddesigners.nl/meubel-demo/wp-content/themes/runner/bg_direction_nav.png

But the thing is, the right arrow is facing to the left, when I use this sprite…so I have two arrows on the hover pointing to the left…

Do you know how I can solve this?
Cause when I replace the original image, in the core folder, it does work then..

Regards!

Sito