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

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.
Posted by at
Labels: , ,

54 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

  14. 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

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

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete

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

  17. 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

  18. Thanks anway Peter!

    ReplyDelete

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

  20. 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

  21. thanks!! that was simpler than i expected :)

    ReplyDelete

  22. Thanks, that was driving me mad.

    ReplyDelete

  23. Thanks so much!!!

    ReplyDelete

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

    ReplyDelete

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

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

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

  29. 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

  30. 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

  31. Thanks for the information! It was helpful.

    ReplyDelete

  32. Thanks it worked! :)))

    ReplyDelete

  33. excellent...worked at last!!!

    ReplyDelete

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

    ReplyDelete

  35. 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

  36. Thank you so much!

    ReplyDelete

  37. love your blog!! so easy to follow...thanks!!!

    ReplyDelete

  38. 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

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

    ReplyDelete

  40. Thanks so much! That's really helpful!

    ReplyDelete

  41. thank you anonymous that definitely helped.

    ReplyDelete

  42. 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

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

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

  45. 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

  46. What shadow? Where? Don't see any shadow?

    ReplyDelete

  47. 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

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

    ReplyDelete

  49. 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

  50. 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

  51. "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

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

    ReplyDelete

  53. 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

  54. 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

Subscribe to: Post Comments (Atom)