Making a background transparent in Smart Slider 3

Making a background transparent in Smart Slider 3

It’s no secret my favorite slider plugin is Smart Slider 3. With a robust interface, lots of great options, ease-of-use, and accessibility as well as SEO features, Smart Slider 3 is hands down the best slide plugin for WordPress out there.

I’ve run into certain areas where I’ve wanted to use Smart Slider 3 with pngs, and make the slider as a whole fully transparent so it’s like each slide is floating and sliding on the website. It seems simple enough — just drop out the background on the slider you’re building, but it seems all slides have a solid background on them (usually white) no matter what.

The solution?

Just a tiny bit of CSS that drops the background out entirely. Here it is!

div#n2-ss-[your-slider-number-here] .n2-ss-slide-active, div#n2-ss-[your-slider-number-here] .n2-ss-slide {
	background-color: unset;
}

Slap this up in customizer or at the end of your styles.css code. Make sure to replace [your-slider-number-here] with the number associated with your slider.

Subscribe to Foundation!

Sign up now to get notifications when new posts are made including tips, tricks, tutorials, and more. You can unsubscribe at any time! I'll never sell or share your email address.