A reader asked how to remove the border from the image uploaded via Blogger dashboard. At first I thought all one need to do is to edit the attribute border="1" to border="0" in the <img> tag, but that is already the default in all images uploaded via Blogger dashboard, and the image still have a thin border. The only difference will be a thicker border if you put a larger number in border="X". The answer is to add a CSS (Cascading Style Sheet) to the code. Add in the <img> tag the following: style="border:none;" and the border will be gone.
For example, in the post
Sibu Island, Johore, Malaysia, there is no border around the image. This effect was achieved by adding style="border:none;" (in red) in the <img> tag. The HTML for the image is in the scroll box below:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/x/blogger/1313/787/1600/396073/Sibu%20Island%20-%20Johore%20800x400px.jpg"><img style="border:none;" "display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://photos1.blogger.com/x/blogger/1313/787/400/161663/Sibu%20Island%20-%20Johore%20800x400px.jpg" border="0" alt="Sibu Island, Johore 800x400px" /></a>
Hide image border by merging border with background
A commentator has also suggested editing the template so that the color of the image border merge with the main column background color so that the border becomes invisible.
46 comments:
another way is to just hide the border by going to templates/fonts and colours and on the 'border colour' option choose the colour of your background and the border will simply merge in and disappear
Peter: Have you tried out the new del.icio.us 'tagometer' code? I added it into my template in the post section, but it throws my alignment off. (Pushes the 2nd post and following way down the page).
http://delicious/tagometer
Sorry, don't know anything about del.icio.us tagometer. Your link just lead to http://del.icio.us/ with no information on tagometer.
Peter
Enviroman Says
Ah! kristasphere,
You gave the wrong URL for tagometer. It should have been
http://del.icio.us/help/tagometer
I have installed it into this blog: Good Business and Finance in the right sidebar and it has caused no problem.
Peter
Enviroman Says
on another topic..my blog has vaporized after I made a tiny edit.
Now what?
HELP
Carolg
What edit? Can you undo the edit?
If not, did you back up the template before you did the edit, or have an earlier update.? If so, just put the update template file back in.
Peter a.k.a. Enviroman
Enviroman Says
Peter,
This is on the subject of pictures and layout.
I added a picture widget to the sidebar of my blog, but the picture, even after the "sizing" button was selected, is out of the border from my template. I've tried different templates, and it's the same on all. How do I resize a picture from blogger? Is it possible? I've also added a picture as a footer, and it also extends past the border/backround. Any help would be greatly appreciated!
Ryan Spies
http://talesfromacardboardfort.blogspot.com
Hi Ryan,
That is strange. I have tested uploading a photo to the sidebar and have chosen "Shrink to fit" and it has worked perfectly. So I don't know why you are getting a problem. Perhaps different template, but I really don't know. But if the problem persist, you can always resize your photo to fit the sidebar before you upload. See this post on how to resize photos:
Usint Irfanview photo editor for your blog
Peter a.k.a. Enviroman
Enviroman Says
this isnt really about borders but i had question about image size.
is there a way to bypass the automatic large = 400 px width on images uploaded?
You can always change the image size after it is loaded. Edit the post in the COMPOSE mode, grab the corner of the photo and drag to a size you want. Or better, refer to these posts: Uploading and manipulating photos with Blogger and
Using Irfanview photo editor for your blog
Peter a.k.a. Enviroman
Enviroman Says
Thanks. This was driving me crazy. Worked for my site, http://www.heroesarg.com
Hi there. I've learn't so much from blogs like this it's not funny. But it's come time for me to ask for help. I would like to remove the border from my social bookmarks, please can you offer some advice?
http://easyhdtv.blogspot.com
Many thanks!
Check my bookmark. It has no border. Use AddThis. See post Easy social bookmarking for your blog.
Peter
Dummies Guide to Google Blogger
Thanks for the quick response Peter. I would like to use the social boomark script I have now but don't know what to do to it to remove borders from just that script and not the whole page.
Thanks again.
http://easyhdtv.blogspot.com
How did you add the social bookmark script? Did you get it from Internet?
Peter
Dummies Guide to Google Blogger
this site is synergymx.com. The site owner wrote a great script for blogger social bookmarks, but I would like my template to exclude this script for placing borders around the images:
Site:
http://www.synergymx.com/stuff_detail.asp?ID=144
From the look of it, it appear that the border comes from the CSS, which apply to all items of the same class. I don't think you can remove the border of the bookmarks without removing the others. However, to ask at Google Blogger Help group to confirm.
Peter
Dummies Guide to Google Blogger
Thanks anway Peter!
I tried adding the border: none - but the border still remains in my page. What should I do? Can you please help. My blog is - http://wulfpaw.blogspot.com
Hi Wulf Paw,
The post says add style="border:none;"
not just border: none
Peter (Blog*Star 2006 and 2007)
Testing Blogger Beta (now New Blogger)
thanks!! that was simpler than i expected :)
Thanks, that was driving me mad.
Thanks so much!!!
I'm so glad I found this site! Thanks so much for the help!
THANK YOU!!!
:-D
Anonymous said...
another way is to just hide the border by going to templates/fonts and colours and on the 'border colour' option choose the colour of your background and the border will simply merge in and disappear
THANK YOU ANONYMOUS!!! that's exactly what i wanted.
and thank you blogger tips and tricks. if it weren't for u i wouldnt get this answer! =D
xxx
sydneygirl
"sizing"
When I add images to my sidebar for a slide show etc,First I upload my images to a folder on my picasa web albums, then I add a HTML/Java widget. Then go back to your picasa web album and click the share button to the right and below that you will be given options for code.
Copy the code then paste into your widget, save & view. If it's to big just click edit widget and look for sizes like 400 or 360 etc.
Just change the number and view.
I usually 250x250
This is so helpful! But how can I permanently change the code so no images have borders, but so the dividing lines DO stay in the sidebar.
When you change border colour with white for example to make them "disappear" it deletes the sidebar separator lines which I like.... just looking to delete them off photos...
Your help is much appreciated!
It appears to me that changing the border color via LAYOUT > FONTS AND COLORS will change any element with the attribute "border" so this 1-step way of hiding image border will hide other elements as weil.
I figured it out!
I literally just went into the code for POSTS and deleted anywhere it said border... worked for me and left the side bar borders as is.
Thanks for the information! It was helpful.
Thanks it worked! :)))
excellent...worked at last!!!
ok i love you! every time i have a problem in blogger this site helps/explains it better than any other. THANKS!
Just what I was looking for. From googling my question, reading your article and following the directions it took me all of about 3 minutes to fix what I wanted. Thanks!!!
Thank you so much!
love your blog!! so easy to follow...thanks!!!
Peter, please tell me how to fix this issue please? I have this blog.
http://www.moviegifs.net/
And i cant remove or reduce the bottom border. I have altered the top and left and right to how i need it. But no matter what i do that bottom border remains.
Please help thanks.
Your blog looks very nice so what is the problem?
Thanks so much! That's really helpful!
thank you anonymous that definitely helped.
Hi,
Thanks for your great tip on how to remove borders. I was able to remove them from some images I wanted but now you can still see the drop shadow, is there anyway to remove the dropshadow as well?
You can see what I am talking about here (on the section called Art Styles):
http://www.giddyfingers.com/p/portraits.html
Thank you, any help is much appreciated!
Mara, these are in your template:
<Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee"/>
<Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px"/>
<Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px"/>
<Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px"/>
<Variable name="main.border.width" description="Main Border Width" type="length" default="0"/>
<Variable name="header.background.gradient" description="Header Gradient" type="url" default="none"/>
<Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px"/>
<Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px"/>
<Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px"/>
.content-outer {
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 10px #333333;
box-shadow: 0 0 40px rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
.Header h1 {
font: normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
color: #bb9832;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .2);
}
widget .zippy {
color: #999999;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}
/* Posts
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 2px;
background: #ffffff;
border: 1px solid #cccccc;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
.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);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}
I've been trying to figure this out for ages. Thank you for this post! I know it is three-and-a-half years since you posted but still, thank you! Your blog has such a wealth of information!
Hey Peter.
Thanks for your advise, you're usually right on target. But I wanted to remove the shadow of an image in the sidebar and I still couldn't do it. Help?
You can see it at http://teoriadadescompressao.blogspot.com
What shadow? Where? Don't see any shadow?
Post a Comment