Apr 15, 2008

How to Remove the Border Around a Header

Hey Y'all!!
I sure enjoy browsing all your lovely blogs and I enjoy the individuality of each. As I've been browsing I noticed something: on many of your lovely blogs you have a border around your header picture and sometimes the border isn't the same size or isn't lined up. Well I thought I would share with you how easy it is to remove that border.

1. Open your Blogger Dashboard
2. Open the blog in question
3. Go to LAYOUT
4. Now click EDIT HTML
5. Scroll down in the HTML window until you see this:

/* Header

-----------------------------------------------
*/

#header-wrapper {
width:660px;
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;
}


6. In this section you are going to change the pixels on this border.
7. See this line in the above code: border:1px solid $bordercolor; It is in the 1st and 3rd sections
8. Change the 1px to 0px
9. Preview your blog to see if the border is gone.
10. Save your work!

15 comments:

  1. Anonymous12:39 PM

    Does this mean that you are learning or have already learned html? Great job!

    ReplyDelete
  2. Thanks, Tori. Would you mind doing me an easy favor? I'm confined to a laptop computer and my blog looks fine on its little screen. But one time I checked my blog on someone else's computer and it looked all messed up and out of place. Does it look funny to you when you view it?
    I don't want to take the time trying to figure out how to correct it if it looks fine already! Thanks!

    ReplyDelete
  3. Bro. Nicholas,

    I learned HTML along time ago. I don't usually have time to mess around with the codes.

    BTW, your blog looks great!!

    ReplyDelete
  4. Thanks a lot, Tori! I think I've got it fixed.... although it looks the same to me!!
    I would have never figured that one out on my own!

    ReplyDelete
  5. Waallllaaahhhhh! The boarder is gone!---What else do you know how to do?!? I'm beginning to get intimidated... :)

    ReplyDelete
  6. Anonymous7:00 PM

    How I wish you had WordPress so you could help me tweek my blog :-( You're such a "natch" for things like this!!!

    Kate

    ReplyDelete
  7. Oh Kate, your blog looks wonderful! You're good all on your own.

    ReplyDelete
  8. Dear Tori, Thank you so much. I have a friend in Alaska who usually figures out mine for me and then sends it to me. It is so nice to know that if I can just do it. love you, connie from Texas

    ReplyDelete
  9. Hmmmm....I looked but I don't see a border on mine~Boy do I wish I understood HTML

    ReplyDelete
  10. Amy,
    You have a custom blog and when the maker laid that blog out they customized the header, so, no border!
    Make sense??
    Hope so.

    ReplyDelete
  11. Tori,
    I need help creating a banner. Can you help me with this? I couldn't get any of the free banner making websites to work. It's probably me, not the websites.....imagine that?!

    ReplyDelete
  12. That is a great tip!

    ReplyDelete
  13. Ok, my border is gone, but the banner doesn't fit the white background...Lauren told me something that fixed this, but I have deleted the email...I will have to check with her.
    THanks!

    ReplyDelete
  14. So, you can cook, sew, craft, and do html. Is there anything you CAN'T do?! :P

    ReplyDelete
  15. Tori,
    I love your blog! Could you tell me how you put your name in the fancy font on each of your post?
    Linda
    ohscrap@gmail.com

    ReplyDelete

Hey thanks in advance for leaving a comment, sure do appreciate it!!