Search This Blog

Sunday, June 28, 2009

How to remove Header borders

A blogger request help for removing the Header border (she called it title). This is easily done.

First, sign into your Blogger account (Dashboard). Then click on the LAYOUT tab followed by EDIT HTML to get to the template editor. Look for this in the template:

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

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}


Now delete
border:1px solid $bordercolor;

Preview and if satisfactory, save template.

Related post: How to remove border for images uploaded via Blogger photo upload icon

27 comments:

  1. My sister Valerie and I figured this out about a year ago when we started our blogger blogs. Let me show you one of my blogs w the Header Border removed. It's pretty. It has a photo of a tulip Valerie took, in which we placed in the middle of the box (border missing!). I wanted to say that those who remove the border of the Header box must keep in mind that all the lines between their posts as well as the lines between their entries in their sidebars will also be removed. It is a choice that must be made -- do you want all borders removed? If you don't don't remove the Header border! If you don't mind, and want the Header border removed, go ahead!

    Please check out my blog for an example of the box around the Header removed. It's cool, more seamless, and I like it!

    Sometimes I Think

    http://sometimesithink-krissy.blogspot.com

    krissy knox :)

    ReplyDelete
  2. That's not the only way to do it, you can instead of remove the border change the color to the backgroud color of the blog. Either way will do.

    ReplyDelete
  3. Hi, I would like to know how I can add space around my blog header. After turning my 2-column blog to a 3-column one, my header ended up sticking to the top part of the page, without having a gap in between (unlike the default Minima Black template in Blogger) making it look very cramped. I tried removing the borders of my header, but it still looks cramped. Please help. Thanks a lot.

    ReplyDelete
  4. Hi, I would like to know how I can add space around my blog header. After turning my 2-column blog to a 3-column one, my header ended up sticking to the top part of the page, without having a gap in between (unlike the default Minima Black template in Blogger) making it look very cramped. I tried removing the borders of my header, but it still looks cramped. Please help. Thanks a lot.

    ReplyDelete
  5. thaaaanksss!
    useful! it worked!
    =)

    ReplyDelete
  6. Thank you! I'm so glad there are people out there who are smarter than me (well, there are plenty of those) who post this kind of thing.

    Endlessly helpful.

    ReplyDelete
  7. Another great post from your blog!

    ReplyDelete
  8. thanks, that made it so easy.

    ReplyDelete
  9. Hi!
    I been trying all day to remove the heder borders but i coudn't make it. I'm freeking out!

    please help me!
    this is my blog: www.thestylectures.blogspot.com

    your blog is extraordinary!

    thank you in advance,
    a.

    ReplyDelete
  10. What template are you using? Did you try to do what this post instructed?

    ReplyDelete
  11. i did try but it didn't work! heeepl please!

    ReplyDelete
  12. Thanks a lot ......... man can u plz give a tutorial on how to make a navigation bar (not that one with Java console box)in your blog. Thanks again

    ReplyDelete
  13. Already done. See Simple text horizontal navigation bar. Thinking of improving on it by adding background color later.

    ReplyDelete
  14. Peter, this is my blog anf I have tried everything to remove the dotted borders around all of my images. But to no avail, please help me thanks.

    http://www.moviegifs.net/

    ReplyDelete
  15. Peter, this is my blog and I have tried everything to remove the dotted borders around all of my images. But to no avail, please help me thanks.

    http://www.moviegifs.net/

    ReplyDelete
  16. hi there,how about header borders for weebly pages? ive been trying to work around it but have failed. how do i do it? do you know? could you help me? please email me at elisharusli@gmail.com

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. Apologies, what are "weebly pages?"

    ReplyDelete
  19. Thank you so much, that was too easy! Thanks for sharing it!

    ReplyDelete
  20. Thx for sharing , i used it on my website Documentaries

    ReplyDelete
  21. well, my border is still out there /: how do I delete it? there is no border in my entire code...

    ReplyDelete
  22. Anjj,

    What template are you using? Give me the URL to the template source and maybe I will test it out, or....

    Try search for Header in your template Css then try this line
    border-style:none;

    ReplyDelete
  23. thank you sooooo much, the border was really irritating and no it's no more! <3<3<3<3

    ReplyDelete
  24. Neat, thanks a lot. It looks much better now :)

    ReplyDelete
  25. Horey... It`s fixed! thank you, I appreciate you for taking the time out of your day to share the great part from your experiences and honestly I got it at the best point. If you have another free time would you please share your thought on our newly added product here http://www.royalgorden.com/. Thank you in advance and have a great time...

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

Disclaimer: This blog has no relation with Wiley Publications