WordPress.org

Ready to get started?Download WordPress

Forums

Remove grey line/border around images on twenty eleven (10 posts)

  1. bettyboo93
    Member
    Posted 1 year ago #

    Hello,
    I'm trying to remove the grey line that's around all my images on http://www.bettyvintage.com
    any CSS ideas for this?
    thanks

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    General CSS queries can be asked in general CSS forums such as;
    http://csscreator.com/forum
    http://www.cssforum.com.pk/
    http://css-tricks.com/forums/
    http://www.welovecss.com/
    http://www.codingforums.com/

    Or you could try using a browser developer tool for this kind of exploratory CSS work.
    I used Google Chrome's built-in Developer Tool just because I find it particularly easy to expose underlying HTML and CSS as compared to Firebug.

    Now that you know the style, from being exposed/added by the Developer Tool, you can add a new style to override it.

    You ought to add new styles externally, not within the theme's files. Changes to the theme's files will compromise the theme and be compromised when the theme updates.

    External changes can be made using a Child Theme or through a plugin that provides Custom CSS functionality.

    I recommend using the Jetpack plugin and its Custom CSS functionality to hold your CSS modifications.

  3. bettyboo93
    Member
    Posted 1 year ago #

    I have jetpack I just wanted to know if I could remove the grey line around my images - not generally a CSS matter but just needed help with it!

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yes, that's entirely CSS - the border is set here:

    img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
        border: 1px solid #DDDDDD;
        padding: 6px;
    }

    Copy that to your child or custom CSS and set the border to zero.

  5. Shawn
    Member
    Posted 1 year ago #

    Tried that and other things. No matter what I do, I still get the grey lines around images, even when I edit the settings in the original style.css file (not the child). Could it have something to do with the entries being imported from Blogger?

    Site:
    http://www.santafeelsbad.com/navitest2/

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    @NaviGill, in which page are the grey lines?

  7. Shawn
    Member
    Posted 1 year ago #

    Hi Andrew,
    They're on the main page I get when I click the link in my above post, on every image, even on the pages I get when I click the post titles.

    I was able to change the lines below posts, but want to completely remove them near the images.

    Also, When I use:

    img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
    border: none;
    padding: 0px;
    }

    The borders go away in safari, but still appear in Firefox.

  8. Shawn
    Member
    Posted 1 year ago #

    They appear in Firefox, only when I hover over the image.

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    For some reason your image on that page is in a table.
    Have you therefore tried adding CSS border: none; to the <table> and <td>?

  10. Shawn
    Member
    Posted 1 year ago #

    Andrew,
    I see what you're saying. When I made the entries in Blogger, the images were automatically put into tables by Google's system.

    I went into the, "Relax Like Simple" entry and removed the table code. Problem solved. That's what I'll do from now on.

    Thank you! I would not have caught that.

Topic Closed

This topic has been closed to new replies.

About this Topic