Tutorials

Customizing Jetpack’s Slideshow Image Gallery with CSS

Updated

Written by

Dave Warfel

Reading Time

4 minutes

If you buy something from one of our links, we may earn a commission.

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.

Dave Warfel

LinkedIn  •  X (Twitter)
Dave has been working with WordPress since 2011. He's built 100s of client sites and almost a dozen of his own. He's tested almost every plugin you can think of, hosted with at least 10 different companies, and gone down every SEO rabbit hole you can imagine. When's he's not tinkering with new software, you'll find him in the mountains of Colorado, trail running, summiting peaks, and rippin' downhills on his mountain bike. 🏔️🏃🚴🤸

25 responses to “Customizing Jetpack’s Slideshow Image Gallery with CSS”

  1. laila Avatar
    laila

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

    1. Dave Warfel Avatar

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

  2. Crin Avatar
    Crin

    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!

    1. Dave Warfel Avatar

      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. Victor Avatar
    Victor

    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.

    1. Dave Warfel Avatar

      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. Victor Avatar
    Victor

    Hi Dave,

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

    Víctor.

    1. Dave Warfel Avatar

      🙌🏼 Glad it worked, Víctor.

  5. Vinod Avatar
    Vinod

    Hi Dave,

    Thanks for this post. It helped. I just have one question. Can you please let me know how to change the border color from black to any other color?

    Thanks.

    1. Dave Warfel Avatar

      Vinod,

      If I understand correctly, I think you’re asking about the general background color that shows behind the image, when the image doesn’t take up the entire space of the slideshow.

      Just add a background-color declaration to the .jetpack-slideshow.slideshow-window selector. Add it as a separate line, in addition to the border styles.

      .jetpack-slideshow.slideshow-window {
      	background-color: #fff;
      }

      Change the #fff to whatever color you’d like. Let me know if that works for you.

  6. Vinod Avatar
    Vinod

    Thanks Dave. This did the trick for me. Much appreciated.

  7. Dale Avatar
    Dale

    Can you put google ads or any ads in the slide show?

    1. Dave Warfel Avatar

      Hi Dale — Unfortunately, no. This cannot be done with the Jetpack slideshow or image gallery. You’ll need to look into another slideshow/image gallery plugin in order to place Google Ads in there.

  8. Jacques Avatar
    Jacques

    Hi
    Is it possible to add links to pages from images in this Jetpack Slideshow?

    1. Dave Warfel Avatar

      I don’t think so, Jacques. I’ve never even thought to try this, but from what I have seen on using the Jetpack slideshow gallery, I don’t think this is possible.

  9. Daniel Davidson Avatar
    Daniel Davidson

    Hi Dave and Jacques,
    If you encase the figure elements inside of an a element, and specify the href attribute, you can add a link to a Jetpack slide.

  10. Fab Avatar
    Fab

    Thank you, this tutorial is very helpful!

    I still have two questions:
    – how to “show slideshow controls only on mouse over”?
    – how to set background opacity to transparent (the space added to images with different ratio)?

    It´s on this site: https://fabianhesse.com/portfolio/worlding/

    Thank you very much,
    best,
    Fab

    1. Dave Warfel Avatar

      Hi Fab — Sorry, but I’m tied up with other things and don’t have time to look into how to do these things. The second could probably be done with some custom CSS. I’m not sure about the first.

  11. Fab Avatar
    Fab

    Alright, thank you!

  12. Dana Avatar
    Dana

    Hi Dave,
    Your post is a few years old so I hope that you are still responding to questions.

    I’m new to building websites and my scripting experience has been limited to basic MEL scripting.

    I’m using the Jetpack Slider and I want to hide the navigation buttons that are under the slider window. Is that possible?

    Thanks!

    1. Dave Warfel Avatar

      Hi Dana — Sorry but I no longer use the Jetpack slider and don’t have time right now to dig into the code. I’m pretty sure it’d be possible with CSS.

    2. Dana Avatar
      Dana

      Thanks for taking time to respond. If you can afford a little more time, do you have any recommendations for where I can find this info? So far, everything leads down the same path to nowhere. Surely, I can’t be the only one that wants to do this.

      Thanks again!

    3. Dave Warfel Avatar

      Use your browser developer tools to identify the class name(s) of the elements you want to hide. Then learn a bit of CSS. A simple “beginner’s guide to CSS” should be all you need. Best of luck!

  13. Dana Avatar
    Dana

    This bit of code worked for me:

    To remove bullets at underneath the Jetpack Slideshow:

    .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets {
    display: none;
    }

    The catch: Entering this code into the “Custom CSS” field in the block editor had no affect. But, entering it in the “Additional CSS” field on the Customize side bar did work.

    I have no idea why it is the way it is and I have no confidence that it will work the same way with every page. But, I’m happy that I got it to work in this instance.

    1. Robert Avatar
      Robert

      Hi Dana, your code worked for me also, but the other code didn’t. I want to remove the ugly play/pause button at the top and remove the large border at the top as well, any help would be appreciated

Leave a Comment