Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, March 13, 2011

Remove Blogger Picture Shadow and Border

Couple of weeks ago, I published a post on how you can add shadow around your images. Some templates don't come with this feature, so you gotta add it on your own if you want it. But some of you are using templates that do come with this feature. And if you wanna remove this feature for reasons only God knows why, this week is going to be your lucky week, as I'm gonna show you how you can get rid of the shadows and borders in 1 easy step.


Note: This tweak isn't for Dynamic View templates. To remove borders and shadow from your Dynamic View pictures, see this link --> Remove Border and Shadow from Blogger Dynamic View Images.


If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 
.post-body img, .post-body .tr-caption-container, .ss, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: none !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}
There, you've gotten rid of your annoying shadows and borders. Cheers all.

498 comments:

  1. thanks for detail information!

    ReplyDelete
  2. @sun: No problem at all. Have fun. Cheers and God bless.

    ReplyDelete
  3. thankyou, thankyou! I've been trying to do this with no luck!

    ReplyDelete
  4. @Luz e. {Wee Waldorf}: Happy to help.

    Cheers and God bless.

    ReplyDelete
  5. OMG!!! Finally. Thanks soo much for this info. =)

    ReplyDelete
  6. @Fanzi: Glad you find it helpful. Cheers and God bless.

    ReplyDelete
  7. Thanks a lot! Been searching for a good code for half an hour now but this one finally works!

    ReplyDelete
  8. @Anon: Glad you find this post helpful. Cheers and God bless.

    ReplyDelete
  9. ty ty ty ty it worked after so long trying to figure out why those image shadows were still there! many thanks

    ReplyDelete
  10. @Aral: Glad you like the mod. Cheers and God bless.

    ReplyDelete
  11. hi, how about the shadow around the main body? I want my blog to be all white, I changed the main backround , header back ground and post background to white, but there is a rounded border around the main post. how do i get rid of it

    ReplyDelete
  12. hi I have discovered how to remove shadow spread around post main body

    I searched for the content.shadow.spread in the html code

    I change the values to zero.

    ReplyDelete
  13. @shem: Glad you found a work around. Cheers.

    ReplyDelete
  14. @Cheyenne: You're welcome. Cheers.

    ReplyDelete
  15. you saved my life! been looking for hours, high and low how to remove the damn shadow, and taaadaaa, here you are!
    thank you so much!

    ReplyDelete
  16. @veneta: Glad you find it helpful. And thanks for the feedback. Cheers.

    ReplyDelete
  17. I have just one picture I'd like to do this with- the picture I use for my "Contact Me" button. Is there a way to just remove the white border for it? I'd like to keep the white border around all the other pictures on my blog.
    Thanks for your help!
    Deb
    debzpicaday.blogspot.com

    ReplyDelete
  18. @Deb: Yes you can. You just have to address the right element. This is what you need. Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    #Image1 img{
    padding: none !important;
    border: none !important;

    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    Note that this will not remove the white area around the picture, as the it came with the picture itself.

    ReplyDelete
  19. Since that particular picture (button) has the white area already around it and I can't remove it, I have an additional question if you don't mind...

    I'd like it to be like my "Grab My Button" button.I made both buttons at the same site, but with my "contact me" one I downloaded it (didn't do html), then added it as a picture gadget (which is probably why it has the extra white around it).

    Is there a way I could use the html code from the site instead to create the "Contact Me" button?

    Thanks again! Deb

    ReplyDelete
  20. @Deb: My apologies for not suggesting this earlier. Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    #Image1 img {
    background: none !important;
    }

    ReplyDelete
  21. Hi,

    I have a similar question: I want to remove the shadow and border on only one image that I'm placing as a picture gadget. How can I do that without affecting other images on my blog. It seems like you've addressed it above, but I'm not understanding exactly how to connect it to that one image. Thanks!

    ReplyDelete
  22. @Sarah: It's easy actually. We just have to apply the code to the right image. To do that, we have to identify the picture gadget's ID. I'll do it for you, but first you need to tell me which image you're referring to. You seem to have few images on your sidebar.

    Cheers.

    ReplyDelete
  23. Oh, sorry - I didn't realize that you were actually looking...that's great! I'm planning on adding a number of images (where you just see 2 right now) under the heading "My drawings". So, I want to be able eliminate that shadow on all of them. Also, while we're at it, can I easily move those images closer together...eliminate much of the space in between? I's like to learn how to do it so that I can easily update it myself as I add images. Thanks...your site is a godsend!

    ReplyDelete
  24. @Sarah: I think HTML/Javascript gadget will be best suited for your case. Get in touch with me via the Contact form, and I will assist you further. Cheers.

    ReplyDelete
  25. Hello! This is very helpful because I kept finding how to remove the border but not the shadow! I created a signature that I would like to use at the bottom of my posts but I obviously don't want the border/shadow around it so it looks more natural. For now I want to keep the borders/shadows for my other pics but would like to delete it from my signature image. Can you help? Thanks for this post!

    ReplyDelete
  26. @Andrea: Hi there, I think I can help. I assume you've gone to Settings - Formatting - Post Template to place your code for the signature image. I need to have a look at that code first before advising you further. Just copy and paste the code here. You can remove all the '<' and '>' from the code, as you can't input some HTML tags in Blogger comments. I'll be able to figure it out. Or alternatively, use the contact form to email it to me.

    ReplyDelete
  27. Thank you so much! I tried to email you but the verification code wouldn't come up so I couldn't send it...

    Here is the code that I had generated for me by MyliveSignature.com :

    Hi. I left a comment about removing the border and shadow from my post signature.

    Here is the code that I have:

    a href="http://www.mylivesignature.com" target="_blank" img src="http://signatures.mylivesignature.com/85912/andreajoy/bcdad22467bb86119feb4f251f6d92be.png" border="0" style="border: 0 !important; background: transparent;" / /a

    ReplyDelete
  28. @Andrea: Lovely.

    All you have to do now is:

    1) Add two extra lines to your signature image code, particularly the first and last line shown in the code below:
    <div id="SSUniqueID">
    <a href="http://www.mylivesignature.com/" target="_blank"><img border="0" src="http://signatures.mylivesignature.com/85912/andreajoy/bcdad22467bb86119feb4f251f6d92be.png" style="background: transparent; border: 0 !important;" /></a>
    </div>

    2) Now Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    #SSUniqueID img {
    padding: none !important;
    border: none !important;

    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    That should remove the border and shadow from your signature image alone. Cheers.

    ReplyDelete
  29. Me again. Thank you very much for working on this...but it's still coming up with the shadow. I'm at work so I think my computer's security is preventing me from emailing you so I'll try when I get home.

    I tried both adding the 1st and last line (that you bolded) to my signature code and just copy and pasting the whole thing from your comment and both showed up with a shadow.

    I don't know if it makes a difference that this is already in my CSS:

    #header-inner
    {
    width:950px;
    margin: auto;
    }

    ReplyDelete
  30. Awkward. What is your blog's address? Let me have a look at it, I'll be able to tell what went wrong. Cheers.

    ReplyDelete
  31. My blog is at

    http://atreeplantedbywater.blogspot.com/


    Also...see on the upper right hand side how there's a green border with nothing in it? Above my pic? That's a html gadget that I used to imput my design template...is there any way to get rid of the border for that one gadget? It's ok if I'm asking too much! I really appreciate your help with my first question.

    ReplyDelete
  32. For the green box, Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog: #HTML1 {
    padding: none !important;
    border: none !important;
    margin-bottom: -42px;

    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    And for your signature image, I don't see the signature image or the code that I gave you previously anywhere in your blog. Put them there and let me know. Cheers.

    ReplyDelete
  33. Wow! That is so awesome! I've been wondering how to get rid of that green box ever since I started...granted it's only been a couple months but it was still really bugging me! Thank you! Thank you!

    Ok. I believe I have everything in there from what you sent. I thought I saved it before but I was trying a bunch of things so I probably accidentally saved it without the code.

    ReplyDelete
  34. @Andrea: I'm still not seeing your signature image and the code that I gave you.

    1) Go to Dashboard - Settings - Formatting - Post Template - Paste the following code - Save.

    <div id="SSUniqueID">
    <a href="http://www.mylivesignature.com/" target="_blank"><img border="0" src="http://signatures.mylivesignature.com/85912/andreajoy/bcdad22467bb86119feb4f251f6d92be.png" style="background: transparent; border: 0 !important;" /></a>
    </div>

    2) Now Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    #SSUniqueID img {
    padding: none !important;
    border: none !important;

    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
    }

    When you are done, check and double check before getting back to me. Make sure you can see your signature image, by publishing a dummy post - so that I can see the signature image in place. And make sure the CSS code that I gave in step 2 remains there when you go to Template Designer - Advanced - Add CSS. Cheers.

    ReplyDelete
  35. Hallelujah! It finally is saving it! And I saw your response to my other question and now that saved as well!

    Everything is working! My signature loads pretty slowly but since it's the last thing people see on the post, it doesn't really matter...by the time they get to that point on the page it will probably be loaded.

    Thank you, thank you, thank you!! Seriously. I am so appreciative of your knowledge and patience! I am still in the early stages of blogging so I have a ton to learn. Thank you so much for not only posting these solutions but being so willing to help troubleshoot with individual cases. You are awesome!! I will definitely be spreading the word about your site. Have a great day! Just gotta say "thanks" again! :)

    ReplyDelete
  36. @Andrea: Yeahh~ You're most welcome. As for your slow-loading signature image, if I were you, I'll go to your blog - right click on your image - save it to my computer - then I'd go to my blog - create a new post - in Compose mode - upload this picture - then I'd click on Edit HTML mode - copy the address of this picture - then I'd go to Dashboard - Settings - Formatting - Post Template - Locate the old address of the image, which is hosted at mylivesignature.com, and replace that address with the new address for the image, now hosted at blogger.com.

    Try it. Cheers and God bless.

    ReplyDelete
  37. You rock! Thanks so much for sharing this.

    ReplyDelete
  38. Hi there. My blog is www.chicagobungalov.com and I am trying to remove the border around the Facebook link I set up using the image widget. I want the border to remain on my post pics. Any suggestions?

    ReplyDelete
  39. @Vintage Wren: No problem. Glad you like the post. Cheers.

    @Jen: It can be done. It's the same way I suggested to Andrea in the comments above. I could help you directly, but I need to have a look at your HTML/Javascript gadget that you have used for the Facebook gadget. Send the content of this gadget directly to my email, using the contact form.

    ReplyDelete
  40. Thank you, I needed this :o))))

    ReplyDelete
  41. @Tanja: No problem. Cheers :)

    ReplyDelete
  42. Gah, any reason why this would not work? I still have the shadow. Thank you!

    ReplyDelete
  43. @EchoCafe: It's unlikely, but if you have an incomplete CSS rule in your template, all new rules will be void until you fix the broken one.

    On the other hand, I don't see the shadow in any of your images in your blog. What am I missing?

    ReplyDelete
  44. Hi there, I must be the only person on the planet that cannot figure this out! I have done everything you said, and in the template designer window, there is NO shadow, but when I view the blog, there IS! So annoying. Any advice? Thanks in advance..and sorry for the dumb question! :)

    the blog is http://sunshineandstrawberriesblog.blogspot.com/

    ReplyDelete
  45. THANK YOU THANK YOU THANK YOU! Wish this post would have come up in my google search sooner, just spent an hour trying different codes I had found other places & none of them worked - but this one did! Bookmarking your site for help as I'm sure I'll need in the future. Thanks!!!

    ReplyDelete
  46. @Misty Kearns: You're very much welcome. Should you have a question you'd like to ask me, feel free me to contact me using the contact form.

    @natalie: Someone added a broken code into your template, and this prevents any additional CSS code from being functional. Just remove this broken piece of junk and your shadows will be gone. Go to Dashboard - Design - Edit HTML - Find for the following line:

    style="border:none;".post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img

    Delete the following tag from the above line:
    style="border:none;"

    You should have this after removing the junk:
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img

    Cheers and God bless.

    ReplyDelete
  47. THANK YOU SO MUCH!! You have no idea how much I appreciate it!! That border was driving me crazy!
    Natalie :)

    ReplyDelete
  48. @Natalie: No problem at all. Glad you got rid of them. Cheers.

    ReplyDelete
  49. bless your soul. I've been search for hours. Finally!

    ReplyDelete
  50. @Anon: Kudos to you for finding it!

    ReplyDelete
  51. I have a question but first, let me tell you, you are awesome, indeed. You are like Code Master lol.
    To the question, I read in the comments about removing the shadow in a signature picture, I applied it, but it didn't work, can you help me figure it out? My blog is melibusla.blogspot.com

    On the other hand, I applied your code to remove the shadow of a picture in one of my pages, and it totally worked, I just changed the "SSUniqueID" to "SSUniqueID2" :p

    Also, I wanted to let you know that I've applied your tutorial on "rounded corners for blogger widgets/post boxes" on my images and it worked lovely.
    Thanks a lot for everything!

    ReplyDelete
  52. @MeliBusla: It worked on your latest post. For your previous posts, you need to edit the posts - one at a time - click on Edit HTML - Find for the signature image's HTML - and include the SSUniqueID part.

    I've published a new post on this. Check it out:
    Removing Border and Shadow from Blogger Signature Image

    ReplyDelete
  53. Thanks for sharing this!

    http://www.techykikay.info

    ReplyDelete
  54. @Meg: No problem at all. Happy to share.

    Cheers and God bless.

    ReplyDelete
  55. Hi there,

    I tried to get rid of the shadows on my blog, but for whatever reason the code here didn't work.

    Are you able to help me with this?

    Thanks !

    ReplyDelete
  56. @gypsy: I might be able to, but I need to take a look at your blog first. What is your blog's address?

    ReplyDelete
  57. @Heather: No problem. Cheers and God bless.

    ReplyDelete
  58. THANK YOU so much! I have been searching the internet for hours to solve this. You are fantastic!

    ReplyDelete
  59. hi, i think there's a broken code in my template somewhere cause i've used your code to remove the white border around my pics but cant seem to get rid of it.. could you check for me please?

    http://helloxinyiyeo.blogspot.com/

    thank you!!

    ReplyDelete
  60. Hello! You seem to have an extensive amount of knowledge on these fixes so I'm hoping you might be able to help me.

    I have multiple pictures in my right sidebar which all have a white border around them. Specifically my 'Disclaimer' button (the cello in the polaroid frame) has an entirely filled white background (even though I uploaded the image as PNG with a transparent background, and in my pop-up 'Picture Gadget' upload window, the white background doesn't appear to exist).

    I've tried copying and pasting your above code fixes (that you supplied to Deb) in my Template Designer-Advanced-Add CSS space, but so far nothing seems to have worked.

    I would also really like to get rid of the white border around my header, and the filled white corners around my images with rounded corners. Maybe I'm just missing something, but I've tried quite a few things and nothing seems to have worked so far.

    Are you able to help me? Should I contact you?

    Thanks so much!

    ReplyDelete
  61. OH MY GOODNess. Thanks a million. This has been driving me beyond insane. Thank you thank you!

    ReplyDelete
  62. @beencie: Happy to help. Cheers.

    @Xinyi: Why do you think there is a broken code in your template? What seems to be wrong?

    @Molly: I've added an extra line to the tweak above. Try it again, it should work like a charm now. As for your header, I see that you've already taken care of it. Cheers.

    ReplyDelete
  63. Thank you so much! I really appreciate the help. I've been looking for that fix for such a long time; it worked perfectly! And yes, it turned out that my header issue was with the photo I uploaded, so I edited a new one. :) Thank you again!!!!

    ReplyDelete
  64. I have spent hours looking for a fix for this, so thanks!

    ReplyDelete
  65. I just commented, but want to add that my eyes glaze over and my brain freezes when I look at HTML, so I *really* appreciate this!!!

    ReplyDelete
  66. Thank you sooo much! I have been looking for a solution to that for quite some time now and this time it really worked perfectly. :) And yes, the issue with my header was with the image itself, so I created a new one.
    Thank you again for your help, it is really appreciated! :D

    ReplyDelete
  67. @Lindsey: No problem at all. Glad you got rid of the shadow.

    @Georgia: Happy to help. Cheers.

    @Molly: No problem. And thanks for pointing it out. I thought there was no need to disable the background. Clearly I misjudged.

    @Pink Tree Studio:my brain freezes when I look at HTML

    That used to happen to me a long time ago. And no problem. Thanks for the feedback. Cheers.

    ReplyDelete
  68. DAMN! you're the man! read like a hundred write ups like this and NONE did what i wanted.. this was SO easy! YEEEES!!!

    ReplyDelete
  69. @Rich: Gimme a discount if I ever come to your studio to get an ink :P

    ReplyDelete
  70. just wondering how can I remove the spaces from the photos? thank you!
    here is my blog- http://abinavarrete.blogspot.com/

    ReplyDelete
  71. @Abi: What spaces? If you meant the little gaps between your photos, go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    .separator img{
    margin-bottom: -9px;
    }

    Cheers.

    ReplyDelete
  72. Thank you so much! =) another thing, almost all photos are posted continuously but when it comes to the first and second photo, there is still a small space. what to do? thank you again!

    ReplyDelete
  73. it's me again. my photos on the other blogposts encountered some spacing and alignment problem
    http://abinavarrete.blogspot.com/2011/09/bling-me-on.html
    http://abinavarrete.blogspot.com/2011/09/beernaked.html

    kindly check those two links.
    thank you so much! I tried to fix it myself but I can't find the right solution.

    ReplyDelete
  74. @Abi: When you edit this post, when you click on 'Edit HTML' mode, all the images need to have the word 'separator' associated to them. It seems like the first two images don't have this class. An easy fix will be to delete these two images, and reupload them. That should fix it.

    ReplyDelete
  75. Thank YOU! I've been messing around with stupid html all day trying to figure out things like this. I'm an idiot. Should have just straight up googled it. Appreciate the tip!!

    ReplyDelete
  76. @Sarah: Glad you finally got rid of it. Cheers.

    ReplyDelete
  77. yay thank you!! this was the only thing that was easy and worked for me!

    ReplyDelete
  78. @Sara: Glad it worked. Cheers..

    ReplyDelete
  79. Yay!! Thank you!!! Best solution by far

    ReplyDelete
  80. @Georgianna: You're welcome. Cheers and God bless.

    ReplyDelete
  81. thank you thank you thank you! this made it so much easier! spent an hour trying to read html code when what i should have done was go to your site first! will be bookmarking you and definitely will be me go-to place for blogger tips!

    ReplyDelete
  82. @jamie: That's nice to know. Let me know if you're looking for a particular help on something specific. Cheers and God bless.

    ReplyDelete
  83. Just saved me again, so happy I bookmarked this! Thanks! :)

    ReplyDelete
  84. @natalie: You're most welcome. Cheers.

    ReplyDelete
  85. Yipppeeee!! I did it and it worked. Thank you so much for this tutorial!
    woo hoo.
    xo
    Andee

    ReplyDelete
  86. @Andee: Glad you got that sorted. Cheers..

    ReplyDelete
  87. I have been searching and searching for a way of doing this for months!! Every tutorial has been useless, however, this is fantastic!! thankyou SOO much!!
    http://oliviadollydaydream.blogspot.com/

    ReplyDelete
  88. @Dolly: Glad you finally found a fix. Happy Blogging. Cheers and God bless.

    ReplyDelete
  89. Thanks so much for this! I've been trying to find a way to make sure that none of my photos had borders regardless of the type of browser someone is using. Just out of curiosity, if I would want to remove the code what would I do?

    ReplyDelete
  90. This was very helpful!!! Thank you so much!!! :-)

    Irene
    http://littlewaystoheaven.blogspot.com

    ReplyDelete
  91. @Tricia: You'd have to go to your template's HTML, and look for the code that looks very similar to the code that I've provided above - and delete them. But I don't recommend you diving into your template's HTML if you're not sure what you're doing. That is why I wrote an over-riding code instead. It should work as good :)

    @Irene: Glad you find it helpful. Cheers and God bless.

    ReplyDelete
  92. Thank you very much, it helped me alot !! Please i need more effects on my site,, suggest me some..

    ReplyDelete
  93. @Deepak: Well, template customisations are often matters of personal preferences. I like simple designs. What kind of effects are you looking for?

    ReplyDelete
  94. THANK YOU! These have been driving me nuts for far too long!!!

    ReplyDelete
  95. @Macri: Glad this tweak put an end to your search :) Cheers.

    ReplyDelete
  96. I have been trying to do this for ages! It worked, thanks so much :)

    ReplyDelete
  97. @Hoola: Your search is finally over! :)

    Cheers.

    ReplyDelete
  98. Thank you so much!!!!! finally found something that worked! really easy too! thank you!!

    ReplyDelete
  99. @Espressodoll: Glad you like the tweak. Cheers.

    ReplyDelete
  100. @Britty: You're most welcome :)

    ReplyDelete
  101. THANK YOU!! that was starting to annoy me so much. something like that should totally be a default.

    ReplyDelete
  102. omg thank u so muchhhh u're awesome i love you HAHAHAHHA :D

    ReplyDelete
  103. @The Bearded Lady: Couldn't agree more :)

    @Winda: You're welcome. Cheers and God bless.

    ReplyDelete
  104. Hello,

    Everytime i try and remove the border on one my blog post images it enlarges the image so that it doesnt fit on my main wrapper can you please help me remove the border and mantin the size of the image?
    www.interiorsbystaceycohen.blogspot.com
    thanks!
    you can email me at staceco@gmail.com

    ReplyDelete
  105. Is this supposed to work in Blogger Dynamic View (sidebar)?

    ReplyDelete
  106. IBSC: I've tried the fix in your blog, but I couldnt replicate the problem that you're mentioning. Try again, with this code:

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

    If it does enlarge your image, leave it that way and give me a nudge. I'll take a look from that point. It's easier to examine what is wrong instead of what could be wrong :)

    @Little One Help: You're welcome :) Cheers.

    ReplyDelete
  107. Thanks a lot, it working for my blog, so awesome tricks

    ReplyDelete
  108. @Love Hijau: You're welcome. Cheers.

    ReplyDelete
  109. Many thanks for this info got rid of the nasty white border!

    If I wanted to change the border-style how would I do that? I included (border-style: double) into the CSS but no change.

    Paul

    ReplyDelete
  110. @Paul: Hi Paul. To change your post picture border, add this to your css:

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
    .BlogList .item-thumbnail img {
    border: 1px double black !important;
    }

    ReplyDelete
  111. @Anon: Nope it won't work with DV.

    ReplyDelete
  112. Wow could not have been easier! Much appreciated

    ReplyDelete
  113. Thank you so much, the border has been bothering me until I decided to search for a solution!

    ReplyDelete
  114. Thank you so much! The detailed instructions were amazingly easy to follow and worked perfectly. I had added a button to my blog. It had a weird border, that I hated, around it. This post made it disappear!

    ReplyDelete
  115. Thank you so much! The detailed instructions were amazingly easy to follow and worked perfectly. I had added a button to my blog. It had a weird border, that I hated, around it. This post made it disappear!

    ReplyDelete
  116. @darlingnomad: You're most welcome :)

    @Sparks In Spring: Glad you landed on the right page :)

    @●Lett●: Happy to help, as always :)

    @MIKIDE: Don't mention it :)

    Cheers!

    ReplyDelete
  117. Hi, I'm sorry to bother you, but I've been all over Google and have had no luck at all. I've added the CSS from your post, and that works on pictures with no caption, but I still have an ugly brown frame around captioned pictures. What's worse, it doesn't exactly fit; it gets cut off if the picture is too big. I can't figure out how to get rid of it - also, I have a custom template, and I've looked for the HTML code with the 'caption-container' bit, but I don't have it. My blog is www.agreatadventure-croeso.blogspot.com and I'd be so grateful if you could help!
    Thank you so much!!

    ReplyDelete
  118. Hello

    First of all thanks for all that you do.
    I just started and your site is of great help.
    Ok, so I tried the code, the white border is gone but I still get a transparent border around the image, how can I remove it? I have a table and I want the image above/below to be aligned to the table and also not look like it's hovering above/below. Thanks.

    link: http://chivasaganar.blogspot.com/p/partidos-en-vivo_14.html

    ReplyDelete
  119. @UK Yankee: I've downloaded the custom template that you're using, and I tried puttin on the tweak above on a captioned photo, but I can't see any brown frame. Do you have a sample/screenshot that I can look at?

    @Anon: Have you got this sorted? Coz this is what I'm seeing:

    http://i.imgur.com/iV4ws.png

    Are you seeing something different?

    ReplyDelete
  120. thanks a lot for this tutorial! :)

    ReplyDelete
  121. I see the same thing.
    See how the banner on top (red banner programacion/schedule) and the banner at the bottom are not aligned with the table. The banners are a bit too far right and there is a gap between the banner and the table. I think thats due to a transparent border around the image.

    http://i40.tinypic.com/23kos50.jpg

    When I highligt the images you can see the trasparent border:
    http://i39.tinypic.com/2006vma.jpg

    Thanks again.

    ReplyDelete
  122. @Francesca: Don't mention it :)

    @Anon: That is not a border. That is your padding. You can remove it by adding this code to your css:

    .post-body img, .post-body .tr-caption-container {
    padding: 0px !important;
    }

    Hope this is what you were looking for. Cheers.

    ReplyDelete
  123. Dude, you are a genius!
    The padding code worked.
    Thanks!
    And I'll be visiting your site regularly.

    ReplyDelete
  124. THANK YOU... I hated those damn shadows.

    ReplyDelete
  125. @Anon: Glad it worked mate :) Happy to be a help.. Cheers!

    @Ciara: It must have been a relief to see them no more.. :)

    ReplyDelete
  126. This was crazy helpful. Thank you!

    ReplyDelete
  127. @Jess: You're welcome :) Cheers..

    ReplyDelete
  128. YAY! Thank you! Simple instructions that actually worked!!

    ReplyDelete
  129. @Michelle @ B3: Glad to be of help :) Cheers and God bless.

    ReplyDelete
  130. Thanks a million!!! I have been struggling trying to get rid of those!!!

    xx Nicole

    ReplyDelete
  131. @Asia Travel Bug: Glad you find it useful :)

    ReplyDelete
  132. .post-body img {
    padding: 1px;
    background: transparent !important;
    border: 1px solid transparent !important;

    -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
    }

    ReplyDelete
  133. THANK YOU THANK YOU THANK YOU it worked perfectly!!

    ReplyDelete
  134. @Julia: No problem at all :) Cheers.

    ReplyDelete
  135. Life saver, so many many thanks, that border was fuc*ing annoying. :)

    ReplyDelete
  136. @Niina C: I can tell, judging from your frustration :P

    ReplyDelete
  137. Hi YoboY - I would like my signature picture to not include the shadow. The picture is stored on my laptop but in the future, I would probably host it elsewhere if I use it a lot. Just testing it out. How would I remove the shadow? I'm sorry - I know you have answered this before but it seems like everyone has a little something different or unique and I don't want to mess with the code if I don't have to. Thanks so much! Jenny

    ReplyDelete
  138. OMG thank you so much! Your CSS code is the only one that has worked for me! I've been researching this for the past hour!

    ReplyDelete
  139. @Jenny from My Handmade Home: The above CSS code will strip off all the borders and shadows from your images - regardless of where they are hosted. If something seems wrong, let me know and I'll see if something escaped from my sight :)

    @Miss Cassandra: Glad you finally managed to find the right corner to solve your problem :) Kudos to you...

    ReplyDelete
  140. OMG THANK YOU ive been trying to do this forever! xx

    ReplyDelete
  141. @Hello Doll Face: Glad you find it useful. happy blogging!

    ReplyDelete
  142. It seems like I can't get rid of the shadow still.

    ReplyDelete
  143. Fabulous! This was perfect!!!
    Cheers,
    C

    ReplyDelete
  144. @Hello, I'm Nelly.: This is what you've inserted:

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

    This is what you should have inserted:

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

    You missed a dot (.) at the beginning of the very first line :)

    @Cait Emma: Glad it worked :)

    ReplyDelete
  145. Thank you for this!

    ReplyDelete
  146. aahh, thank you x1000 for this code! i've been searching how to this for way to long it's shameful. finally bye to annoying shadows :)

    ReplyDelete
  147. Here is the blog site that I use just to test layouts, etc:

    http://wreckadmin.blogspot.com/

    I'm trying to get rid of the white box with the rounded corners that goes behind the post, gadgets (subscribe, search blog, etc.)?

    Using previous comments on this page, I managed to lose the border/shadow around JUST the post box, but I want the entire border gone, so that my text will simply overlay the uploaded background image, rather than be inside a solid color box.

    I can't seem to find which section of html this is in - posts/content/main, etc.

    Can you help?

    Thanks so much
    Jey

    ReplyDelete
    Replies
    1. Add this to your CSS. Is this what you were going for?

      .post-outer{
      background: none !important;
      border: none !important;
      }

      Delete
  148. Worked like a dream! Thanks!!!

    ReplyDelete
    Replies
    1. That must be a good dream. You're welcome!

      Delete
  149. Thank you SO much. Exactly what I was looking for. All fixed :)

    Anna
    http://www.anewfoundtreasure.com

    ReplyDelete
  150. Thanks, everybody else didn't help.

    ReplyDelete
  151. Αnd one more question.
    Can I put the border back?

    ReplyDelete
    Replies
    1. Yes you can. Remove the code and your border will be back :)

      Delete
  152. Hi There,

    I know it probably sounds really stupid, but i can't get rid of the frames and shadows around my pictures, it is driving me nuts. Trying with all the codes mentioned above for hours now....
    Please Help, what is it that i am doing wrong ??
    Here is my blog:
    tillashaus.blogspot.com
    Thank you from Sweden
    Tilla

    ReplyDelete
    Replies
    1. This is what you have right now (taken from your blog):

      .Header {
      text-align: center;
      {.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: none !important;
      border: none !important;
      background: none !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      It isn't right. Change it to:

      .Header {
      text-align: center;
      }.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: none !important;
      border: none !important;
      background: none !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      That's right. In Line 3, change '{' to '}'. That's the only thing that was wrong in your previous code, but it was enough to give you a headache.

      Delete
  153. Thank you so much for the help. I did now exactly what u said, but either it is me or I don't know...But there are still frames/shadows around my pictures , right ??
    I am so sorry to bother you but you seem to be the only one knowing what to do....
    can't tell you how grateful i am for your help,
    greetings from sweden

    ReplyDelete
  154. Hej, me again sorry. do you think i maybe have to change something in the HTML ? Or is it really just me and i am too picky ??
    Sorry again and thank you
    Tilla

    ReplyDelete
  155. Good Morning from Sweden ! Well, I guess a good nights sleep does help a lot ! I have fixed it now, changed everything that i could in HTML and now it's working, they are finally gone !! So thank you so so so much for your help !! Have a great friday.
    Best Regards
    Tilla

    ReplyDelete
    Replies
    1. That's great! Looking good now. Congrates! :)

      Delete
  156. WOW, this is by far the easiest way I have found! THANK YOU!!! :D

    ReplyDelete
    Replies
    1. No problem at all. Glad you got rid of your borders and shadows!

      Delete
  157. Thanks! totally worked for my blog: www.rubygirlblog.com yesssss!

    ReplyDelete
  158. I don't mind the boarders around my images and would prefer to keep them, however would there be a way to have a certain photo not have the boarder. I want to upload a small Canadian flag icon to put below my Canadian content but the border ruins the effect. This image would be used regularly and would be the only image I don't want the border around. I'm not sure if there is a small script that might be able to help?

    Otherwise I probably would just disable them all.

    ReplyDelete
    Replies
    1. I happen to know a way. Add this to your CSS:

      .ss, .noborderdv img {
      padding: none !important;
      border: none !important;
      background: none !important;
      -moz-box-shadow: 0px 0px 0px transparent !important;
      -webkit-box-shadow: 0px 0px 0px transparent !important;
      box-shadow: 0px 0px 0px transparent !important;
      }

      Next, refer to steps 2 and 3 from the link below:

      Removing Border and Shadow from Selected Images in Blogger Dynamic View

      Delete
    2. Thanks for the quick reply. I will give that a try soon.

      Delete
    3. Got it working. Thanks again for the quick help.

      Delete
  159. I can't seem to take out the border still :( I have a custom theme Please help!

    ReplyDelete
    Replies
    1. I can't find the code above anywhere in your template. Use Template Designer - Advanced - Add CSS to add this code. If you can't add it this way, then u gotta add it directly to your template. From Template tab in your Dashboard, click on Edit HTML - Proceed - add it to your other CSS codes.

      Delete
  160. Thanks! This has been driving me crazy for a while now. Tweeted and +1'd.

    ReplyDelete
    Replies
    1. I bet. Glad you managed to get rid of it :) Cheers!

      Delete
  161. Thanks! (even bigger thanks for keeping it oh so simple).
    cheers.

    ReplyDelete
  162. This has long been a real bug bear of mine, thank you for the easy and simple tutorial (I did have to override some existing html which was:

    .post-body .tr-caption-container img {
    padding: 0;

    background: transparent;
    border: none;

    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 rgba(0, 0, 0, .1);
    }

    But I pasted over the top and it has worked a treat. Thank you so much.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.