How to remove border, and shadow effect from images

rightbeatradio · Member · Feb 14, 2014 at 3:22 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
hfzrhmn · Member · Feb 14, 2014 at 3:43 am
Copy link
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
hfzrhmn · Member · Feb 14, 2014 at 3:44 am
Copy link
…you might want to add the other classes (.image-highlight, .single-format-image, etc) if you want to remove outlines from those, too.
rightbeatradio · Member · Feb 14, 2014 at 3:56 am
Copy link
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!
hfzrhmn · Member · Feb 14, 2014 at 5:49 am
Copy link
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;
}
```
rightbeatradio · Member · Feb 14, 2014 at 11:53 am
Copy link
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!
hfzrhmn · Member · Feb 14, 2014 at 2:09 pm
Copy link
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.
rightbeatradio · Member · Feb 15, 2014 at 12:21 pm
Copy link
Ok thanks for all your help! I’ll give this a try.

:)

No items found.