Remove Image Borders

  • Resolved holgatemethodist

    (@holgatemethodist)


    9 years, 8 months ago

    I took over running my church’s website last year, but have struggled with removing the borders around certain images. The website is https://www.holgatemethodistchurch.org.uk however I think that https://www.holgatemethodistchurch.org.uk/charities/ probably shows it better if you look at the twitter & facebook logos etc. Ideally I’d like to have it so I could choose which images have a border & which don’t, as a border on some larger images like the homepage are better being kept. I’ve spent hours trying to find the answer, but no look – hopefully one of you can help!

Viewing 15 replies - 1 through 15 (of 18 total)

  • look into css file, line 953. remove border option there.

    https://www.holgatemethodistchurch.org.uk/wp-content/themes/twentyeleven/style.css

    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    look into css file, line 953. remove border option there.

    https://www.holgatemethodistchurch.org.uk/wp-content/themes/twentyeleven/style.css

    @laliz Please don’t recommend that people edit the original theme that way. They will lose all of their changes when the theme is updated.

    Instead suggest that they create and activate a child theme or use a custom CSS plugin.

    https://codex.www.ads-software.com/Child_Themes

    https://www.ads-software.com/plugins/search.php?q=custom+CSS

    And put their CSS changes there.

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

    oops my bad. Point noted

    Thread Starter holgatemethodist

    (@holgatemethodist)

    Thank you – does this allow you to choose which images do/don’t have a border, or does it set them all to without borders?

    I think that example will remove all borders.

    You could add a border to specific images but you would need to work out the selector that will override the rule that Jan Dembowski offers.

    This might do what you want:

    div.entry-content img {
border: none;
}

    Then this rule would add a border in for just the image on the home page:

    img.wp-image-13 {
  border: 1px solid #ddd;
}

    Don’t overlook the advice to either use a plugin to add CSS or a child theme.

    Thread Starter holgatemethodist

    (@holgatemethodist)

    Thanks martcol! How do I know what to type for adding a border to other images? From what I understand the “img.wp-image-13” relates to the specific image, but I can’t work out where you got that from.

    Publish your post and then use your browser tools to get the class. Right click in the browser and “inspect element.” The class will be shown in the img tag.

    You can then add that image to the same rule if you want the same border, each selector must be comma separated.

    Thread Starter holgatemethodist

    (@holgatemethodist)

    I’ve done this, however I can still see a border around images that I didn’t say to keep it with. The images on the worship page shouldn’t have a border but they do!?

    I used the Simple Custom CSS plugin to edit the CSS, and used the following code: ` /* Enter Your Custom CSS Here
    div.entry-content img {
    border: none;
    }

    img.wp-image-13, wp-image-352, wp-image-321, wp-image-341, wp-image-326, wp-image-46, wp-image-43, wp-image-485, wp-image-486, wp-image-484 {
    border: 1px solid #ddd;
    }*/ ` have I done this right?

    So, see what happens if you use this as the border: none:

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

    And stick with the rule for border: 1px solid none;

    Thread Starter holgatemethodist

    (@holgatemethodist)

    That doesn’t work either.

    /* Enter Your Custom CSS Here
div.entry-content img {
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
  border: none;
}
}

img.wp-image-13, wp-image-352, wp-image-321, wp-image-341, wp-image-326, wp-image-46, wp-image-43, wp-image-485, wp-image-486, wp-image-484 {
  border: 1px solid #ddd;
}*/

    Any other ideas?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What’s this:

    /* Enter Your Custom CSS Here
div.entry-content img {
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
  border: none;
}
}

    You can’t nest CSS like that, unless you’re using SCSS? If you’re using SCSS then you need to recompile that SCSS every time you make a change, recompile into CSS.

    Thread Starter holgatemethodist

    (@holgatemethodist)

    Andrew – I’ve just done what people have told me to do!
    Please can you explain what I should be doing?
    Also what is SCSS?

    Your CSS is inside the comment tags – so it’s not even being read – see this:

    */

    That has to be here:

    /* Enter Your Custom CSS Here */

    Not below your CSS. You also have an extra closing bracket… CSS is very picky about syntax. So fix the above and then try this CSS:

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

img.wp-image-13, wp-image-352, wp-image-321, wp-image-341, wp-image-326, wp-image-46, wp-image-43, wp-image-485, wp-image-486, wp-image-484 {
  border: 1px solid #ddd;
}

    Thread Starter holgatemethodist

    (@holgatemethodist)

    That makes sense now WPyogi – thanks!

    /* Enter Your Custom CSS Here */
div.entry-content img {
img[class*="align"], img[class*="wp-image-"], #content .gallery .gallery-icon img {
  border: none;
}

img.wp-image-13, wp-image-352, wp-image-321, wp-image-341, wp-image-326, wp-image-46, wp-image-43, wp-image-485, wp-image-486, wp-image-484 {
  border: 1px solid #ddd;
}

    However, I’ve put this in as the code now but it still seems to have a border around all images! Any ideas?

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Remove Image Borders’ is closed to new replies.