How to remove/hide image border in WordPress Twenty Eleven child theme

  • Resolved abigfun

    (@abigfun)


    11 years ago

    I installed WP version 3.8.1, WP theme Twenty Eleven version 1.7, and created a child theme to customize my style.

    I copied part of content (those I want partial or complete change) from style.css in Twenty Eleven into my child theme.

    I want to remove or hide the border of images attached to posts and pages, include those listed in home page and category/parent pages.

    I tried tips that works fine for many other people, but unfortunately, I got no luck.

    These tips (editting style.css) are:

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

    Tick #2:
    for Tick #1, change “border: none;” to “border: 0;”

    Tick #3:
    img[class*=”align”],
    img[class*=”wp-image-“],
    #content .gallery .gallery-icon img {
    border: 0px solid #ddd;
    padding: 0px;

    Tick #4:
    under /* Image borders */, change the values of all “border-color” and “background” to #fff or #ffffff.

    I tried to change post format from image to gallery, but still no luck.

    Here are the links to index on Home, and Category, Page, and Post.

    I hided the image caption, and there is no bottom border of images in index.

    Any help will be highly appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • W.P. Ginfo

    (@wp-ginfo)

    .wp-caption {
	background: none;
}
    1. Add the code above to the ‘styles.css’ of your childtheme
    2. press <ctrl-F5> to refresh the browser
    3. check the result

    == == == How to find which CSS to change

    About finding out ‘which things to change in your site [css / html / php]

    Well it’s all a bit like trying to solve a puzzle.
    Fortunately there are good tools for that.
    In your browser: Install / activate webdevelopment add-ons / plugins.

    Recommended: ‘Firebug’ and ‘webdeveloper: https://www.chrispederick.com ‘
    These tools will show you what’s what.
    e.g. right-click > inspect elements > click left bottom arrow-icon
    click item in webpage
    Inspect css on the right
    alter css values to test effect / result
    OK? copy altered css rule
    paste it in the custom-CSS-tab of your theme or style.css of your childtheme, if such a custom-css-feature is not available in your theme.

    Alternatively:
    Press <F12> a screen will show in the bottom.
    Move the mouse over each line
    The area shows in the top-half
    Press + to unfold parts
    Investigate and alter on the right etc.
    paste it in the custom-CSS-tab of your theme or style.css of your childtheme, if such a custom-css-feature is not available in your theme.

    Thread Starter abigfun

    (@abigfun)

    TO W.P. Ginfo,

    Many thanks for your kind patience and reply, really informative and helpful.

    Yes, you said it, custimization a theme is really a brain teasing puzzle for me.

    Your solution works almost perfect for me. When I added the following lines:
    .wp-caption {
    background: none;
    }

    It does work mostly, the image borders, originally grey bars, in page and post are changed into slim grey lines. And the black-barred image borders in Home and Categlry still stay there.

    Then I added “!important” to your code, and got very good luck. The image borders in home page and category disappeared.

    While the image borders in individual page and post remains in slim grey lines. I tried to change some code values and found it’s done!

    Finally, my customization is as following:

    /* Image borders */
    img[class*=”align”],
    img[class*=”wp-image-“],
    img[class*=”attachment-“]
    #content .gallery .gallery-icon img {
    border: 0px solid rgb(0, 0, 0);
    }
    .wp-caption {
    background: none !important;
    }
    .wp-caption img{
    background: none !important;
    }

    Thanks again for your epertise, kindness and time.

    Thread Starter abigfun

    (@abigfun)

    Problem resolved.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to remove/hide image border in WordPress Twenty Eleven child theme’ is closed to new replies.