Customizing Jetpack’s Slideshow Image Gallery with CSS

Customize Jetpack Slideshow Gallery

Jetpack is a popular WordPress plugin that provides many additional features for your website; one of which provides a couple unique layouts for displaying images in a gallery. One of those options is to display your images in a slideshow.

Choosing the "slideshow" type of Jetpack gallery

I researched a handful of WordPress slider plugins, but ultimately settled on Jetpack for its simplicity. The code it produces is clean. The functionality is just what I was looking for, and nothing more. And it comes with very little overhead.

The only problem: I don’t like how Jetpack has decided to style their image slideshows. Luckily, with just a little bit of CSS, it’s really easy to customize the style of a Jetpack image slideshow.

The Default Jetpack Image Slideshow

The only real usability concern I have with the default styles is that the caption can be difficult to read on top of a lighter-color image.

Jetpack slideshow caption
Slideshow caption on a black & white image

Jetpack does add a dark text shadow behind the white text, but I still find the slideshow captions to be less than ideal. Here are the other things I wanted to change:

  • Redesign the slideshow captions
  • Remove the dark grey border, which is 20px around all sides
  • Update the hover styles for the previous, next & play/pause buttons

For reference, here is an example of the default styles for a Jetpack slideshow.

Jetpack slideshow default styling
Jetpack slideshow default styling

So let’s take a look at how to customize a Jetpack slideshow to achieve these goals.

Customizing the Jetpack Slideshow with CSS

I’m not going to dive deep into the various ways you can add custom CSS to your theme. Just know that this method only uses CSS, and you can add it to your theme in a number of ways (your decision).

  • Child theme’s style.css file
  • For custom themes, add it directly to your theme’s style.css file
  • Custom CSS in the WordPress Customizer

Removing the Slideshow Border

To remove the 20px grey border around the entire slideshow, and make your images touch the edges of the slideshow container…

.jetpack-slideshow.slideshow-window {
	border: 0;
	border-radius: 0;
}

The border-radius: 0; removes the rounded corners and turns the slideshow into a pure rectangle.

Redesigning the Slideshow Caption

Here’s what I wanted to do with Jetpack’s caption:

  • Hide it by default, and only display it on hover
  • Move it from the bottom to the top
  • Put a semi-transparent black bar behind it, to increase legibility
  • Remove the text shadow
  • Override the font that Jetpack was using, and use my theme’s default font
  • Adjust the font-size to be more inline with my theme

The code looks like this:

.jetpack-slideshow .slideshow-slide-caption {
	top: -50px;
	opacity: 0;
	background: rgba( 0,0,0,0.75 );
	padding: 0.25rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: #fff;
	text-shadow: none;
	transition: all 200ms ease;
}

The top: -50px; and opacity: 0; are there to hide it by default. And the transition property is added to make for a smooth transition on hover. And here are the styles that make the caption appear on hover.

.jetpack-slideshow:hover .slideshow-slide-caption {
	top: 0;
	opacity: 1;
}

Adjusting the Slideshow Controls

Now that the caption is at the top, I wanted to move the slideshow controls (previous, next, play/pause) closer to the bottom edge of the slideshow.

.jetpack-slideshow .slideshow-controls {
	bottom: 0;
}

Change Styles for Slideshow Controls

Instead of the white border around the controls on hover, I wanted to change the entire button to the blue color I use for my theme’s links. The first piece of code removes the border, and the second one adds a background color.

body .jetpack-slideshow div.slideshow-controls a,
body .jetpack-slideshow div.slideshow-controls a:hover {
	border: 0 !important;
}
body .jetpack-slideshow div.slideshow-controls a:hover {
	background-color: blue !important;
}

I did have to use an !important declaration, which I try to use as little as possible, but I felt it was necessary to override some strict styles that Jetpack was using.

Here’s the Full Jetpack Slideshow CSS

.jetpack-slideshow.slideshow-window {
	border: 0;
	border-radius: 0;
}

.jetpack-slideshow .slideshow-controls {
	bottom: 0;
}

.jetpack-slideshow .slideshow-slide-caption {
	top: -50px;
	opacity: 0;
	background: rgba( 0,0,0,0.75 );
	padding: 0.25rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: #fff;
	text-shadow: none;
	transition: all 200ms ease;
}

.jetpack-slideshow:hover .slideshow-slide-caption {
	top: 0;
	opacity: 1;
}

body .jetpack-slideshow div.slideshow-controls a,
body .jetpack-slideshow div.slideshow-controls a:hover {
	border: 0 !important;
}
body .jetpack-slideshow div.slideshow-controls a:hover {
	background-color: blue !important;
}

And here’s how the changes look on my site:

Custom CSS changes to Jetpack slideshow
The final version of my CSS changes

There is a lot more you could do to create your own custom styles for Jetpack’s slideshow gallery, but I chose to stop here. Use your imagination, and if you come up with something cool, please share in the comments.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.