Need help? Check out our Support site, then


Twenty Ten theme, remove of change colour of gallery border

  1. My blog is glindev.wordpress.com and also glin.info
    I'm using twenty ten theme
    The gallery on the 'home page' has a black border - i want to remove it - or at least make it white.
    There will be many galleries on the site eventually - is there a solution for the entire blog or is it per gallery?
    I have Custom Design access but am new to CSS.
    Any help / advise most welcome.

    The blog I need help with is glin.info.

  2. Hello,

    If you would like to change the color of the border you can use the code below.

    .slideshow-window {
    border: 20px solid #fff;
    }

    The slide show also has a background color that will show in the event that an image does not have the same aspect ratio as the slide window. Here is the code to change that background.

    .slideshow-window {
    background-color: #222;
    }

    And if you like to change both you can combine the two.

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

    Last, because you mentioned having the border removed you also can tell the border not to display.

    .slideshow-window {
    border: 0 none;
    }
  3. Thanks for you answer.
    Where do I put this code?
    Is it via Appearance, Custom Design & into the CSS Stylesheet Editor (ie do it once for every gallery in the blog)
    OR
    is it into the Text tab of the page the gallery is on (ie, do it for every gallery)
    OR
    something completely different.
    I've tried both, neither appeared to work. I am new to CSS so appreciate your patience. Blog is http://www.glin.info

  4. Yes, you put it into the CSS edit window you mention. This would affect all slideshows, so it only has to be done once.

  5. I suspect I'm being rather stupid.
    I think I did what you suggest - put the code above into the CSS & save. However, the black border still appears around the images in my gallery at http://www.glin.info
    Any advice?

  6. We need a bigger hammer, so to speak in this case. Delete what you added and add this instead. The "!important" attribute will force your CSS rule to override the slideshow's CSS.

    .slideshow-window {
    border: 20px solid #FFFFFF !important;
    }
  7. You are a true guru to me...
    I modified your latest advise to the following & it appears to work just fine - is my modification OK?

    .slideshow-window {
    border: 20px solid #FFFFFF!important;
    }

    .slideshow-window {
    background-color: #FFFFFF!important;
    }

  8. Absolutely OK.

  9. If you want to 'tighten-up' your markup you can combine the two.

    .slideshow-window {
    border: 20px solid #FFFFFF!important;
    background-color: #FFFFFF!important;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic