WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Catch Box] Remove Image Borders (11 posts)

  1. rfk55tn
    Member
    Posted 8 months ago #

    My apologies if this topic has already been posted, search box doesn't seem to work at all.

    I'm trying to remove image borders from images inserted into posts and pages. The images are in png format and are done as circular images but appear with a faint (but noticeable) square outline.

    Any suggestions?

  2. CrouchingBruin
    Member
    Posted 8 months ago #

    You should add a link to your site so we can examine it using a web debug tool.

  3. rfk55tn
    Member
    Posted 8 months ago #

    All three of the following pages have the same square around the graphic "SOS" "SSR" and "SOF" Each page has a graphic at the top (they appear to be the same but, they are not).

    http://www.americanpatriotleague.com/sosr/?page_id=14

  4. CrouchingBruin
    Member
    Posted 8 months ago #

    The theme has a rule which puts a gray 1px border around all images. The question would be, do you want to override that rule for all images or for just those three? If just those three, then add this CSS rule:

    img.wp-image-100, img.wp-image-101, img.wp-image-102 {
       border: none;
    }

    If your theme doesn't have a custom CSS option, you can add the CSS using a CSS plugin like Lazyest Stylesheet or Custom CSS Manager.

  5. rfk55tn
    Member
    Posted 8 months ago #

    I'd like to remove all borders from all images that are posted, not just these three.

  6. CrouchingBruin
    Member
    Posted 8 months ago #

    OK, change the rule to this, then:

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

    This essentially overrides the existing border property for images in this theme's stylesheet.

  7. rfk55tn
    Member
    Posted 8 months ago #

    Thank you for that information. There's only 1 problem. I really don't know where to paste that. I've found the style.css and found the section on images but, I have no idea where to plug that in.

    May have found it...not sure...but it's already in there. This is what I found as already being in the file:

    img[class*="align"],
    img[class*="wp-image-"],
    img[class*="attachment-"] {
    height: auto;

  8. rfk55tn
    Member
    Posted 8 months ago #

    This is what I've pasted. If you will, please let me know if this is correct:

    img[class*="align"],
    img[class*="wp-image-"],
    img[class*="attachment-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    #content .gallery .gallery-icon img,
    img.wp-post-image,
    img.attachment-thumbnail
    border: none;
    }

    BTW, this didn't work.

  9. CrouchingBruin
    Member
    Posted 8 months ago #

    OK, you shouldn't modify the theme's files directly; if the theme ever gets updated with new features or with a security patch, then you will lose all of your changes (you don't want to end up like this person). There are two routes you can take: 1) create a child theme (somewhat a bit of overkill for just making CSS changes), or 2) use a plugin like Lazyest Stylesheet.

    If you've never installed a plugin before, go to Plugins > Add New in your admin Dashboard. Enter lazyest stylesheet in the search field and click the Search plugins button. Click the Install Now link. After it's done installing, click the Activate link. You will now be able to add your own custom CSS.

    From the admin Dashboard, go to Appearance > Lazyest Stylesheet. Copy & paste the CSS rule from my previous message into the big field in the middle and click the blue Save Changes button.

  10. rfk55tn
    Member
    Posted 8 months ago #

    HOLY BOVINE SCAT BATMAN!!!!! IT WORKED!!! Thank you so very very much. It looks great. I'm going to be blocking this sub-domain soon so it's reachable only by members of the main site but, just so you can see...

    http://www.americanpatriotleague.com/sosr/?page_id=14

    Thank you CrouchingBruin...thank you so very much. That makes such a difference in the appearance of the pages. Far more professional looking.

  11. CrouchingBruin
    Member
    Posted 8 months ago #

    Looks good, congratulations!

Reply

You must log in to post.

About this Topic