Remove Border and Shadow from Images in Blogger

Remove Border and Shadow from Images in Blogger

Blogger has recently customized the templates in such a way that images are displayed with a default border and shadow. But what if you want to blend images with the posts background?

 

Steps to remove the image border and shadow:


1. Log in to your blogger account

2. Go to Template -> Click Edit HTML and then Proceed.

3. Find the following code using Ctrl+F:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

4. Replace the above code with the following:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: transparent;
border: none;

-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;

5. You can preview the template before saving. If you are happy with the changes - Click Save.


2 comments:

  1. Sorry, I added a link to my previous post before reading your warning. I used your method on one of my Lovely Templates and it worked perfectly. However, when i used is on another template, I continue to get the border around the images in my posts. The table surrounding the image is also the full width of the post instead of the width of the image. Interesting, I never found the .post-body-img in either of the Lovely Templates, I just added your CSS to the code.

    ReplyDelete
    Replies
    1. I checked your blog and it seems to be working. None of your images have border and shadow.

      Delete

All comments are moderated, so please don't spam. Do not add URL links inside comments, they won't be published.

About Me

facebook
A computer science graduate with over 7 years experience in Web/Game development, A passionate Blogger and Photographer.
Copyright © in4mix.org | Sitemap |. Powered by Blogger.