Saturday 13 January 2007

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 {
padding:4px;
}
or this:
img{
padding: 4px;
}
To those codes you would add this line:
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"
type="color" default="#cccccc" value="#cccccc">
Change the colors to the color you want. Then, further down in the style sheet, instead of adding border: 0px; add this:
.post img {
padding:4px;
border:1px solid $bordercolor;
}
You can change the solid to dashed or dotted. And change the width by changing the px size.

Working with Classic Blogger, add this to your CSS style sheet:
img{
padding: 4px;
border: 1px solid #94C258;
}
Once again you can change the color, size and style to dotted or dashed.

post signature

No comments:

Post a Comment