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.

8 Commentson "Customizing Jetpack’s Slideshow Image Gallery with CSS"

  1. /

    i see no change. I copied the whole thing to the child style.css

    → Reply
    1. (Author) /

      If you can provide your website, I’ll take a look and see if I can figure out what’s going on.

  2. /

    I’m having an absolute nightmare trying to use CSS on jetpacks gallery. It seems every time I change something to how I like it, something else breaks!

    → Reply
    1. (Author) /

      Sorry to hear that, Crin. Without knowing exactly what’s going on, I can’t give you any tips to help.

      Can you post the code on codepen and explain what you’re trying to change? I’d be happy to take a look and see if I can help.

  3. /

    Hi Dave,

    I found your article quite useful, thanks! It works for me. I’ve just added it to the Additional CSS field and does its job. I don’t even need to state .jetpack-slideshow, just the class, and still works fine. Now, the only “issue” I find to this style is that captions and controls are still over the image. I’ve tried to modify your code, to move the caption below the slideshow, but the text disappears as soon as it’s out of the slideshow area (and yes, i’ve changed the colour to black!). I’ve tried to add paddings, margins… to both the slideshow-window and the slideshow-slide… but doesn’t work. Do you know what can be happening?

    Víctor.

    Regards,
    Víctor.

    → Reply
    1. (Author) /

      Hey Victor — Thanks for the compliment. I’m glad you were able to follow the code.

      I think I know what’s going on in your case. The .slideshow-window has overflow:hidden;. You need to set that to overflow:visible;. You probably have the code for positioning of the caption written correctly, but it’s just being hidden because of the overflow:hidden;.

      Then, you can add a top:-50px; to your .slideshow-slide-caption (or whatever value you’d like).

      Give that a shot and see if it fixes your issue. Please let me know how it works out 🙂.

  4. /

    Hi Dave,

    It worked! Many thanks! I used bottom:-50px; instead. This looks quite nice now! :) Thanks for your help.

    Víctor.

    → Reply
    1. (Author) /

      🙌🏼 Glad it worked, Víctor.

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.