Title: [Plugin: Jetpack by WordPress.com] Custom Styling for Carousel?
Last modified: August 20, 2016

---

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

 *  Resolved [shawn00m](https://wordpress.org/support/users/shawn00m/)
 * (@shawn00m)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/)
 * Is there a way to edit the default CSS for JetPack’s Carousel? I would like to
   edit how the title and description appears. In the default, they are very low
   on the page and I was hoping to bring it higher on the page.
 * Here’s the page I’m using the gallery on:
    [http://dev.shavel.com/our-products/micro-flannel-gallery-2](http://dev.shavel.com/our-products/micro-flannel-gallery-2)
 * Any help would be appreciated.
 * [http://wordpress.org/extend/plugins/jetpack/](http://wordpress.org/extend/plugins/jetpack/)

Viewing 13 replies - 1 through 13 (of 13 total)

 *  Plugin Contributor [Tim Moore](https://wordpress.org/support/users/tmoorewp/)
 * (@tmoorewp)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997185)
 * 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.
 *  [jarledb](https://wordpress.org/support/users/jarledb/)
 * (@jarledb)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997186)
 * How about adding custom style sheet location to the configure screen? That would
   make customizing the look of the carousel so much easier.
 *  [jarledb](https://wordpress.org/support/users/jarledb/)
 * (@jarledb)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997190)
 * 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.
 *  [Jeremy Herve](https://wordpress.org/support/users/hd-j/)
 * (@hd-j)
 * [13 years, 8 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997218)
 * 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:
   
   [http://i.wpne.ws/JVJp](http://i.wpne.ws/JVJp)
 *  [mighty_mt](https://wordpress.org/support/users/mighty_mt/)
 * (@mighty_mt)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997302)
 * 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 );
       ```
   
 *  [mikeill](https://wordpress.org/support/users/mikeill/)
 * (@mikeill)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997338)
 * 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;
       }
       ```
   
 *  Plugin Author [Jeremy Herve](https://wordpress.org/support/users/jeherve/)
 * (@jeherve)
 * Jetpack Mechanic 🚀
 * [13 years, 1 month ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997339)
 * 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;
       }
       ```
   
 *  [mikeill](https://wordpress.org/support/users/mikeill/)
 * (@mikeill)
 * [13 years, 1 month ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997340)
 * 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.
 *  [xiphocoleon](https://wordpress.org/support/users/xiphocoleon/)
 * (@xiphocoleon)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997356)
 * Hello —
 * I have been trying to customize the Jetpack’s Carousel. On this page, [http://daniellefurfaro.com/?page_id=43](http://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.
 *  [jacob0601](https://wordpress.org/support/users/jacob0601/)
 * (@jacob0601)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997357)
 * > – 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 [http://daniellefurfaro.com/wp-content/plugins/jetpack/modules/shortcodes/css/slideshow-shortcode.css](http://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;
       }
       ```
   
 *  Plugin Author [Jeremy Herve](https://wordpress.org/support/users/jeherve/)
 * (@jeherve)
 * Jetpack Mechanic 🚀
 * [12 years, 10 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997358)
 * 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.
 *  [xiphocoleon](https://wordpress.org/support/users/xiphocoleon/)
 * (@xiphocoleon)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997359)
 * Thank you folks very much. I’m going to try these things now.
 *  [xiphocoleon](https://wordpress.org/support/users/xiphocoleon/)
 * (@xiphocoleon)
 * [12 years, 10 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997360)
 * Yes, editing the CSS right through my dashboard worked right away.

Viewing 13 replies - 1 through 13 (of 13 total)

The topic ‘[Plugin: Jetpack by WordPress.com] Custom Styling for Carousel?’ is closed
to new replies.

 * ![](https://ps.w.org/jetpack/assets/icon.svg?rev=2819237)
 * [Jetpack - WP Security, Backup, Speed, & Growth](https://wordpress.org/plugins/jetpack/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jetpack/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jetpack/)
 * [Active Topics](https://wordpress.org/support/plugin/jetpack/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jetpack/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jetpack/reviews/)

## Tags

 * [jetpack carousel](https://wordpress.org/support/topic-tag/jetpack-carousel/)

 * 13 replies
 * 9 participants
 * Last reply from: [xiphocoleon](https://wordpress.org/support/users/xiphocoleon/)
 * Last activity: [12 years, 10 months ago](https://wordpress.org/support/topic/plugin-jetpack-by-wordpresscom-custom-styling-for-carousel/#post-2997360)
 * Status: resolved