How to Remove or Change Image Borders
I simply have the best readers in the world! They are forever giving me ideas for new posts. This time a comment from Bulimic has prompted this post:
ok since we're on the subject of removing stuff, can you show us how to remove those image border everytime an image is uploaded with a post? Or maybe a way to change the color or even replace it with a photo frame image? would really appreciate your help ;)
To remove the border from around your image you must work with your CSS style sheet. That is the part of your template between the <head>and </head> tags. Keep in mind each template uses different terms, but look for something that looks similar to this:
.post img {or this:
padding:4px;
}
img{To those codes you would add this line:
padding: 4px;
}
border:0px;That will completely remove that little border from your images.
On the other hand sometimes you want a nice border. But you want it your way. A few simple adjustments will take care of that.
This first method addresses Blogger Beta. (I really need to find a way to identify the new blogger vs old blogger.) Still working in your CSS Style Sheet, locate this code:
<Variable name="bordercolor" description="Border Color"Change the colors to the color you want. Then, further down in the style sheet, instead of adding border: 0px; add this:
type="color" default="#cccccc" value="#cccccc">
.post img {You can change the solid to dashed or dotted. And change the width by changing the px size.
padding:4px;
border:1px solid $bordercolor;
}
Working with Classic Blogger, add this to your CSS style sheet:
img{Once again you can change the color, size and style to dotted or dashed.
padding: 4px;
border: 1px solid #94C258;
}
Labels:
Blogger Beta,
Classic Blogger,
Design,
Graphics,
Hacks
130 Comments:
WOW! Thank you for your prompt reply to my request, I'm sure others will appreciate it too! This is truly a blogger's university and you're the grandmaster ;)
Hi Annie, thank you for lot of useful information. Which theme/template you are using for your blog. Where can I get such beautiful themes.
@shrish, thank you so much! My template started as the blogger 'Minima' white. I have personalized it with the hacks and tweaks that you see in my posts.
@bulimic, my head is getting big...the grandmaster, lol! But, I'm glad my blog is helpful to you.
Great Site! I really liked how you used Hans' Recent Posts widget at the bottom of your main wrapper and have started using it on my own site. Imitation is the sincerest form of flattery, right?
As I've told you before :) great site and thanks for sharing your knowledge. Could I ask for an isty bitsy favor? Would you look at my site and see if you can figure out and EASY way to get the boarder all the way around my header photo. I've dinked with it and finally throwing in the towel. It's Ok the way it is but not exactly how I want it. I'll send you some snow in exchange. ;)
@janet, seems like you have the border all around your image now. All that I can see that needs fixed is a small space the top and bottom between the image and the border. There are 2 ways to fix that, the way I see it.
1. You can resize your image to fit the parameters in your template:
width : 860px;
height : 320px;
2. You can change the parameters in your template to fit your image:
#header-wrapper {
width:1023px;
margin:0 auto 10px;
}
#header {
width : 1023px;
height : 307px;
See if that works.
@ian, Thanks! And I a flattered. I simply love having the recent post widget (isn't Hans a genius?) at the end of my posts. It serves a dual purpose for me. Postbar - something new! explains how the idea was born.
Hi Anni,
Option 2 works but then you have to scroll across my site doesn't fit or at least not on my laptop.
The second is where I've been struggling and I've nearly tore every hair out of my head.
I've been using Gimp and seems there's no easy way to resize with that program. Look at some others but don't allow me to specifically go to 860 x 320. Can you recommend a photo online photo resizer. Can't download one more thing on my computer.
One Click is the greatest!!! Can't convince my fellow blog friends to use it. So easy.
@janet, I don't know of an online photo program off the top of my head. You may have to download (yet) another program. This is one that no computer should be without in my opinion...IrfanView
To resize an image using IrfanView:
Open the program...Image...Resize/Resample...check off 'Set new size'.
To make the image your size don't select 'preserve aspect ratio'.
See how that looks.
hey Annie, sorry if my question is not relevant with your post.
I want to know, is it possible to add border on the right/left side of "blog post" (body post)
my blog is here and I want to add sidebar border like example this blog
oh yes I prefer dotted line. Thanks before
Annie, While going through your blog I find it hard to return at homepage as there is no link for it. So why don't you add a homepage link to your header image as you have mentioned in this post.
@rangga, yes, you can. Look in your template (CSS style sheet) for this:
.post {
margin:.5em 0 1.5em;
padding-bottom:1.5em;
}
Change it to:
.post {
margin:.5em 0 1.5em;
padding-right:10px;
padding-left:10px;
border-right:1px dotted $bordercolor;
border-left:1px dotted $bordercolor;
padding-bottom:1.5em;
}
That should do it. If you want the dots larger, change 1px dotted to 2px.
@shrish, Thanks for the suggestion. I didn't realize it was difficult to navigate back to my homepage. (there is a 'home' link at the end of post pages)
I made my header clickable...just for you!
Thanks Annie. :)
With a wider pc screen my blog looks small. How can the tempalte look same for 800x600 and old ones.
@Anonymous, look in my tag cloud (top right of BlogU) and click on 'Fluid'. That should lead you in the right direction. Your blog can fit all screens automatically...like mine.
thanks Annie, I'll try the code
Hi Annie,
@Shirsh ask you yesterday how to remove the borders from the header box. She also mentions that they were a blank space in between her image in the box and thoses borders.
I have a clickable header and I'm desesperately trying since yesterday to get rid of this blank space in between my image and the border underneath border.
Here is my blog if you want to see what I mean: www.daphnelaliberte.blogspot.com
Any help would be great!
Thanks you.
@daphnee, Look at the comments to this post...I gave Shrish instructions on how to remove the borders:
Blogger Beta: Using Widgets for Your Header
Hi
I am haveing a problem getting post borders to display, and have identified some code ...
/* Simple List Separators */
#snavlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 200px;
}
#snavlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
}
#snavlist li a { text-decoration: none; }
/* End Simple List Separators */
/* Highlighted Navigation List */
#hnavlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 8px Verdana, sans-serif;
background: gray;
width: 24.75em;
}
#hnavlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
text-align: left;
}
#hnavlist li a
{
display: block;
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
#hnavlist li a:link { color: #448; }
#hnavlist li a:visited { color: #667; }
#hnavlist li a:hover
{
border-color: #F51818; /* left box fill colour
color: #FFF;
background: #332;
}
/* End Highlighted Navigation List */
... that seems to prevent the post borders for appearing. Trouble is, I use this code for lists in my blog.
Can you help identify the problem here?
Many Thanks
GB
@anonymous, If you think that coding is the problem, then it is tied to the post code. I would look in my template for your post area in the html and see if snalist or hnalist are within that code.
I don't actually see how that code would prevent the post borders. But, without seeing your blog, it is hard for me to give a better answer.
Hi there. Anne, your code never ceases to amaze me. I am having a problem that I think you can help me with. I like the borders on my blog, but I don't want them around the social bookmarks i'm using which is a script. Can you help?
http://easyhdtv.blogspot.com
Thanks in advance!
@triniman, Look in your CSS style sheet.
1. Find:
background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;
padding-left:14px;
}
.post img {
margin:0 0 5px 0;
padding:4px;
border:1px solid #bbbbbb;
}
2. Remove:
border:1px solid #bbbbbb;
Or, if you want to leave the code for future changes (which I don't know is considered proper CSS coding or not...but I'm guessing it is not) you can leave that code in and change it to:
border:0px solid #bbbbbb;
Either way, the border will be removed.
Thanks for the info, I have that issue in my blog now, but i mean that u post is my solution for now.
Thanks again
--
Viajes y Turismo
Hi Annie,
I've added a signature at the end of every post. It seem the signature's border a still there even though I followed your instructions to the "T". Am I missing something here?
See the border that won't go away in action @ Useful Informations.
Thanks in advance. Hope to hear from you soon. See you on my blog's comments.
Greetings and lotta loves from Malaysia.
~ ArahMan7
@arahman7, Find this in your template:
.post img {
margin:8px;
padding:0;
border:1px solid #ccc;
}
Change to:
.post img {
margin:8px;
padding:0;
border:0px;
}
That should do it!
Wow, I never EVER comment on blogs but this was really really helpful. Thanks.
Jazz
Hi I am trying to add an image to the border of my photos, can I do that?
Thanks, Annie! I Inserted border:0px into my code and it worked like a charm.
I find using light color such as #CFCFCF or #DFDFDF really make my images stand out. Thanks for a great tutorial!
Hi Annie,
Thank you for insights! Your solution for fixing those dotted link borders in FF worked perfectly.
Much appreciated.
Kim
thanks! Finally put the frustration to a stop.Great site.
Dear Annie,
I have been trying to change the image border properties, and know that this method works, but my application is somewhat different.
I would like to remove the border around a specific image, from within my blog's post, and not the blog's template html. I don't know if this is possible, as the templates css seems to override the code I try to use within the post.
Basically, I like the borders, and want to keep them on all but one specific image in a post. Adding the "border: 0px;" part to the image code doesn't seem to work.
Any suggestions would be helpful!
Thank you,
Michal
Thank you so much for the tips!
it really helps :]
and do you know how to enlarge the postings column? Because my posting column is kinda too small somehow in my blog .
Thanks :]
Oh wonderful! Thankyou so much!
hi have given the border to images in my blog
http://tamilposters.comi want to know how can i open all the images (only images not all other text links) in new window. I dont want to do it manually for all images in my blog.
Kindly help me on this.
I think I love you.
I second fresh peaches
great help!
Hi! I just found you and already learned something new! I went ahead and changed my photo border to a dashed line and like it much better than the solid.
I do have a question though. I once saw a blog where the photos posted had little pieces of masking tape on the edges. The blog was done in typepad and I use blogger, so I'm not sure if that makes any difference, but I would LOVE to add that to my photos. Is that possible for me?
Thank you for your time!! I look forward to hearing from you! Thanks again!
@{jodie} I will have to look into this. Not sure how to make it happen. It is on my 'to do' list.
Thanks a lot! Yoyr tutorial really helped me.
Greetings from Greece.
hi annie! trully helpful tips, i'm glad i ran into your blog.
i was wondering if you could tell me something about removing the border of an image of a single post, and leaving the rest alone with their borders.
.post,.page{
position:relative;
width:595px;
background:url(http://3.bp.blogspot.com/_jA-SP6SAtfY/SoTwn0kFAPI/AAAAAAAAAFg/AGBG4P3bwIA/s1600/bg_post_repeat.jpg) repeat-y;
margin:0 0 20px 0;
}
This is my code how ı add border for image using this code
Thank you so much. I am on Blogspot too and followed your directions. I figured out I didn't even need to paste in the extra line of code, just change the numeric value to "0" under the Posts section. It was driving me crazy that I couldn't get rid of the borders on my pictures, especially ones uploaded from other sites. It's also great because now anything I use like Myspace codes appear as intended. GIF's look fantastic! Thank you again!
Hooray - it worked! Thank you SO much (I hated having that silly box around my signature :o)
Good info.Thanks Coway
Thank you so much! I've been wondering how to do this for some time & you made it very easy!
Thanks a lot. Your tutorial really helped me.
Keep blogging and thanks for sharing....
Thanks a lot for this short but useful tutorial.
Hey, I just googled how to get those annoying borders off and this came up and it solved my problem, thank you! I was also able to remove the border from my header with this.
This worked, even though I searched for just img because in my template there was a slightly different code then what you presented here...
This also shows how blogger sucks a bit, I always thought it was good, but I experience I have opposite thought. Can't wait to move to wordpress.
it succesfully worked for me too...
thanks for the tip!
Thank You! :)
Thank you very much!!!
Thanks exactly what I needed and very simple!!
Thanks for tips. You have made my work very easy. I will use the tip in my website
Thanks again, I had bookmarked this and used it in another blog today, after a couple of hours of stressing.
Just what I was looking for!! And it was so simple!! Thanks A LOTTTT!!! :)
Natalina.
http://dance-and-the-city.blogspot.com/
Sorry, none of this helped me but gave me a clue for "a place to start looking" :)
i tried and tried many times but none of the tips helped me because i made the changes in the blogger's html edition (is the same thing that "CSS style sheet"?). finally i made this change (in blogger's html edition):
THE ORIGINAL
.post-body img {
padding: 4px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
THE CHANGE
just Changed the padding to 0 :
padding: 0px;
and that erased the borders of the images :) so, all the changes must do it in the "padding" line :)
see us
Awesome.. thanks!!
Hey! I know you're super busy keeping up this awesome blog. If you have time to read this, I'd appreciate it. I've changed my blog HTML so many times over the year and a few weird things have been happening lately. For one, the border around the images I post have disappeared. I've followed the instructions on this post, but I can't get them to show up! Do you have any idea how to fix this?
@Elisa, find this in your template:
a img {
border-width:0;
}
You have told it to make it zero. Change the 0 to 1px or what size you want.
Thanks, Annie!
Thank u so much. U saved my life!
writing back - because I did just get it to work in firefox 3.6.3 - thanks again!
thanks... this tutorial help me.. :D
Thank you, it worked.
Nice tutorial. I'm assuming you are keeping it simple deliberately, but if people wish to use more fancy borders, there is lots more to border css than just dotted and dashed borders -
http://www.w3schools.com/css/css_border.asp
And CCS3 should be standardising drop shadow, which I can foresee becoming overused on images soon!
Thank you so much!!! your post really helped me!
This ACTUALLY helped me! I'm so used to not finding answers online for blogger issues.. Thank you!! :)
Very helpful posts and the resources from blogroll are great. Thanks for sharing!
another great post in a great blog. thanx!
Thank you so much for that wonderful post.I appreciate your effort.It is very useful and helpful.
Great Site! I really liked how you used Hans' Recent Posts widget at the bottom of your main wrapper and have started using it on my own site. Imitation is the sincerest form of flattery, right? http://www.kickbackpoker.net/
@Cogedor_barato This is working for me, You may be implementing it wrong way.
Now its time to have your own website and leave the blogspot.com!
Wow! This solved my problem perfectly (shadow box behind all my pics/images on my white background.) Changing it from .1 to 0 did the trick! Though my template contents were definitely different then the example you provided (I was still able to figure it out!) thanks very mush!
great information. I need to bookmark this blog so that I can tweak my sites :).
Keep uo the good work .
You have easily describe the process to change the border. Well I am impressed from your explanation. Now I can go for change in image border. Thanks for it.
Hey thanks a lot for these hint and code.
It was very useful.
Regards Denmark
Thanks for writing, I very much liked your newest post. I think you should post more frequently. you evidently have natural ability for blogging.
Thank you, very useful! :D
Thanks a lot <3
I Inserted border:0px into my code and it worked GREAT.
Thanks =)
Thank for good script!!
Hi,
I was confused with this problem of changing image borders & at last i got solution from here to work with CSS.Thanks for information.
Regards,
Vanessa
Thats another really nice post. I'm really impressed by this blog.
Your Friend G33K
very helpfull ... pinged!
I'm just starting to use blogger and although I didn't use this tip directly it's helping me understand how it all works.
Thanks for helping me get to the nitty gritty of blogger :)
thank you very much! But I have some problems with ie6
It works but in a little different way make border none and padding 0px.It works
http://www.gadgets-priceinindia.blogspot.com
Thanks for the informative tutorial on how the edit and change image borders.. great stuff :)
Hi,
I am on Blogspot too and followed your directions. I figured out I didn't even need to paste in the extra line of code.Really superb
Regards,
Sana
Nice article.
Thanks!
Thanks Annie, this post is very helpful.
SimplifiedBlogging.com
I am a bit confused, as my knowledge in php, or css is a bit low. Thanks anyway!
Awesome Share Mate...kepp Posting More :)
Great! I've been looking for these snippets of code everywhere. Thanks for the great walk-through.
This is a great, simple code for separating elements of a website. At first I had all my images separated with just space from the text. I took this code and now there is a clear distinction between on-site elements.
Good brief and this fill someone in on helped me alot in my college assignement. Thank you for your information. Do you want to build a Functional Resume? Try our resume writing service
Thanks so much! I was looking all over, trying to figure out how to get rid of that darn border.
AFAIK using it like "border:0 none;" is more compatible with larger scale of browsers, correct me if I'm wrong.
I have found this post after the great research, I have been working with my blog on blogspot and faces the problem in changing or removing image borders in my blog post, but thank you for sharing this nice and excellent post.
Regards,
Alexandrabrian
Many thanks I have been struggling to solve this. Cheers :)
this post really helps me building my blog, thanks a lot...
check this out and I need your comments :)
http://movietrailernow.blogspot.com/
http://graphicmediaknowledge.blogspot.com/
Thanks , I was looking for that cool article for image border , thanks for cool stuff !
Andrew Sami
Houston TX ,USA
genie bra | teeter hang ups
This is what i am looking for to make my blog more creative.This code really helps me thanks.
I think you are doing a great job where you are teaching yourself html and css through your blog.
I have been working with my blog on blogspot and faces the problem in changing or removing image borders in my blog post, but thank you for sharing this nice and excellent post.
Valuable info. Lucky me I found your website by accident, and I’m shocked why this accident did not happened earlier! I bookmarked it.
Great online walk through for a common HTML problem. I do hope that there will be more simple solutions to follow in the future.
hey very useful information...u defined basic problem which everyone come across..thanks for sharing thz information....
Nice information about how to change or create image border.Color and style can also be changed.I am glad to see such a nice blog.
hi annie just telll me how to remove or decrease the gaps between every posts?for example........
1.tv serials 22nd jan 2012 click here
2.tv serials 23 jan 2012 click here
if the abv 1) and 2) are the posts the gaps between them made me so mad,its so large in my blog so just tell me how to decrease?
plus tell me how to divide post section into 2 parts,so that i can publish 2 different kind of posts in each of the sections.thank you
Eric Giri, I'm going to have to research this...if and when I figure it out, I will post a tutorial.
Could I look at your blog?
ya sure anie u can hav a look at it just not gud though ..........peinepal.blogspot.com is where u can go.
just tell me how can i divide post section in 2 section or parts so that i can publish different posts at a time.iam just the beginer of the blog.
thank you anie
Eric Giri, I've thought about what you want, and I don't think it is possible. But you can publish part of the post, then go back at a later date and post the rest.
Thanks again. I try to build my own websites and sometimes fall short.... I'm bookmarking your site. It's like the google for website/SEO questions!
PS- Is your name really Annie?
@Havenese puppies...Annie was my nickname.
Thanks, I'm new at this and with my limited knowledge of html your tips really do come in handy.
THanks so much
It works but in a little different way make border none and padding 0px.It works
I'm still using the image on the blog header, I want to leave it like that for a while.
Thnak annie
Can you please add a tutorial for adding shadows with css?
Works fine Thanks for sharing....
Thank you for sharing this! It worked well for me as well as the others who have used it. I think image banner are what we should also learn to optimize, not in a keyword kind of way but more of in a content kind of way. This will be what people will be seeing firsthand as they enter a topic or your blog so it is important that we optimize it to attract more loyal visitors or generate new ones.
Little different from the topic but I thought I share it you can do some funky stuff with css borders such as making the image dotted or inset by adding it into the code and changing the colours like this border: 1px dotted #888888; - border: 1px inset #888888; have a play see what you come up with.
Thank you for sharing this! It worked well for me as well as the others who have used it.Visit my homepage: nap the online
works quite well for me too :)