WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Custom Styling for Carousel? (14 posts)

  1. shawn00m
    Member
    Posted 1 year ago #

    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

    Any help would be appreciated.

    http://wordpress.org/extend/plugins/jetpack/

  2. Tim Moore
    Moderator
    Plugin Author

    Posted 1 year ago #

    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.

  3. jarledb
    Member
    Posted 1 year ago #

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

  4. jarledb
    Member
    Posted 1 year ago #

    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.

  5. Jeremy Herve
    Member
    Posted 1 year ago #

    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

  6. mighty_mt
    Member
    Posted 1 year ago #

    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 );
  7. mikeill
    Member
    Posted 1 year ago #

    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;
    }
  8. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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;
    }
  9. mikeill
    Member
    Posted 1 year ago #

    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.

  10. xiphocoleon
    Member
    Posted 1 year ago #

    Hello --

    I have been trying to customize the Jetpack's Carousel. On this page, 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.

  11. jacob0601
    Member
    Posted 1 year ago #

    - 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)

    .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;
    }
  12. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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.

  13. xiphocoleon
    Member
    Posted 1 year ago #

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

  14. xiphocoleon
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic