[Plugin: Jetpack by WordPress.com] Custom Styling for Carousel?

The CSS resides at modules/carousel/jetpack-carousel.css in the plugin. You could copy/paste that to your own CSS file and then write your own small plugin to dequeue the default CSS and enqueue your custom CSS.

How about adding custom style sheet location to the configure screen? That would make customizing the look of the carousel so much easier.

Tried to use wp_dequeue_style(‘jetpack-carousel’); in a plugin to de-register. Have I misunderstood the way its done? Because I could not seem to get rid of the stylesheet.

Could you try using the following function to dequeue the carousel style?

function changejp_dequeue_styles() {
	wp_dequeue_style( 'jetpack-carousel' );
}
add_action( 'post_gallery', 'changejp_dequeue_styles', 1001 );

I have also created a plugin including this function. You can download it here:
https://i.wpne.ws/JVJp

I think the solution suggested by Jeremy Herve above is fine if one wants to rewrite all the carousel CSS from sratch.

However I only wanted to change the fonts to better integrate the carousel with my theme.
So in order to keep it easy to maintain I put a ‘jetpack-carousel.css’-file in my theme folder that only contains the few modifications I wanted to make. Then I put the following code in my theme’s functions.php, so this CSS file is loaded in addition (after) the default one.

function enqueue_carousel_style() {
	wp_enqueue_style( 'my-custom-jetpack-carousel', get_stylesheet_directory_uri() . '/jetpack-carousel.css', array( 'jetpack-carousel' ), wp_get_theme()->Version );
}
add_filter( 'post_gallery', 'enqueue_carousel_style', 1001, 2 );

Thank you both for this useful post.

I have been trying to change the “x” that closes the carousel to make more intuitive and so far have come up with using css to create a circle around the X to make it look more like a button.

The problem is that I haven’t found a way to exactly align the X in the center of the span.

.jp-carousel-light .jp-carousel-close-hint span {
    background-color: white;
    border: 3px solid #991414;
    color: #991414;
    font-size: 55px !important;
    opacity:0.6;
    filter:Alpha(opacity=60);
}

.jp-carousel-close-hint span:hover {
    opacity:0.6;
    filter:Alpha(opacity=60);
 }   

.jp-carousel-close-hint span {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 35px;
    cursor: pointer;
    display: block;
    font: 400 64px/1 "Helvetica Neue",sans-serif !important;
    height: 64px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    transition: border-color 200ms linear 0s;
    width: 64px;
}

You could add some padding to move the border a bit, like so:

.jp-carousel-light .jp-carousel-close-hint span {
    background-color: white;
    border: 3px solid #991414;
    color: #991414;
    font-size: 35px !important;
    opacity:0.6;
    filter:Alpha(opacity=60);
    padding: 0 5px 18px 6px;
}

.jp-carousel-close-hint span:hover {
    opacity:0.6;
    filter:Alpha(opacity=60);
 }   

.jp-carousel-close-hint span {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 35px;
    cursor: pointer;
    display: block;
    font: 400 64px/1 "Helvetica Neue",sans-serif !important;
    height: 64px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    transition: border-color 200ms linear 0s;
    width: 64px;
}

Thanks, Jeremy. Even without the padding the x in a circle looks slightly different on different platforms; on my mobile phone the X is in the upper half, on firefox slightly lower and around dead center in chrome.

as is, the padding numbers posted above are way off from the center and squaring out the circle.

may experiment more. it looks like there may be some combination of padding and font size that will create exactly what i’m looking for.

Hello —

I have been trying to customize the Jetpack’s Carousel. On this page, https://daniellefurfaro.com/?page_id=43, I haven’t been able to:

– set the images to resize to the full width of the page container
– make the background of the carousel white/transparent
– take the radius off of the corners of the carousel

If I could do these three things, Jetpack Carousel would make me so happy right now! Thanks.

– make the background of the carousel white/transparent
– take the radius off of the corners of the carousel

I’d try changing this (located in https://daniellefurfaro.com/wp-content/plugins/jetpack/modules/shortcodes/css/slideshow-shortcode.css)

.slideshow-window {
background-color: #222;
border: 20px solid #222;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
-khtml-border-radius: 11px;
margin-bottom: 20px;
}

to

.slideshow-window {
background-color: #fff;
border: 20px solid #222;
margin-bottom: 20px;
}

Instead of editing the plugin files, I would recommend that you add your custom CSS code to your theme stylesheet, or to your custom CSS editor, under Appearance > Edit CSS in you dashboard. This way, your changes won’t be overwritten next time you update the plugin. Try to add the following CSS to your custom CSS editor:

.post-entry .slideshow-window {
    background: #fff;
    border: 0 none;
}

Resizing the images, however, is going to be a bit more difficult. The slideshow is built to display landscape and portrait pictures without breaking your site layout; if you want to change the width of the image, you will have to create your own custom Javascript code to calculate the image widths.

Thank you folks very much. I’m going to try these things now.

Yes, editing the CSS right through my dashboard worked right away.