REVOLUTION SLIDER ARROWS

[gflwrg]

Hello, could you please help me with sorting out this issue with my slides?

The left and right navigation arrows refuse to show up, making it pretty much impossible for customers to navigate the slider.

I’ve been struggling with this for quite some time now.

[Rui Guerreiro – SUPPORT]

Hi,

Can you check the credentials because they aren’t working for me.

-Rui

[gflwrg]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

I created a draft test page using the slider revolution shortcode and it still doesn’t display.
https://www.bourbonapples.co.uk/?page_id=14449&preview=true

But found an error in the revolution slider.
https://www.dropbox.com/s/n9qsgzfh88nuxly/Screenshot%202017-01-20%2013.29.46.png?dl=0

Can you try to disable all plugins except Revolution Slider and clear the browser cache?
This can be a plugin conflict.

-Rui

[gflwrg]

Hello mate, deactivated all plugins and cleared cache as advised but problem still remains 🙁

[Rui Guerreiro – SUPPORT]

I added some custom css to sort it. Clear the browser cache and activate the plugins again.

-Rui

[Blindfury]

Could you please make your fix public? I have the same problem Rui. Cheers

[David Martin – Support]

Please add this to Theme Options => Custom CSS:

.rev_slider_wrapper .tp-leftarrow, .rev_slider_wrapper .tp-leftarrow.large, .rev_slider_wrapper .tp-leftarrow.square, .rev_slider_wrapper .tp-leftarrow.round, .rev_slider_wrapper .tp-leftarrow.default {
  left: 40px!important;
  opacity: 1;
}
.rev_slider_wrapper .tp-rightarrow, .rev_slider_wrapper .tp-rightarrow.large, .rev_slider_wrapper .tp-rightarrow.square, .rev_slider_wrapper .tp-rightarrow.round, .rev_slider_wrapper .tp-rightarrow.default {
  right: 0px!important;
  opacity: 1;
}

[gflwrg]

Many thanks Rui & David. Can I do the following;

1) hide it on mobile?
2) change the arrow colour?

Thanks in advance

[Rui Guerreiro – SUPPORT]

Hi,

Regarding the questions:

1)` @media only screen and (max-width: 767px){
.tparrows {
display:none!important;
}
}`

2)

.tparrows:before{
   color:#000!important;
}

Hope it helps.

-Rui

[oasishealthproducts]

So you’ve set up the theme css so that it overrides the revolution slider css

I understand why you have done it so the sliders in the demo content look the same as those in your online demo, but if people want to change the sliders or make their own sliders then your css trashes the options that you select in revolution slider.

Specifically if you set ‘always visible’ to ‘yes’ for the arrows then your css trashes that with it’s opacity = 0

Is there a way of allowing the revolution slider css to take precedent, rather than having to put in a whole lot of custom css?

I have the child theme loaded and have put the custom css in there, but it’s quite a bit of overriding to do if I want to change the type or position of the arrows.

Thanks

[David Martin – Support]

Hi,

What arrow style option do you have set? You should be able to override the CSS by choosing a different arrow.

If you do not want the custom arrow style, you should simply remove the custom CSS from the child theme.

[oasishealthproducts]

Thanks for your reply

The problem is that the css in the main theme styles.css has:

.rev_slider_wrapper .tp-leftarrow, .rev_slider_wrapper .tp-leftarrow.large, .rev_slider_wrapper .tp-leftarrow.square, .rev_slider_wrapper .tp-leftarrow.round, .rev_slider_wrapper .tp-leftarrow.default {
background: transparent url(‘images/showcase-nav.png’) no-repeat center left;
width: 36px;
height: 36px;
display: block;
margin: 0;
position: absolute;
top: 50%!important;
left: -36px!important;
margin-top: -18px;
cursor: pointer;
text-indent: -9999px;
opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: all .3s ease;
}

The way you have set up your css is such that it overrides the styles that revolution slider uses.

Please see attached images

1. I have chosen the Hermes arrows which are tall vertical blocks with an arrow symbol
2. This shows your arrow style overiding what I chose
3. This shows the css that the revolution slider created: .hermes.tparrows being overridden by the css in your theme: .rev_slider_wrapper .tp-leftarrow

Thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

If you can link me to your page, I’ll see if we can override this without needing to edit the core CSS file.

Thanks.

[oasishealthproducts]

Thank you for your offer of help. I have no problem setting up css to work around this, I just feel that your theme shouldn’t be trashing the options that I choose in the revolution slider, forcing me to create custom css, rather than just choosing the options I want in the slider. Thanks