Feb 10, 2009

How To Change And Remove Borders In Blogger

If you performed the modification to add gadgets to the header of your Blogger blog if you're using the Minima template you may want to alter the borders. Or you just may want to alter the borders in general to give your blog a slightly different look. The easiest modification to your borders you can make is to change the color under Layout>Fonts and Colors. There you can change the colors to make them stand out or make them the same color as your background color to "hide" them.

how to change the borders in BloggerThis image is of four examples of how you can change the borders in your blogger template. The first border is the default sidebar border in Minima made of little dots . The second border is a double line border. On the second row is a solid border line and a dashed border. Some templates may use one or more border styles; one for the header, one of the sidebars and one for the images of the post area. But they're all easy to find in the template and make changes to if you're so inclined.

The first border you're likely to encounter will be a border for the header-wrapper of your header. In Minima it looks like this:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

If you want to hide it the easiest way is under "Fonts and Colors" by making it the same color as your background. If you want to remove it completely just deleted the whole line. If you'd just like to change the style of it change the part in red. For example; change solid to dotted, dashed or double. Note: If you change it to dotted or double increase the 1px to 3px so you can see the border better.

Now that you know where to look for the code for the borders and how to make some changes here are a few more you can make.

How to remove the border around images in your posts.

.post img {
padding:4px;
border:1px solid $bordercolor;
}


You can delete the line in green to remove the border around your images in your template or make changes to the style of the border. In the Minima template this creates the border at the bottom of the post and the bottom of the sidebar.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}


If you'd like to have two different borders- one for the bottom of the post and one for the bottom of your sidebars you can split it up like so:

.sidebar .widget {
border-bottom: 3px dashed $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

This brings us to another tip. After I split up the code I took the border from another template's sidebar border and added it to this template for GardenBloggers.com. If you look at my sidebar I'm using the border from the Snapshot template. It was just a matter of copying and pasting the code from that template into this one.

Finally, you may have noticed this already but in case you didn't here are the ways to dictate how your border will wrap around whatever area you're adding it to.

border:1px solid $bordercolor;


Makes a border that wraps around the whole area.

border-bottom:1px solid $bordercolor;


adding -bottom will give you a border only at the bottom. -top, -right, -left will create a border only in those areas.

21 comments:

  1. Hey some great information there, thanks.
    Can you tell me if you know how to change the border on a single individual widget?

    In other words, on Blogger page layout elements, I have tweaked the capacity to add a widget to the body wrapper. (I stuck a "text" widget above the "posts" widget) - but I want to change the border of that singlet text widget, not the whole wrapper.

    Any help is appreciated. Thanks!!!

    ReplyDelete
  2. Seth, I think I know how to do it. Give me a few moments and I'll try to post it later today.

    ReplyDelete
  3. Seth,

    I've posted a tutorial on the subject. If it isn't clear to you let me know and I'll see about rewriting it.

    Hope it helps

    ReplyDelete
  4. thanks a lot for the tutorial :))
    but i wonder if the border-bottom (below every post) can be change into an image.

    i mean, an image as a border.

    really hope that u can help me,,
    please and thank you.

    ReplyDelete
  5. thanks 4 sharing info...

    http://kalstudio.blogspot.com/

    ReplyDelete
  6. Very useful. Having no control over the borders was spoiling the look of the site. Can u let us know how to make the sidebar borders extend upto the length of middle wrapper order length when the posting length becomes greater than the length of the sidebars

    http://www.sgr-law-of-attraction.blogspot.com/

    ReplyDelete
  7. Thank you for this.
    I was wondering if you could share the method to removing the border around the "comments" link.
    This tutorial worked for all other aspects on the page except for the "comments".
    http://sheikhusein.blogspot.com

    ReplyDelete
  8. The Science...

    Looks like your column are the same height as your main section, so you must've figured it out.


    Sheikhusein,

    You're using a template that isn't original to Blogger. Although, if you look for "dotted" in your template you should be able to find it.

    Also, if you go to fonts and colors you can also change the colors of the borders to the same color as your background and avoid having to look for the section of code you're looking for.

    ReplyDelete
  9. Where is this tutorial located?

    "Garden Bloggers said... 3

    Seth,

    I've posted a tutorial on the subject. If it isn't clear to you let me know and I'll see about rewriting it.

    Hope it helps"


    I have been looking all over the internet for this :)

    ReplyDelete
  10. Thank you for this informative post. I have removed the border around my images in the minima template. Because the border was aligned with the text, I now have a problem because the images and text aren't aligned. The images are slightly indented. Could you please help?? Many thanks!

    ReplyDelete
  11. Anonymous3/06/2010

    Great post!

    I have a question though...

    How do you add an image as the border on the minima template? I have one saved on my computer but I can't figure out how to make it happen

    Thanks! :)

    ReplyDelete
  12. Thanks, you helped me out!

    ReplyDelete
  13. I'd love a dotty background just like this example - http://www.abigail-brown.co.uk/other-stuff/.

    Is this possible? Many thanks for any help you can give!

    ReplyDelete
  14. We3,

    yes, That's just an image tile you can add to the background of your blog.

    ReplyDelete
  15. Great post, very helpful. Thank you!

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. This is very useful. I've been looking for this hack. Think I'll gonna appply this on my blog. I always feel having a border on image is annoying :D

    ReplyDelete
  18. thanks... photos in my post now look better. ;)

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. Hi Author, I just want ask for help on how to remove the border around my blog I tried your tutorial but It's not working because template is different from the templates available in blogger customization wizard. Thanks

    ReplyDelete
  21. hey, thank you so much for this, but how do i remove the dotted bottom line of the last gadget in the sidebar? I want the lines as a separator, but only between the gadgets and not also at the end of the last one.

    Thank you for your help! :)

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.