Need help? Check out our Support site, then


Gallery Slideshow Border

  1. Is there anyway I can use the new gallery shortcode with the slideshow option and control the border width? I've found lots of information on using the old slideshow shortcode and adjusting the width.

    Alternatively, can someone show me how to use the old slideshow shortcode and select only specific images from my media library.

    I've been impressed with the support of the WordPress community so far, I hope this will find more the same... and I promise, once I learn the platform better, I'll pay it all back!

    The blog I need help with is salembridgeport.org.

  2. Hi there - Sure! The shortcode would be something like this:

    [gallery type="slideshow" include=”23,39,45″]

    The numbers would be the IDs of the media files you want it to include. To get an attachment ID for an image, go to your Media Library and click on the title of the image you want. You can find the ID in the URL (the number after post=).

    I don't believe it's possible to adjust the width of the slideshow using a shortcode parameter, but you can do it using CSS since you have the Custom Design upgrade.

  3. Eurello,

    Thanks, but I did get a CSS fix to the problem from kraftbj that goes:
    .slideshow-window {
    border: 20px solid #222;
    }

    Where the 20px can be decreased to get a smaller border.

    I was also hoping to get a pointer the older [slideshow] shortcode documentation.... but I think with what kraftbj provided, I'm good.

    Here's the other forum topic: http://en.forums.wordpress.com/topic/gallery-image-slideshow-border?replies=2#post-1547544

  4. Actually, I tried kraftbj's suggestion and it didn't work.

    Do you know where I can get the documentation on the old [slideshow] shortcode? It calls for "attaching" images to a post or page... how do I do that?

    Thanks in advance!

  5. Hi there - The old shortcode is essentially the same as the new one. It's just that now, the slideshow option is under galleries, rather than it's own option. The old documentation has been updated: http://en.support.wordpress.com/slideshows/

    I see kraftbj has helped you out with your CSS in the other thread. :)

  6. Yes he did... and thank you for your response, too!

  7. Quoting from the other thread:

    Is this something we should publish for others? I've seen this question asked before... but without an answer.

    well, I have answered this question several times, only the question usually is how to get rid of that hideous thing altogether.
    This is kraftbj's solution:

    .widget-gallery .slideshow-window {
    border: 1px solid #222222;
    border-radius: 5px;
    padding-bottom: 2px;
    width: 191px;
    }

    It's an imperfect solution, because your images don't all have the same aspect ratio, so the thickness of the horizontal or the vertical lines will vary. You don't see a border only, you see border plus background (the slideshow bg has the same color as the slideshow border, in order to create a fixed frame around images of varying shapes).
    So, if you want no frame at all, remove the above code and use this instead:

    .widget .slideshow-window {
    background-color: transparent !important;
    border: 0 none !important;
    }
    .widget .slideshow-controls {
    margin-left: -20px;
    }
    .widget div.slideshow-window * img {
    border: 1px solid #ff0000 !important;
    }

    If you really want a 1px border around each image, add this as well:

    .widget .slideshow-window {
    background-color: transparent !important;
    border: 0 none !important;
    }
    .widget .slideshow-controls {
    margin-left: -20px;
    }
    .widget div.slideshow-window * img {
    border: 1px solid #456789 !important;
    }

    It can be any color, so replace the hex number with the one you prefer.

    But keep in mind that with such a colored border it will be more noticeable that the thumbnails are unequal.

  8. Sorry, I pasted the same thing twice.
    No frame at all:

    .widget .slideshow-window {
    background-color: transparent !important;
    border: 0 none !important;
    }
    .widget .slideshow-controls {
    margin-left: -20px;
    }

    Plus this, for a border around each image:

    .widget div.slideshow-window * img {
    border: 1px solid #456789 !important;
    }
  9. Justpl, I searched and searched because I don't like to ask for help unless I am truly helpless... sorry I missed your previous postings. Thanks for posting again here and your incredible explanations.

    And... I'm still trying to understand the naming conventions in CSS.

    This exercise has helped on that front, too.

Topic Closed

This topic has been closed to new replies.

About this Topic