Thanks for following up!

Best,

Chris

Thanks Chris,

Actually I couldn't explain above, have been doing the same. When it wasn’t working, I was adding the class with img.

All is working well now.

Cheers,
Meer

Hi there,

If you want to target specific images, you'll want to add a class name to the img tag like this...

<img class="noBackground" src="URL-TO-IMAGE-ETC" />

Then you can target the class name like this...

img.noBackground {
    background: none;
    border-radius: 0px;
}

Hope that helps.

Best,

Chris

Hi Chris,

This works except I had to add box-shadow:none;

Now it actually (i) effects all images on the page, while I would like to apply on selected image only (image with transparent bg) on the page. (ii) I will need to repeat whole thing for every page?

I have also been doing some research and found a solution. I added a class in the custom CSS, then I changed the class of the individual image inserted from the media library.

img.transleft {
border:none;
background: none;
margin: 0 15px 15px 0;
float: left;
box-shadow:none;
border-radius: 0px;
}

It worked, but after changing with your code, now am applying it again, it is not working which is very strange. Perhaps I am tired and making some mistake.

Would you suggest any modification in the img.transleft or any similar thing for individual image?

Please take your time as I`ll be leaving in 30 minutes.

Have a great weekend
Meer

Hi there,

You can target specific pages like this...

body.page-id-XXXX .entry img,
body.page-id-XXXX img.attachment-thumbnail {
    background: none;
    border-radius: 0px;
}

Just replace XXXX with the name or id of the page.

Best,

Chris

Hi Chris,

I have no problem with the styling of image(s) which is controlling its corners etc., rather I like it. However, I would like some pictures with transparent background. Right now they are coming up with white background and round corners. I would not mind inserting manually additional styling for those images in the html of individual page(s). Please advise.

By using the above in custom CSS, it removes border from every image, even from the blog page thumbnails.

Thanks,
Meer

Hi there,

You don't need to edit the style.css file. In fact, this is strongly discouraged. If you ever update the theme, you'll lose any edits made there. I've added a Custom CSS section to the customize panel for just these cases.

Please copy/paste the CSS I wrote above into your Custom CSS box on the customize page.

Best,

Chris

Sorry about posting to the wrong location. I thought I had picked the right one but anyway....I found this code in the style.css file via the Appearance Editor...

-------------------------------------------------
a.thumbLink img {
border: 1px solid #bbb;
padding: 5px;
background: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
--------------------------------------------------
and I changed it to...
-------------------------------------------------
a.thumbLink img {
border: none;
padding:0px;
}
-----------------------------------------------------
But it seems to of had no effect.

Hi there,

Throw this in the Custom CSS panel on the customize page...

a.thumbLink img {
    border: none;
    padding:0px;
}

Let me know if that helps.

Best,

Chris

[moving to WordPress Politico forum]

It's for the Wordpress theme.

Hi there,

Just to clarify, is this for the WordPress version or the the site template version of the theme?

Best,

Chris

Is there a way to turn off the white box that borders all images or pictures displayed on any given page or post? I have an image that has a transparent background but with the white box surrounding it the transparency is lost. Thanks for any suggestions.