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.
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 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.
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:
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.
We Recommend
https://kinsta.com › wordpress-hosting
Fast and secure infrastructure, worldwide CDN, edge caching, 35 data centers, and enterprise-level features included in all plans. Free site migrations.
https://gravityforms.com › features
Create custom web forms to capture leads, collect payments, automate your workflows, and build your business online. All without ever leaving WordPress.
Leave a Comment