Soliloquy Slider | Custom CSS

[Peter Fleming]

Could someone help with custom CSS to remove the right and left arrows on the Soliloquy slider on the home page of http://www.campsforgirls.org.

Their CSS is:-

.soliloquy-container .soliloquy-prev {
display: block;
width: 32px;
height: 32px;
position: absolute;
top: 50%;
margin-top: -16px;
left: 10px;
z-index: 1320;
background: rgba(0,0,0,.7) url('images/left.png') no-repeat scroll 50% 50%;
}

.soliloquy-container .soliloquy-next {
display: block;
width: 32px;
height: 32px;
position: absolute;
top: 50%;
margin-top: -16px;
right: 10px;
z-index: 1320;
background: rgba(0,0,0,.7) url('images/right.png') no-repeat scroll 50% 50%;
}

http://www.campsforgirls.org

[Lauren @ OnceCoupled]

Just change display to "none". 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Peter Fleming]

Putting the following into the Soliloquy Slider (Misc) Custom Slider Classes doesn't do anything!

.soliloquy-container .soliloquy-prev {display: none;}
.soliloquy-container .soliloquy-next {display: none;}

Peter 🙁

[Lauren @ OnceCoupled]

I don't know about the Custom Classes or anything, sorry! When I inspect the element, I can see that there isn't a "display: none;" being applied to the arrows anywhere, so you may need to find another place to put the code. That's definitely what you want, you just need to get it to over-ride the current "display: block;". You could try applying it to the container, .soliloquy-controls-direction

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Peter Fleming]

Tried this:-

.soliloquy-controls-direction { display: none !important; }

but no change. 🙁

[Lauren @ OnceCoupled]

Where are you putting this code? Do you have a caching plugin?

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Peter Fleming]

I've got it now.

Add .soliloquy-controls-direction { display: none !important; } to the theme CSS and the arrows disappear.

Thanks for your help.

Peter 🙂

[Author]

Posts