Revolution slider css getting overwritten

leadoptimize · February 2015

My Revolution Slider at http://dev.thinkreliability.com/ is not showing as I built it in Revolution slider. There appears to be some css in the them that is overwriting the settings I created in the slider. How do we fix this so the slider looks like the one we actually built.

Thanks

Albert · February 2015

What exactly is getting overwritten? Because we see Revolution Slider and for us looks fine.

leadoptimize · February 2015

The style of the buttons, arrows and nav bullets are being overwritten by BeTheme's css.

Rev Slider's arrows are transparent black. On the site they are now a solid blue shade.

Rev Slider's nav bullets are dark and round. On the site now they are white and the showing slide's bullet is now a blue tab maker pointing up. These are not options available in Rev Slider. That's how I know it has to be the theme's css ovewriting it - at least as far a I can tell.

Lastly, the button is not the same as the button Rev Slider generates. (I don't actually mind this because I like your better).

But all these things are what I mean by the theme's css is overwriting Rev Sliders.

Please advise. I need the arrows and bullets to use Rev Slider's css and not the themes.

Thanks,

Rob

Albert · February 2015

Yes, you're right. Because Revolution Slider is part of theme, we overwrite default revolution slider arrows so the can look good with our theme. So you want to use default arrows style of Rev slider instead of our?

leadoptimize · February 2015

Well the main issue is the nav arrows aren't semi-transpartent, like they are in Rev Slider. I prefer them to be semi-transparent.

Also, in BeTheme, the nav bullets are white for the sliders not showing. The issue is that with my slider, the backgrounds of the slides are all white, so the nav bullets don't show. The only thing that shows is blue pointer for the current slider. This means a user can't see the nav bullets if they want to skip directly to other slides.

But I do like your Slider button better than Rev Slider's.

So if you can show me the CSS to make the nav arrows (the blue background part) semi transparent, and to make the nav bullets a light grey, that will be great.

I just tried 4 different Custom CSS to do it, but not worked.

Please advise.

Albert · February 2015

Ok. We got it. So to change nav bullets color for rev slider, please use below css:

.tp-bullets.simplebullets.round .bullet { background: #000 !important; }

but to make arrows on slider transparent, please use below css:

.tp-leftarrow.default, .tp-rightarrow.default {
    background-color: rgba(0,0,0,0.5) !important;
}

leadoptimize · February 2015

Very nice. That's exactly what I needed.

I did notice that the top pointer in the nav bullet of the current slide appears to be a different element than the actual round bullets. So I made the round bullets the same color as that pointer so it wouldn't look weird, but I'd like to the color of the nav bullets and pointer.

What is the ID or class for the little top pointer in the nav bullets so I can edit its color also?

Thanks,

Rob

Albert · February 2015

Please show us on screenshot what you mean because we are not sure if we talk about the same.

leadoptimize · March 2015

Certainly:

http://awesomescreenshot.com/0034ivzad1

I just want to be able to make the round bullets and the pointer bullet all the same color, but not the default color they are now.

Albert · March 2015

To change it's color, please use below css:

.slider_pagination a.selected::after, .tp-bullets.simplebullets.round .bullet.selected::after { background-color: #000 !important; }
.tp-bullets.simplebullets.round .bullet { background-color: #000 !important; }

leadoptimize · March 2015

Thanks. Will do.

leadoptimize · March 2015

That CSS worked perfectly. Thanks!

Albert · March 2015

You're welcome

Revolution slider css getting overwritten

Comments