Fullscreen slider

Hey Cocoa,

1. There’s no setting for changing the arrow slider color but it can be done by using CSS.
Add this CSS code in Quick CSS, located in Enfold > General Styling (just change the color):

#top .avia-fullscreen-slider .avia-slideshow-arrows a {
    color: blue;
}

2. Try adding this in Quick CSS:

@media only screen and (max-width:767px) {
  .responsive #top .avia-slideshow-controls a {
    display: block !important;
    opacity: 1 !important;
  }
}

Hope it helps.

Best regards,
Nikko

Hi Cocoa,

1. Just add background-color, so the new code for it should be:

#top .avia-fullscreen-slider .avia-slideshow-controls a {
    color: #61011c;
    background-color: #ccc;
}

2. Same with #1, add background-color:

@media only screen and (max-width:767px) {
  .responsive #top .avia-slideshow-controls a {
    background-color: #ccc;
    display: block !important;
    opacity: 1 !important;
  }
}

Hope it helps.

Best regards,
Nikko

Hi cocoagroup,

You can do add this CSS code for hover (just change the background color):

#top .avia-fullscreen-slider .avia-slideshow-controls a:hover {
    background-color: blue;
}

Best regards,
Nikko

Hi Cocoa,

I don’t think we have that feature on Fullscreen Slider.
I checked our demos and don’t find anything like that: https://kriesi.at/themes/enfold-2017/elements/fullscreen-slider/
And also checked the backend option and could not find anything like that.
Also it’s not possible with CSS, can you give us a link where that is shown using Enfold?
If you adjust the opacity/transparency (whether using opacity or rgba) to something like 0.5 or below, should make the slider arrows blend in with the background which could give some impression of having a changing background color.

Best regards,
Nikko

Hi Cocoa,

Can you provide a screenshot for that please, maybe a comparison of before and after.
I have checked the link you gave and if I remove those added CSS codes I do see a difference in color but I’m not really sure what you meant with it’s not highlighted, I only see the difference in background color and opacity :(

Best regards,
Nikko

Hi Cocoa,

I see, please replace all .avia-slideshow-controls with .responsive #top .avia-slideshow-arrows a and that should fix it.

Best regards,
Nikko

Hi Cocoa,

For those dots you can use .responsive #top .avia-slideshow-dots a

Best regards,
Nikko

Hi M.,

Try adding this CSS code in Quick CSS, located in Enfold > General Styling:

.responsive #top .avia-slideshow-dots a:hover {
  background-color: yellow;
}

Best regards,
Nikko

Hi M.,

Thanks for the clarification, please add this CSS code (for active slide):

.responsive #top .avia-slideshow-dots a.active {
    background-color: yellow;
}

Best regards,
Nikko

Hi M.,

We’re glad that we could help you :)
Thanks for using Enfold and have a great day!

Best regards,
Nikko