WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven Theme: How to Remove Gray Image Border ? (9 posts)

  1. laptoplife
    Member
    Posted 3 years ago #

    How do you remove the gray image border that surrounds aligned images in twenty eleven? I know you have to change the CSS, but I don't know what to alter or remove.

    Thank you.

  2. watchersnplayers
    Member
    Posted 3 years ago #

    submit an image to know what exactly is your problem

  3. esmi
    Forum Moderator
    Posted 3 years ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues.

    For this reason, it is recommended that you consider creating a child theme for your customisations. Once your child theme is active, we should be able to help with the customisation.

  4. laptoplife
    Member
    Posted 3 years ago #

    Ok, I have a child theme.

    There is a gray border around every image that uses the align tag. How do I remove it?

    Thank you.

  5. cgrray
    Member
    Posted 3 years ago #

    I just saw this post and wondered if you'd gotten an answer.

    This will remove the border. Be sure to put it in your child's style.css:
    img[class*="align"],
    img[class*="wp-image-"],
    #content .gallery .gallery-icon img {
    border: none;
    }

    You will see a gray border when you mouse-over the image. If you want to eliminate that too, change the values to colors that work for you in this :
    a:focus img[class*="align"],
    a:hover img[class*="align"],
    a:active img[class*="align"],
    a:focus img[class*="wp-image-"],
    a:hover img[class*="wp-image-"],
    a:active img[class*="wp-image-"],
    #content .gallery .gallery-icon a:focus img,
    #content .gallery .gallery-icon a:hover img,
    #content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images ... */
    background: #fff;
    border-color: #fff;
    }

  6. innkeeperea
    Member
    Posted 2 years ago #

    I tried this but it didn't work. Did I not put the code in the right place in the style sheet??
    Should it replace this?
    img[class*="align"],
    img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */

  7. webkat
    Member
    Posted 2 years ago #

    You can remove the borders in the advanced section in visual editing mode.
    Yes, it is manual, but I like being able to choose which ones keep the border (I actually like it around the block photos)...not around transparent bg images, though.

  8. benju92
    Member
    Posted 2 years ago #

    Use this code, the CSS styles are set to none

    /* Image borders */
    img[class*="align"],
    img[class*="wp-image-"],
    #content .gallery .gallery-icon img {/* Add fancy borders to all WordPress-added images but not things like badges and icons and the like */
    border: 0px solid #ddd;
    padding: 6px;
    }
    .wp-caption img {
    border-color: #eee;
    }
    a:focus img[class*="align"],
    a:hover img[class*="align"],
    a:active img[class*="align"],
    a:focus img[class*="wp-image-"],
    a:hover img[class*="wp-image-"],
    a:active img[class*="wp-image-"],
    #content .gallery .gallery-icon a:focus img,
    #content .gallery .gallery-icon a:hover img,
    #content .gallery .gallery-icon a:active img {/* Add some useful style to those fancy borders for linked images ... */
    background: none;
    border: none;
    }
    .wp-caption a:focus img,
    .wp-caption a:active img,
    .wp-caption a:hover img {/* ... including captioned images! */
    background: none;
    border-color: none;
    }

  9. Eijgendaal
    Member
    Posted 2 years ago #

    Dear all,

    I added it in my child ccs, but nothing happend :( The last paragraphs in style now are as follows:

    }
    #site-description {
    color: #7a7a7a;
    font-size: 14px;
    margin: 0 270px 0.65625em 0;

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

    The grey borders around the images are still there. What am I doing wrong?

    Thanks!

    Maud

Topic Closed

This topic has been closed to new replies.

About this Topic