Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Getting rid of borders in gallery

  1. alocicero
    Member

    My blog: http://frecklesandpurls.wordpress.com
    Theme: Mistylook

    I've created a couple of galleries for projects I've completed (via the "Gallery" tab at the top). When you go into the individual galleries (ie. http://frecklesandpurls.wordpress.com/gallery/knitting/ ) the thumbnails all have an annoying gray border around them that looks wonky and just detracts from the galleries.

    Any way to get rid of those? I've tried EVERYTHING I can think of but they never go away.

    The only thing in the Mistylook stylesheet that even mentions galleries is this:

    #content #content-main .gallery .gallery-item a {
    border-bottom: none;
    }

    And that doesn't give me much to go on. When I look at the page source on the gallery pages, right before the thumbnails it says:

    <!-- see gallery_shortcode() in wp-includes/media.php -->

    which leads me to believe that the guilty code is hidden somewhere from me. I just want to figure out some CSS that I can add to my stylesheet that will override any existing code that puts that gray border around the thumbnails!

    Any help would be greatly appreciated! I'm pulling my hair out!

    Thanks,
    Allison

    The blog I need help with is frecklesandpurls.wordpress.com.

  2. dreamsburnred
    Member

    You can't remove it. Its helps with the placement of images and styling.

  3. timethief
    Member

    @alocicero
    This may help you: Getting rid of unwanted features in MistyLook - no CSS editing required http://wpbtips.wordpress.com/2009/12/24/unwanted-features-in-mistylook/

    The best Gallery reference I have come across is this one: Not the Official WordPress.com Gallery FAQ http://gammagirl.wordpress.com/2008/07/27/not-the-official-wordpresscom-gallery-faq/

  4. alocicero
    Member

    Thanks for the help!

    @dreamsburnred, I was afraid you were going to say that! Looks like I'm stuck with it!

    Oh well! :(

  5. panaghiotisadam
    Member

    @alocicero: You've been looking for the wrong thing. Image borders & background have to do with images in general, not galleries in particular. This is the part you need to override:

    .entry img
    {
    background:url(img/shadow.gif) no-repeat right bottom;
    padding:4px 10px 10px 4px;
    border:none;
    border-top:#eee 1px solid;
    border-left:#eee 1px solid;
    }

  6. alocicero
    Member

    @panaghiotisadam: unfortunately, I already tried that and it doesn't work. It appears that the galleries march to the beat of their own drum! A drum we don't get to change!

  7. panaghiotisadam
    Member

    @alocicero: Sorry, I forgot that gallery images are clickable, so it should be "entry a img", not "entry img". But I can only get halfway there:

    .entry a img {
    background:transparent;
    padding:0;
    }

    That eliminates the dropshadow and the extra space, leaving only a thin grey border. Weird thing is the grey border is cfcfcf, but there's no cfcfcf anywhere in the stylesheet.

    Our CSS master is devblog; when he drops by, I'm sure he'll tell us what must be done.

  8. devblog
    Member

    Nicely done identifying the selectors, Panos.

    To eliminate the shadows and borders I would override the selector's definition like this:

    .entry a img {
background: none;
border:none !important;
}

    Although "background: transparent;" works, I use the "transparent" value when I'm setting an image as well; since no background is desired, I use "none" instead.

  9. panaghiotisadam
    Member

    Thanks!

    I had tried bg none too, and I had tried important too. My mistake was I put a semicolon like that:
    border:none; !important;

    Now, out of curiosity, could you tell me where the cfcfcf border actually comes from?

  10. cardsurg
    Member

    Now, out of curiosity, could you tell me where the cfcfcf border actually comes from?

    Isn't that just the hex notation? You could type in the color number (like 303030) or the color name (303030 is a dark gray). I think.

  11. timethief
    Member

    @carsung
    Hello there. There's no blog linked to your username and you failed to post a link to a blog. This forum is only for those with free blogs being free hosted by wordpress.com. Perhaps you are posting into the wrong forum and ought to be posting to http://wordpress.org/support instead. Here's the link to a support entry that clarifies the differences between the two for you http://support.wordpress.com/com-vs-org/

  12. devblog
    Member

    Now, out of curiosity, could you tell me where the cfcfcf border actually comes from?

    Actually is not #cfcfcf (it's nowhere defined in the CSS) but #eee, and the borders are defined in the ".entry img" selector. The properties and values are these:

    border-top:#eee 1px solid;
border-left:#eee 1px solid;

    HTH

  13. panaghiotisadam
    Member

    @devblog: The salient point is that they're defined in ".entry img", not "entry a img": I had tried to change the latter only, and it wouldn't. And I was puzzled precisely because I had seen no cfcfcf in the CSS (see my 3:29 AM post above), but strangely that's what Photoshop had told me the grey was. No eee from these two either:
    http://redalt.com/Tools/I+Like+Your+Colors
    http://www.colorcombos.com/grabcolors.html
    Anyway, thanks as usual, and sorry to bother you with all that.

  14. devblog
    Member

    Think nothing of it, always glad to share knowledge.

    Yes, it can be confusing. In this case, even though the borders are not defined in ".entry a img", they still appear because of inheritance, that's why you override the rules in ".entry a img" so images inside anchor tags won't get the borders BUT regular images will.

    When you define something "globaly", for example:

    #container img {border: solid 1px #ccc;}

    All image elements that are inside of the container element will inherit that property. So, if you had something like this in your markup:

    <div id="container">
    <img src="/images/img.gif" />
</div>

    or

    <div id="container">
    <div id="contents">
         <img src="/images/img.gif" />
     </div>
     <div id="leftColumn">
          <img src="/images/img2.gif" />
     </div>
</div>

    The images in both examples will have the border you set in your "#container img" selectors, unless of course, you override their rules separately.

    HTH

  15. alocicero
    Member

    @panaghiotisadam and @devblog -

    I want to kiss you both on the mouth!

    I added

    .entry a img {
    border:none!important;
    }

    to my CSS and the horrible borders are GONE in my galleries! I kept the background shadows because I like them but I am SO GLAD to have those gray borders gone!

    thankyouthankyouthankyou!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags