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
46 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!