WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Cannot remove image borders (14 posts)

  1. Chateaupoulet
    Member
    Posted 2 years ago #

    I was playing around with CSS for adding borders to all images on my site. I added some code, similar to this:

    img {
    border:#cc9 1px solid;
    padding:3px;
    }

    to style.css. I ended up with a thin yellow border around all the images.
    I went back to it this week to change the border colour and size, but whatever I changed in the code, the yellow border will not change.
    I now can't even remove it, even though I now have

    img {
    border: none;
    }
    at the start of the Image section.

    I don't know what to try next, any help would be most appreciated!

    Site is http://www.bridgetlansley.com. Theme is 2010.

  2. please post again once you have removed the 'maintenance' mode;

    don't forget to clear the browser cache after changes to the styles - 'CTRL F5' or 'reload' or whatever your browser needs...

  3. WPyogi
    Forum Moderator
    Posted 2 years ago #

    If the new (none) CSS is before the other, that's your problem. CSS is read top-down, so later code takes precedence.

  4. Chateaupoulet
    Member
    Posted 2 years ago #

    Apologies, Maintenance mode now de-activated.

    I have been reloading the pages after updating, meant to say that!

  5. Chateaupoulet
    Member
    Posted 2 years ago #

    WPyopi, I have completely removed the code setting the border and the colour.

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Looks like it is the padding here:

    img.size-auto, img.size-full, img.size-large, img.size-medium, img {
        background-color: #FFFF00;
        border: 1px solid #021A40;
        padding: 1px;
    }

    EDIT -- FYI, the border in the above is not actually being applied because of other CSS overriding it.

  7. there are no borders around the images on the front page;
    apart from the header image - which gets it border from:

    http://bridgetlansley.com/wp-content/plugins/nextgen-gallery/css/nggallery.css

    (which strangely seems to be more-or-less a copy of style.css of Twenty Eleven ??)

    img.size-auto,
    img.size-full,
    img.size-large,
    img.size-medium,
    
    img {
       padding:1px;
       border:1px solid #021a40;
       background-color:#ff0;
    }

    the only other borders I can see are around the thumbnail below the slideshows; and these seem to come from the same styles as above.

  8. Chateaupoulet
    Member
    Posted 2 years ago #

    Oh my goodness, I see what I have done! I put that code in nggallery.css.
    Bacause it was also over a week ago, I forgot where I had done it.

    I must also somehow have merged the code from Twenty Eleven style.css into nggallery.css!!? Do you know how I can get a new copy of this?

    (As you can see, I'm rather new to this!)

    I have removed that code, but I still have the yellow border.

  9. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Did you look at what I posted? In Firebug, removing the padding gets rid of it. Or change the background color in that same section of CSS code -- that's where the yellow is coming from when there is padding.

  10. Chateaupoulet
    Member
    Posted 2 years ago #

    Yes, WPyogi, but I can't find those lines in Style.css.

  11. Chateaupoulet
    Member
    Posted 2 years ago #

    Actually, I'm wrong about being able to remove that code from nggallery.css (as opposed to Style.css).

    When I remove it and try to Update, WordPress is telling me "Oops, no such file exists! Double check the name and try again, merci."

    Do you think I need to reinstall the Gallery?

  12. Chateaupoulet
    Member
    Posted 2 years ago #

    Edited nggallery locally and FTP across to the site. Yellow gone!

    Thank you very much both of you for your help. I would still be looking at yellow borders for hours to come. Thank you for pointing me in the right direction.

  13. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Glad you found it -- the best way to deal with things like this is to use Firebug (or similar other browser tool) -- as it shows you the code and where it is coming from... Then you're not trying to find it in multiple stylesheets!

  14. Chateaupoulet
    Member
    Posted 2 years ago #

    Duly noted, Firebug installed now! Thank you.

Topic Closed

This topic has been closed to new replies.

About this Topic