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.
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.
thanks for detail information!
ReplyDelete@sun: No problem at all. Have fun. Cheers and God bless.
ReplyDeletethankyou, thankyou! I've been trying to do this with no luck!
ReplyDelete@Luz e. {Wee Waldorf}: Happy to help.
ReplyDeleteCheers and God bless.
OMG!!! Finally. Thanks soo much for this info. =)
ReplyDelete@Fanzi: Glad you find it helpful. Cheers and God bless.
ReplyDeleteThanks a lot! Been searching for a good code for half an hour now but this one finally works!
ReplyDelete@Anon: Glad you find this post helpful. Cheers and God bless.
ReplyDeletety ty ty ty it worked after so long trying to figure out why those image shadows were still there! many thanks
ReplyDelete@Aral: Glad you like the mod. Cheers and God bless.
ReplyDeletehi, 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
ReplyDeletehi I have discovered how to remove shadow spread around post main body
ReplyDeleteI searched for the content.shadow.spread in the html code
I change the values to zero.
@shem: Glad you found a work around. Cheers.
ReplyDeletethanks!!
ReplyDelete@Cheyenne: You're welcome. Cheers.
ReplyDeleteyou saved my life! been looking for hours, high and low how to remove the damn shadow, and taaadaaa, here you are!
ReplyDeletethank you so much!
@veneta: Glad you find it helpful. And thanks for the feedback. Cheers.
ReplyDeleteI 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.
ReplyDeleteThanks for your help!
Deb
debzpicaday.blogspot.com
@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:
ReplyDelete#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.
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...
ReplyDeleteI'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
@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:
ReplyDelete#Image1 img {
background: none !important;
}
Thank you, thank you!
ReplyDeleteHi,
ReplyDeleteI 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!
@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.
ReplyDeleteCheers.
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@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.
ReplyDeleteHello! 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@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.
ReplyDeleteThank you so much! I tried to email you but the verification code wouldn't come up so I couldn't send it...
ReplyDeleteHere 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
@Andrea: Lovely.
ReplyDeleteAll 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.
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.
ReplyDeleteI 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;
}
Awkward. What is your blog's address? Let me have a look at it, I'll be able to tell what went wrong. Cheers.
ReplyDeleteMy blog is at
ReplyDeletehttp://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.
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 {
ReplyDeletepadding: 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.
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!
ReplyDeleteOk. 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.
@Andrea: I'm still not seeing your signature image and the code that I gave you.
ReplyDelete1) 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.
Hallelujah! It finally is saving it! And I saw your response to my other question and now that saved as well!
ReplyDeleteEverything 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! :)
@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.
ReplyDeleteTry it. Cheers and God bless.
You rock! Thanks so much for sharing this.
ReplyDeleteHi 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@Vintage Wren: No problem. Glad you like the post. Cheers.
ReplyDelete@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.
Thank you, I needed this :o))))
ReplyDelete@Tanja: No problem. Cheers :)
ReplyDeleteGah, any reason why this would not work? I still have the shadow. Thank you!
ReplyDelete@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.
ReplyDeleteOn the other hand, I don't see the shadow in any of your images in your blog. What am I missing?
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! :)
ReplyDeletethe blog is http://sunshineandstrawberriesblog.blogspot.com/
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@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.
ReplyDelete@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.
THANK YOU SO MUCH!! You have no idea how much I appreciate it!! That border was driving me crazy!
ReplyDeleteNatalie :)
@Natalie: No problem at all. Glad you got rid of them. Cheers.
ReplyDeletebless your soul. I've been search for hours. Finally!
ReplyDelete@Anon: Kudos to you for finding it!
ReplyDeleteI have a question but first, let me tell you, you are awesome, indeed. You are like Code Master lol.
ReplyDeleteTo 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!
@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.
ReplyDeleteI've published a new post on this. Check it out:
Removing Border and Shadow from Blogger Signature Image
Thanks for sharing this!
ReplyDeletehttp://www.techykikay.info
@Meg: No problem at all. Happy to share.
ReplyDeleteCheers and God bless.
Hi there,
ReplyDeleteI 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 !
@gypsy: I might be able to, but I need to take a look at your blog first. What is your blog's address?
ReplyDeleteThank you!
ReplyDelete@Heather: No problem. Cheers and God bless.
ReplyDeleteTHANK YOU so much! I have been searching the internet for hours to solve this. You are fantastic!
ReplyDeletehi, 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?
ReplyDeletehttp://helloxinyiyeo.blogspot.com/
thank you!!
Hello! You seem to have an extensive amount of knowledge on these fixes so I'm hoping you might be able to help me.
ReplyDeleteI 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!
OH MY GOODNess. Thanks a million. This has been driving me beyond insane. Thank you thank you!
ReplyDelete@beencie: Happy to help. Cheers.
ReplyDelete@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.
saved my blog xx
ReplyDeleteThank 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!!!!
ReplyDeleteI have spent hours looking for a fix for this, so thanks!
ReplyDeleteI 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!!!
ReplyDeleteThank 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.
ReplyDeleteThank you again for your help, it is really appreciated! :D
@Lindsey: No problem at all. Glad you got rid of the shadow.
ReplyDelete@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.
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@Rich: Gimme a discount if I ever come to your studio to get an ink :P
ReplyDeletejust wondering how can I remove the spaces from the photos? thank you!
ReplyDeletehere is my blog- http://abinavarrete.blogspot.com/
@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:
ReplyDelete.separator img{
margin-bottom: -9px;
}
Cheers.
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!
ReplyDeleteit's me again. my photos on the other blogposts encountered some spacing and alignment problem
ReplyDeletehttp://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.
@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.
ReplyDeleteThank 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@Sarah: Glad you finally got rid of it. Cheers.
ReplyDeleteyay thank you!! this was the only thing that was easy and worked for me!
ReplyDelete@Sara: Glad it worked. Cheers..
ReplyDeleteYay!! Thank you!!! Best solution by far
ReplyDelete@Georgianna: You're welcome. Cheers and God bless.
ReplyDeletethank 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@jamie: That's nice to know. Let me know if you're looking for a particular help on something specific. Cheers and God bless.
ReplyDeleteJust saved me again, so happy I bookmarked this! Thanks! :)
ReplyDelete@natalie: You're most welcome. Cheers.
ReplyDeleteYipppeeee!! I did it and it worked. Thank you so much for this tutorial!
ReplyDeletewoo hoo.
xo
Andee
@Andee: Glad you got that sorted. Cheers..
ReplyDeleteI 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!!
ReplyDeletehttp://oliviadollydaydream.blogspot.com/
@Dolly: Glad you finally found a fix. Happy Blogging. Cheers and God bless.
ReplyDeleteThanks 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?
ReplyDeleteThis was very helpful!!! Thank you so much!!! :-)
ReplyDeleteIrene
http://littlewaystoheaven.blogspot.com
@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 :)
ReplyDelete@Irene: Glad you find it helpful. Cheers and God bless.
Thank you very much, it helped me alot !! Please i need more effects on my site,, suggest me some..
ReplyDelete@Deepak: Well, template customisations are often matters of personal preferences. I like simple designs. What kind of effects are you looking for?
ReplyDeleteTHANK YOU! These have been driving me nuts for far too long!!!
ReplyDelete@Macri: Glad this tweak put an end to your search :) Cheers.
ReplyDeleteI have been trying to do this for ages! It worked, thanks so much :)
ReplyDelete@Hoola: Your search is finally over! :)
ReplyDeleteCheers.
Thank you so much!!!!! finally found something that worked! really easy too! thank you!!
ReplyDelete@Espressodoll: Glad you like the tweak. Cheers.
ReplyDeleteThank you :D
ReplyDelete@Britty: You're most welcome :)
ReplyDeleteTHANK YOU!! that was starting to annoy me so much. something like that should totally be a default.
ReplyDeleteomg thank u so muchhhh u're awesome i love you HAHAHAHHA :D
ReplyDelete@The Bearded Lady: Couldn't agree more :)
ReplyDelete@Winda: You're welcome. Cheers and God bless.
Hello,
ReplyDeleteEverytime 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
so helpful and easy. thank you!
ReplyDeleteIs this supposed to work in Blogger Dynamic View (sidebar)?
ReplyDeleteIBSC: I've tried the fix in your blog, but I couldnt replicate the problem that you're mentioning. Try again, with this code:
ReplyDelete.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.
Thanks a lot, it working for my blog, so awesome tricks
ReplyDelete@Love Hijau: You're welcome. Cheers.
ReplyDeleteMany thanks for this info got rid of the nasty white border!
ReplyDeleteIf I wanted to change the border-style how would I do that? I included (border-style: double) into the CSS but no change.
Paul
@Paul: Hi Paul. To change your post picture border, add this to your css:
ReplyDelete.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
border: 1px double black !important;
}
@Anon: Nope it won't work with DV.
ReplyDeleteWow could not have been easier! Much appreciated
ReplyDeleteThank you so much, the border has been bothering me until I decided to search for a solution!
ReplyDeleteThank 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!
ReplyDeleteThank 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!
ReplyDeleteThanks a lot!
ReplyDelete@darlingnomad: You're most welcome :)
ReplyDelete@Sparks In Spring: Glad you landed on the right page :)
@●Lett●: Happy to help, as always :)
@MIKIDE: Don't mention it :)
Cheers!
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!
ReplyDeleteThank you so much!!
Hello
ReplyDeleteFirst 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
@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?
ReplyDelete@Anon: Have you got this sorted? Coz this is what I'm seeing:
http://i.imgur.com/iV4ws.png
Are you seeing something different?
thanks a lot for this tutorial! :)
ReplyDeleteI see the same thing.
ReplyDeleteSee 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.
@Francesca: Don't mention it :)
ReplyDelete@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.
Dude, you are a genius!
ReplyDeleteThe padding code worked.
Thanks!
And I'll be visiting your site regularly.
THANK YOU... I hated those damn shadows.
ReplyDelete@Anon: Glad it worked mate :) Happy to be a help.. Cheers!
ReplyDelete@Ciara: It must have been a relief to see them no more.. :)
This was crazy helpful. Thank you!
ReplyDelete@Jess: You're welcome :) Cheers..
ReplyDeleteTHANK YOU!
ReplyDelete@Ki: You're most welcome :)
ReplyDeleteYAY! Thank you! Simple instructions that actually worked!!
ReplyDelete@Michelle @ B3: Glad to be of help :) Cheers and God bless.
ReplyDeleteThanks a million!!! I have been struggling trying to get rid of those!!!
ReplyDeletexx Nicole
wow! good and fast tip! thank you!
ReplyDelete@Asia Travel Bug: Glad you find it useful :)
ReplyDelete.post-body img {
ReplyDeletepadding: 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);
}
THANK YOU THANK YOU THANK YOU it worked perfectly!!
ReplyDelete@Julia: No problem at all :) Cheers.
ReplyDeleteLife saver, so many many thanks, that border was fuc*ing annoying. :)
ReplyDelete@Niina C: I can tell, judging from your frustration :P
ReplyDeleteHi 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
ReplyDeleteOMG 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@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 :)
ReplyDelete@Miss Cassandra: Glad you finally managed to find the right corner to solve your problem :) Kudos to you...
OMG THANK YOU ive been trying to do this forever! xx
ReplyDelete@Hello Doll Face: Glad you find it useful. happy blogging!
ReplyDeleteIt seems like I can't get rid of the shadow still.
ReplyDeleteFabulous! This was perfect!!!
ReplyDeleteCheers,
C
@Hello, I'm Nelly.: This is what you've inserted:
ReplyDeletepost-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 :)
Thank you for this!
ReplyDelete@Anon: You're welcome :)
ReplyDeleteaahh, 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 :)
ReplyDeleteGlad you finally found it! :)
DeleteHere is the blog site that I use just to test layouts, etc:
ReplyDeletehttp://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
Add this to your CSS. Is this what you were going for?
Delete.post-outer{
background: none !important;
border: none !important;
}
Worked like a dream! Thanks!!!
ReplyDeleteThat must be a good dream. You're welcome!
DeleteThank you SO much. Exactly what I was looking for. All fixed :)
ReplyDeleteAnna
http://www.anewfoundtreasure.com
Glad to hear that :) Cheers!
DeleteThanks, everybody else didn't help.
ReplyDeleteΑnd one more question.
ReplyDeleteCan I put the border back?
Yes you can. Remove the code and your border will be back :)
DeleteThank you so much! YAY!
ReplyDeleteHappy to help, as always :)
DeleteHi There,
ReplyDeleteI 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
This is what you have right now (taken from your blog):
Delete.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.
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 ??
ReplyDeleteI 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
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 ??
ReplyDeleteSorry again and thank you
Tilla
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.
ReplyDeleteBest Regards
Tilla
That's great! Looking good now. Congrates! :)
DeleteTHANK YOU!!!!!!!!!!
ReplyDeleteYou're most welcome :)
DeleteWOW, this is by far the easiest way I have found! THANK YOU!!! :D
ReplyDeleteNo problem at all. Glad you got rid of your borders and shadows!
DeleteThanks! totally worked for my blog: www.rubygirlblog.com yesssss!
ReplyDeleteLooking awesome! Good job!
DeleteVery helpful, thanks a bunch!
ReplyDeleteDon't mention it :)
DeleteI 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?
ReplyDeleteOtherwise I probably would just disable them all.
I happen to know a way. Add this to your CSS:
Delete.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
Thanks for the quick reply. I will give that a try soon.
DeleteGood luck :)
DeleteGot it working. Thanks again for the quick help.
DeleteThat's great!
Deletethank you very much!!!!! <3
ReplyDeleteYou're most welcome :)
DeleteThank you Buddy
ReplyDeletehttp://fooduloveit.blogspot.com
You're welcome mate :)
DeleteI can't seem to take out the border still :( I have a custom theme Please help!
ReplyDeleteI 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.
DeleteThanks! This has been driving me crazy for a while now. Tweeted and +1'd.
ReplyDeleteI bet. Glad you managed to get rid of it :) Cheers!
DeleteThanks! (even bigger thanks for keeping it oh so simple).
ReplyDeletecheers.
No problem at all :) Cheers..
DeleteThis 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:
ReplyDelete.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.