Blog

Custom CSS recipes for Gutenslider

1 min read

Most looks are a setting away. For the rest there is CSS. These recipes answer common requests; change the values to taste. (Updated for Gutenslider 7.0.)

Where to put the CSS

In a block theme: Appearance → Editor → Styles → Additional CSS. In a classic theme: Appearance → Customize → Additional CSS. Or in your child theme’s stylesheet.

Always start selectors with .wp-block-eedee-block-gutenslider, so the CSS only reaches sliders. To style one slider only, use its ID instead (Advanced panel → Slider ID), for example #gutenslider-dr8rqxqt1.

Fade out the previous and next slides

For carousels with several slides per view:

.wp-block-eedee-block-gutenslider .swiper-slide {
	transition: opacity 0.6s;
}
.wp-block-eedee-block-gutenslider .swiper-slide-prev,
.wp-block-eedee-block-gutenslider .swiper-slide-next {
	opacity: 0.3;
}

Rounded corners

Works best with space between the slides (a Pro setting):

.wp-block-eedee-block-gutenslider .swiper-slide {
	border-radius: 20px;
	overflow: hidden;
}

A box behind the slide content

.wp-block-eedee-block-gutenslider .slide-content {
	background: rgb(0 0 0 / 55%);
	color: #fff;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	max-width: 32rem;
}

A default color for shape dividers

Dividers should match the page background. Set it once instead of per slider; a color set in the block still wins:

.gutenslider-divider-top,
.gutenslider-divider-bottom {
	color: #ffffff;
}

More

The class names are listed in the developer notes. They stay the same across versions, so recipes written for 6.x keep working in 7.0.