Sunday, December 17, 2006

How to get rid of the border in images uploaded via Blogger Dashboard

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>


  NEWER POST    HOME  OLDER POST


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.

57 comments:

  1. Anonymous12/17/2006

    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

    ReplyDelete
  2. 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

    ReplyDelete
  3. 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

    ReplyDelete
  4. 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

    ReplyDelete
  5. on another topic..my blog has vaporized after I made a tiny edit.
    Now what?
    HELP
    Carolg

    ReplyDelete
  6. 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

    ReplyDelete
  7. Anonymous1/03/2007

    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

    ReplyDelete
  8. 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

    ReplyDelete
  9. Anonymous1/06/2007

    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?

    ReplyDelete
  10. 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

    ReplyDelete
  11. Thanks. This was driving me crazy. Worked for my site, http://www.heroesarg.com

    ReplyDelete
  12. 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!

    ReplyDelete
  13. 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

    ReplyDelete
  14. How did you add the social bookmark script? Did you get it from Internet?

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  15. 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

    ReplyDelete
  16. 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

    ReplyDelete
  17. Thanks anway Peter!

    ReplyDelete
  18. 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

    ReplyDelete
  19. 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)

    ReplyDelete
  20. thanks!! that was simpler than i expected :)

    ReplyDelete
  21. Thanks, that was driving me mad.

    ReplyDelete
  22. Thanks so much!!!

    ReplyDelete
  23. I'm so glad I found this site! Thanks so much for the help!

    ReplyDelete
  24. 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

    ReplyDelete
  25. "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

    ReplyDelete
  26. 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!

    ReplyDelete
  27. 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.

    ReplyDelete
  28. 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.

    ReplyDelete
  29. Thanks for the information! It was helpful.

    ReplyDelete
  30. Thanks it worked! :)))

    ReplyDelete
  31. excellent...worked at last!!!

    ReplyDelete
  32. ok i love you! every time i have a problem in blogger this site helps/explains it better than any other. THANKS!

    ReplyDelete
  33. 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!!!

    ReplyDelete
  34. Thank you so much!

    ReplyDelete
  35. love your blog!! so easy to follow...thanks!!!

    ReplyDelete
  36. 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.

    ReplyDelete
  37. Your blog looks very nice so what is the problem?

    ReplyDelete
  38. 'Your blog looks very nice so what is the problem?'

    Thank you, Peter. I accidently posted my problem twice in your blog. But below is an image of what I mean. And below that is a test post to show you also an example.

    I tried to correct it with your help using the 'image style="border:none;"' within my image posts. But it seems impossible to remove. Please help! Thank you.

    TEST POST TO SHOW YOU:

    Left click on the image and the gif pops up. You will note the thin i pixel black border around the gif. All of my gifs have that. That is not the issue. Nor is the red table around the image on the page. Right click on the image and you will see the red dotted line around it. I justc ant get rid of the bottom bit and that is all I need done.

    IMAGE OF ACTUAL ISSUE:

    Here is what I mean. The top and the left and right sides I have fixed. But the bottom is pissing me right off.

    [IMG]http://i42.tinypic.com/mr688g.jpg[/IMG]

    See the black space at the bottom? I have tried everything I know. But seeing as this is my first blog, I am still not fully in the know.

    ReplyDelete
  39. Thanks so much! That's really helpful!

    ReplyDelete
  40. thank you anonymous that definitely helped.

    ReplyDelete
  41. 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!

    ReplyDelete
  42. 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);
    }

    ReplyDelete
  43. 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!

    ReplyDelete
  44. 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

    ReplyDelete
  45. What shadow? Where? Don't see any shadow?

    ReplyDelete
  46. I still have pale pale borders around my images! I've done step by step advice from all your suggestions. Help :((

    www.judecore.com !! x

    ReplyDelete
  47. Contact me via my contact form and then send me the image code to test

    ReplyDelete
  48. Thank you times a million for this tip! I am adding a link to your site, hopefully my classmates will find you helpful too.

    ReplyDelete
  49. I'm not sure if this is just me, but is your how-to guide with the old blogger dashboard? I see no option in the new version for changing the border colours as there is no templates/fonts section..
    any help appreciated!

    ReplyDelete
  50. "old blogger dashboard?"

    Dashboard is same for all, perhaps you mean old template. Suggest you email me with a fuller description of your/problem/question for easier communication via my contact form

    ReplyDelete
  51. I have tried to remove all borders but no matter what I do that top border will not go away!! Please help.. (I'm using a wordpress converted to blogger template) www.mbellishyourlife.com

    ReplyDelete
  52. I just updated the settings of my blogger to the newer version "Updated Editor" in the "Basics" tab of "Settings".

    Easiest way to remove the border (Updated Editor):
    - Design tab
    - Edit HTML
    - Find this line below the "Posts" category (about halfway down when scrolling):

    .post img, table.tr-caption-container {
    padding:4px;
    border:1px solid $bordercolor;
    }

    Change 1 to 0:
    border:0px


    All future images will have NO border.

    ReplyDelete
  53. YAY! The simple advice to change the color of the border from Anonymous worked :) Thanks!!!!

    ReplyDelete
  54. I have the same annoying shadow remaining around my images as well after diminishing the border colours. I have not tried the html route as yet. Does that fix remove the shadow part, Peter?

    Using new blogger templates.

    Thanks!

    Donna
    signmakergirl@hotmail.com

    ReplyDelete
  55. FWIW I had to change

    .post img {
    border: none
    }

    Just doing

    img {
    }

    Didn't work because the .post img was more specific and overrode the img style.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics