How to remove border, and shadow effect from images

  • Author
    Posts
  • #1654108

    Hello,

    I have a quick question. I love the feel of this theme. I’m in the process of transferring everything from my last theme to this one. I have a lot of work ahead of me, but I need help with images.

    Specifically on pages and posts, when adding an image to the page/post, by default it gives the image a white background. I’ve gotten rid of the background by adding to the image style:
    background: none;

    The problem is that the theme seems to add a border to the image. I cannot get rid of this border. It almost looks like a shadow or offset behind the image.

    I simply want to upload some small transparent icons to one of my pages, and I cannot get the look I need with this border issue.

    Can anyone tell me how to take care of this problem using image styles or maybe css? I’m very new to css, by the way.

    Thanks!
    http://www.rightbeatradio.com

    The blog I need help with is rightbeatradio.com.

    #1654171

    hfzrhmn
    Member

    This seems to be the CSS that affects the “border”:

    .image-highlight, .theme-shadow, .single-format-image .image-container img, .term-post-format-video .post img {
        outline: 1px solid rgba(255, 255, 255, 0.14);
        outline-offset: -1px;
    }

    On image posts, it’s the ‘.theme-shadow’ class that adds the outline, so adding this will remove the outline:

    .theme-shadow {
        outline: none;
    }

    (You might want to

    #1654172

    hfzrhmn
    Member

    …you might want to add the other classes (.image-highlight, .single-format-image, etc) if you want to remove outlines from those, too.

    #1654177

    Thanks for your fast help, hfzrhmn!

    I’m very new to these kinds of things (css), so could you please explain where it is that I should add that code?

    I have the custom upgrade, and when I add that in the Custom CSS box, it doesn’t change anything.

    Also, I’m not having any issues with the “Image” format posts, I’m having issues with just the “Standard” format posts and Default page format. Hope that helps.

    Thanks again!

    #1654199

    hfzrhmn
    Member

    Yeah, add that in Appearance -> Custom Design, and then Custom CSS. You might want to add !important also, so try adding this:

    .theme-shadow {
        outline: none !important;
    }
    #1654200

    Ok great, I’m going to play around with that and see if I can get it to work.

    By the way, in the Custom CSS box, it highlights certain functions in certain colors. What does Red mean? Does this mean something is wrong?

    In the line
    outline: none !important
    the ‘none’ is highlighted in red.

    Thanks so much for the help!

    #1654203

    hfzrhmn
    Member

    Red seems to indicate incorrect syntax, but outline:none is actually valid and it should apply correctly (see http://outlinenone.com/)

    You can also use

    outline: 0 !important;

    instead, just to avoid the red-ness.

    #1654234

    Ok thanks for all your help! I’ll give this a try.

    :)

The topic ‘How to remove border, and shadow effect from images’ is closed to new replies.