Make arrow background transparent while pagination is full color

Ask the Community Customization
1

First of all, newby here. I’m really enjoying the slider widget. It’s doing pretty much what I want.

I’d like to have the navigation arrows set to be approximately 50% transparent while having pagination colors set to full color, no transparency. I assume the easiest thing would be to set everything to a full color, then have a snippet of code to affect just the arrow background. Is this possible? TIA

1 Like
2

Hi @user27417! Happy that you’re joining us in our cozy Community :smiling_face:

Here’s a CSS code that might help:

.eapp-slider-navigation-arrow svg {
  fill: rgba(255, 255, 255);
  opacity: 0.5;
}

.eapp-slider-slider-pagination-dot,
.eapp-slider-slider-pagination-item:hover .eapp-slider-slider-pagination-dot
{
  background-color: rgba(255, 255, 255) !important;
}

Could you please try and add it to the Custom CSS section of the Settings tab and let me know if it looks good to you? You can also adjust the colours and the opacity to your liking :raising_hands:

2 Likes
3

That does the trick. Thank you!

3 Likes
4

So happy to make it work for you :tada:

Please feel free to get back if you need anything else!

1 Like
5

I was able to combine this script with another found on the forum to control the size of the arrow container as well as the color of the arrow itself. So I’m getting full pagination, transparent arrows, and slightly smaller arrows.

.eapp-slider-navigation-arrow svg {
fill: rgba(100, 100, 100);
opacity: 0.6;
}
.eapp-slider-slider-pagination-dot,
.eapp-slider-slider-pagination-item:hover .eapp-slider-slider-pagination-dot
{
background-color: rgba(255, 255, 250) !important;
}
.eapp-slider-navigation-arrow svg {
width: 25px;
height: 25px;
}
[class*=“Arrow__ArrowContainer-sc”]{
transform: scale(.8);
.eapp-slider-arrow-icon {
fill: black;
}

7

Dear @user27417, that’s great! I’m sure that your findings will be useful for our members, so thank you so much for sharing that :hugs:

Please let us know if you have any other insights or if you’re in need of assistance – we’ll be glad to see you here again!