Thursday, December 23, 2010

Remove Image Border in Default Blogger Templates Simple and Awesome Inc

In this Blogger tutorial I show you how to remove the border around images in Blogger posts (Blogspot posts) when using one of the latest default Blogger templates Simple or Awesome Inc.

If you are using an older generation Blogger template or a custom template the solutions contained in this article may work for you however it is more likely that you will need to follow the methods to remove image borders outlined in my previous Blogger tutorial Change or Remove Blogger Image Borders (Part 1)

Below I explore two methods of removing or deleting image borders in the Blogger template Simple. The first method shows you how to remove the image border using Template Designer and the second method outlined describes how to remove the image border manually by changing the code.


Method 1 - Use Template Designer to Remove Image Border in Blogger
  1. From the Blogger Dashboard go to Design > Template Designer
  2. Then select Advanced > Images
  3. Under Border Color use the drop down arrow to open the color palette
  4. Change the setting to transparent by checking the small box on the bottom right hand side marked "transparent"

    How to change the image border to transparent in Blogger
    Note: If you are using the black version of the Awesome Inc template you will need to change the Background Color to transparent too. Click on the down arrow of the color palette and select transparent.

    Remove border Awesome Inc Blogger template
  5. Click Apply to Blog to save your changes to the template
  6. Navigate to any post page to view images in posts without the border


Method 2 - Change Template Code to Manually Remove Image Border from the New Default Blogger Templates
  1. From the Blogger Dashboard go to Design > Edit HTML
  2. Back up your Blogger template
  3. Find this line amongst the declared variables at the top of your template

    <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="#cccccc"/>
  4. Change to the value of the border color to transparent like so

    <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>
  5. Save your changes to the template
  6. Navigate to any post page that has an image and see that the border around the image is no longer visible


In this Blogger tutorial (Blogspot tutorial) I have shown you how to remove or delete the border around images in Blogger posts for the newest generation of default Blogger templates Simple and Awesome Inc. I have discussed two different methods to remove the border around the images either by adjusting the settings in the Blogger Template Designer or by manually changing the code of the variable in the CSS styling section of the default Blogger template


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change or Remove Blogger Image Borders (Part 1)
How to Change the Blog Title Border in Blogger Minima Template
How to Add CSS Styling to Blockquotes in Blogger
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template
How to Remove the Link from a Single Image in a Blogger Post
at

22 comments:

  1. seowebdirectDecember 24, 2010 at 5:55 AM

    Thanks for writing, I very much liked your newest post. I think you should post more frequently. you evidently have natural ability for blogging!

    http://seowebdirect.com

    ReplyDelete
  2. TeisAngelClausenDecember 27, 2010 at 6:06 AM

    Hey just tried it on my white blog and it didint work... any iders?

    ReplyDelete
  3. The WhizzDecember 28, 2010 at 12:27 AM

    TeisAngelClausen just visited your blog and see that the borders around images have been removed so I guess you figured it out. Good luck!

    ReplyDelete
  4. LinkFociJanuary 1, 2011 at 4:30 AM

    Thanks for sharing
    I think we just know CSS we can do that

    ReplyDelete
  5. EricaJanuary 7, 2011 at 5:26 PM

    hey applied those changes to my photo blog and it shows a shadow border around my images. any help with that please?

    ReplyDelete
  6. Web Design ScotlandJanuary 7, 2011 at 9:26 PM

    This is really useful post for users. Thanks for explaining through the code.
    Web Design Scotland

    ReplyDelete
  7. The WhizzJanuary 11, 2011 at 3:35 AM

    Hi Erica. It does depend a bit on which version of Simple you are using. Basically if there is a background color as well this will need to be set to transparent also otherwise the border may not get removed. Please come back to me if you are still having problems and I will take a look at your template.

    ReplyDelete
  8. EricaJanuary 11, 2011 at 6:30 PM

    well the shadow is there on my computer around the right side & bottom of every image (including the buttons that i added on the side) but i was at a friend's house last night and looked it up on her computer and there were no shadows. that really baffles me LOL thanks for taking the time to write back though!

    ReplyDelete
  9. The WhizzJanuary 12, 2011 at 9:14 AM

    Erica. Chances are you are using different browsers. For instance there is a big variation between IE7 and IE8 in the way a page is displayed. Also Google Chrome and IE vary quite a lot I find. If you are customizing Blogger a lot it is always advisable to check crossbrowser compatability. Seems all ok on IE7 by the way

    ReplyDelete
  10. EricaJanuary 12, 2011 at 11:04 PM

    Thanks for the time and info! I appreciate it so much!!

    ReplyDelete
  11. Nikki | The Ginger DiariesFebruary 19, 2011 at 8:02 AM

    I can't find the code in my template while using ctrl+F. Changing the settings to transparent also does not work. I do use google chrome...

    ReplyDelete
  12. The WhizzMarch 6, 2011 at 4:00 AM

    Nikki sorry to hear this didn't work for you. I visited your blog and see that your images do not have a border around them so I guess you figured it out. The methods described above definitely work as I have used them several times on various blogs I have set up. Good luck with your blogging

    ReplyDelete
  13. AnonymousDecember 6, 2011 at 7:26 AM

    Thanks! worked well.

    ReplyDelete
  14. Heather OstlerDecember 13, 2011 at 10:59 PM

    THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ReplyDelete
  15. Angelica in WonderlandJanuary 8, 2012 at 6:07 PM

    Thank you so much for your posting. I am using a Mac and after doing following your instructions, the borders still showed around my images. However, after reading the comments, I went on my PC and the borders are gone. Like you, said there are variations depending on which browser you are using. Thanks again for such a useful posting.

    ReplyDelete
  16. ChrisJanuary 24, 2012 at 2:20 PM

    Images isn't available on the Advanced menu anymore. At least not for my blog :(

    ReplyDelete
  17. Academic SonetJanuary 27, 2012 at 1:51 AM

    Simply great.Without any more visit i found the solution

    ReplyDelete
  18. The WhizzJanuary 27, 2012 at 11:18 PM

    Chris I see you are using a custom template. Chances are that's why you can't see this feature on Template Designer. Advanced images is still there and able to be customized.

    ReplyDelete
  19. corporate photographerOctober 16, 2012 at 11:29 PM

    Awesome stuffs

    ReplyDelete
  20. SEO IndiaNovember 8, 2012 at 10:58 PM

    this will help me alot in putting images in way i want.

    ReplyDelete
  21. nancyDecember 3, 2012 at 12:58 AM

    I really appreciate the idea behind this great post.You are doing a fine job.Keep it up.
    Image background removal

    ReplyDelete
  22. UnknownNovember 4, 2015 at 4:18 AM

    I would love to say thanks to you for writing this, i very much liked your this post. I will say that you should post more frequently. You evidently have natural ability for blogging! Pugh !!! some bloggers use to visit different blogs over all the count. A good blog is waiting for you. I am just appreciating ideas of different people about blogging and sites.

    ReplyDelete