How to Remove Image Shadows in Blogger

After reading through my tips on cleaning up your blog, a few people asked for instructions on how to remove image shadows in Blogger. There are two ways to do this – one is by adding a bit of CSS and the other is by removing it.

no-shadow
ADDING CSS: Under Design > Template Designer, click on advanced and then scroll to the bottom and click Add CSS. In the box paste this bit of code. If you would like to keep the borders and padding you can take those two lines out.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none!important;
  border: none!important;
  -moz-box-shadow: 0px0px0pxtransparent!important;
  -webkit-box-shadow: 0px0px0pxtransparent!important;
  box-shadow: 0px0px0pxtransparent!important;
}

DELETING CSS: Under Design > Edit HTML. Use Ctrl F or Apple F to open the finder window on the bottom of your browser. Type in .post-body img until it finds the following piece of code or something very similar depending on your template. Remove the bolded lines of code. Preview your template and then save. You can also remove the line that adds the border or change it to say 0px.

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);

background: $(image.background.color);
border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

Related Posts Plugin for WordPress, Blogger...
dashed-line
dashed-line

Comments

  1. Melissa says

    I love these Nerd Q & A’s!

    I’m sure it’s really simple but I’ve been trying SO hard to find simple instructions for how to increase the width of my blog. Blogger limits it to 1000px but I know (well, I think I know) I can change it in the HTML. I’m just not sure where.

  2. Emily says

    Thanks for sharing this tutorial. It’s so helpful. I do however have a question. I was able to remove the shadow from my pictures and gadgets – but when I view my blog in internet explorer there is an ugly shadow that appears on the body box. This doesn’t show up on FireFox – do you know how to adjust the settings so the format looks the same on all browsers?!

    Emily @ Hope Squared

  3. Liz says

    Hi there!
    Thank you for this great tip! I am just entering into the blogging world and I loooove it! Yout tips have helped a ton!
    I am wondering about fun tabs (contact, about, etc). Mine have lines between them…sort of like the shadow look. Any advice on getting rid of the lines? Thank you!!

  4. Ashley says

    I need some help please. I copied and pasted this just like you said, but all of my photos and graphics still have the drop shadow. I am desperate to get rid of it, but I cannot find a way to. Please let me know if there’s anything else I can do.

    Thank you!

    • sillygrrl says

      Hey Elizabeth, try looking through your HTML code for this:

      a img {
      border-top-width: medium;
      border-right-width-value: medium;
      border-right-width-ltr-source: physical;
      border-right-width-rtl-source: physical;
      border-bottom-width: medium;
      border-left-width-value: medium;
      border-left-width-ltr-source: physical
      border-left-width-rtl-source: physical;
      border-top-style: none;
      border-right-style-value: none;
      border-right-style-ltr-source: physical;
      border-right-style-rtl-source: physical;
      border-bottom-style: none;
      border-left-style-value: none;
      border-left-style-ltr-source: physical;
      border-left-style-rtl-source: physical;
      border-top-color: -moz-use-text-color;
      border-right-color-value: -moz-use-text-color;
      border-right-color-ltr-source: physical;
      border-right-color-rtl-source: physical;
      border-bottom-color: -moz-use-text-color;
      border-left-color-value: -moz-use-text-color;
      border-left-color-ltr-source: physical;
      border-left-color-rtl-source: physical;
      position: relative;
      }

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
      padding-top: 2px;
      padding-right: 2px;
      padding-bottom: 2px;
      padding-left: 2px;
      background-color: transparent;
      background-image: none;
      background-repeat: repeat;
      background-attachment: scroll;
      background-position: 0% 0%;
      border-top-width: 1px;
      border-right-width-value: 1px;
      border-right-width-ltr-source: physical;
      border-right-width-rtl-source: physical;
      border-bottom-width: 1px;
      border-left-width-value: 1px;
      border-left-width-ltr-source: physical;
      border-left-width-rtl-source: physical;
      border-top-style: solid;
      border-right-style-value: solid;
      border-right-style-ltr-source: physical;
      border-right-style-rtl-source: physical;
      border-bottom-style: solid;
      border-left-style-value: solid;
      border-left-style-ltr-source: physical;
      border-left-style-rtl-source: physical;
      border-top-color: transparent;
      border-right-color-value: transparent;
      border-right-color-ltr-source: physical;
      border-right-color-rtl-source: physical;
      border-bottom-color: transparent;
      border-left-color-value: transparent;
      border-left-color-ltr-source: physical;
      border-left-color-rtl-source: physical;
      }

      You should be able to take out the parts that say “border” to fix the issue. Make sure to preview your blog BEFORE saving to avoid breaking anything.

  5. Susana says

    omg thank u so much! I’ve been trying to get rid of the tranparent background and I finally did! thank u so much!!

  6. Kimber says

    I got the shadows to go away … but only when I’m viewing my blog in IE. They’re still there in Firefox. Any ideas?

    I just found your blog and I’m loving it!

  7. Janine says

    If it possible (and indeed appropriate) to love a complete stranger for telling me how to remove those pesky shadow boxes, then I think I love you!!! Thank you!

  8. christina says

    Thanks so much for this post! My brand new custom signature had a shadow box around it and it was driving me nuts! Your tutorial fixed it right up and now it looks beautiful!

  9. evie says

    hey! i just found your blog because i wanted to find a way to remove those annoying shadows. But i couldn’t do it :( when i go to HTML i remove the code i can see that it’s ok on preview but when i trued to save it pops up a window that says this can be done… i don t know why :/
    please help me if you know. Also i tryed the other one but nothing!

    P.S. i really love your blog by the way :)

  10. Alexis says

    Hey! I’m designing a blog layout for an internship, and you just made one small step so easy! Thanks a bunch!

  11. zahra says

    thank you so much! this has been bugging me, for ages!
    i just have to sort out how to get the spacing even between images- my blogger editor doesn’t want to behave!

  12. Claire Taylor says

    Hey

    This post was so helpful. I’ve just redesigned my blog and really wanted to get rid of the image shadows. Your instructions were incredible easy to follow and I am very happy with the result.

    Thanks again and I will be adding your blog to my favourites!! :o)

    Love Claire xx

  13. Soph says

    oh my god i can not thank you enough! I have tried so many tutorials and none of them have worked, and yours did straight away! thank you so much!!!

  14. Jennifer says

    Totally love your site, its been very helpful and super well designed in every way. Question on the removing shadow on the pictures post – the instructions worked, but it also messed up my header. I have a piece of code in the Advanced CSS box and it went away and when I put it back it would not work. When I added the shadow box code back into HTML, then it was fine again. Anyway to have both, no shadow box and a centered header? Blogger is nutsy! Many Thanks!

  15. Tracey says

    Oh my god, you’re a genius!! You have no idea how long this has been bothering me on my blog! For some reason it didn’t work when I added the CSS, but when I went into the Edit HTML section (not without a little fear) it worked perfectly. I’m SO happy right now.

  16. Kate says

    So I’m launching my blog tomorrow, and I was just putting in the first scheduled post and previewing it and realized how much I hated the image shadow – I remembered seeing this, came and looked it up, and three minutes later, I’m done. Thanks so much!

  17. Melinda says

    Thanks, I needed this! The CSS didn’t work for me, but the HTML edit did. You have such great tips, and very easy to follow for those of us who are lacking in coding experience. Thank you so much!

  18. a says

    It didn’t work. I tried css and html and deleted the whole padding thing and still horrible shadows. I think it has to do with dynamic views?

    • Sarah says

      Sorry! I do my best to provide tutorials that will work for most people, but there’s no possible way to check that it’s compatible with every template.

  19. Melinda says

    So I’ve been changing things up on my blog lately. I removed the image shadows and lines, but now I feel like I need something to separate the post footer from the next post. Any tips on adding a simple gray horizontal line between posts? I’d also like to add a vertical one between the posts and the right side column. I’m using Simple template.T

    Thank you!

  20. Melinda says

    So I noticed for some reason the CSS did not work for me and the HTML did, but caused some other formatting issues in my blog. (Margins and header centering that I had added in CSS disappeared for some reason when I deleted the lines you listed above in Edit HTML). If anyone else has an issue with deleting the HTML code or adding the CSS, I have another recommendation. Instead of deleting the lines you recommended, I kept them but changed every number to 0 (in the Edit HTML).

    In other words the code you mentioned:

    border: 1px solid $(image.border.color);

    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
    }

    Changes to:

    border: 0px solid $(image.border.color);

    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    }

    Hope that helps anyone else that may have had issues with deleting the HTML code. I think it was problematic for me since I had already made other adjustments to the template.

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>