Pages

Sunday, February 20, 2011

Blogging Tip- Eliminating the default border around your header

 

I’m guest posting today at Brenda’s  Cozy Little House  for her Blogger Tips Monday.  Thanks, Brenda, for letting me come over and spout some information that I hope will be helpful to a few peeps!

                                                            CozyLittleHousebadge150x 

                           click on Brenda’s button to visit this amazing, fun, and talented lady!        

 

                                                                                                            ~~~~~~~~~~~~~~~~~~~~~~

 

This is a screen shot of what my blog would look like if I had not removed the default Blogger border when I changed my blog header for the first time last year.   It’s a little distracting, wouldn’t you agree?  Those double lines made it look as if my photo mosaic wasn’t large enough to  fill the header box.  Well, I removed those lines, as you can see in my current header  on my blog. It was a very easy, peasy computer code fix and you can do it, too!  Don’t be scared…  All you have to lose are those ugly border lines! 

 

revised example

 

                                                                                                             ~~~~~~~~

Lately,  a  lot of  you in blogland have been busy customizing your headers with new pictures and fun mosaics.   I’ve noticed on some of your blogs that the default Blogger border has remained in place even after you’ve uploaded your new headers.  Did you know that you can remove it to give your new header a more polished and finished look? I have an easy tutorial for you, showing how a simple HTML code change can get rid of it.

Now, I like to practice all my html changes on my test blog. Having a test blog makes it so much easier to play around with code or anything else you want to practice on- you  never have to worry about making changes while people are viewing your blog pages and you don’t have to work in the wee hours of the morning when you think everyone else might be sleeping and not on your blog!  And if you’ve set your test blog settings to where only you can access it, no one sees your test blog, at all.    For me, I like to practice in a place nobody can see all my boo-boo’s! 

But whether you choose to do this in your test blog first or on your actual blog, itself - 

Here are the instructions-

 

1)  Go to your design page on your dashboard and click on “edit html” on the layout page.

1st step

 

2) Before you do anything else, make sure you save a copy of the existing template. You can copy and paste it into a word or notepad document. You can always restore the original template if you are unhappy with any changes you make.

3)  Click on  Expand Widget Templates- this will place a check mark in the box. 

 

back up template

 

You may see in the following screen shots that I didn’t check the  “expand  widget template” box.  I just forgot to do it in those screen captures.   So, do as I say and not as I did….   :-)

 

4) On your keyboard, hold down the control button and then the letter f.   This will bring up a search  (Find)  box at the bottom of your screen. Type in the word “header” and hit the enter key. 

find box capture

 

 

If hitting enter did not bring up the code below, hit enter again until this part of the code appears.

 

#header-wrapper {
  width:860px;
  margin:0 auto 10px;
  border:1x solid $bordercolor;   }
#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}
  #header {
  margin: 5px;
  border: 1px solid $bordercolor;   text-align: center;

 

The highlighted border code numbers above might be different than in your code, depending on the actual width of your border, so don’t be alarmed if they don’t say  “1.”

 

The code in the following screen shot is the part of the code you are going to work on.

5)   I’ve highlighted the portion of the code you will be changing. Do you see the number 1 in both places?   You will be changing  the number 1 in both places to a 0.

screen shot 

 

 

This is what your template should look like after you’ve changed the code-

edited screen shot

 

6)  After you have done this, click on preview to see your changes.  The border should now be gone.

 

7)  If you are satisfied with what you have done, click on save template. You should now have no border to distract from that great new header you added!                                                                                             

                                                                                                        ~~~~~~~~~~

Hope this tip will be useful to those of you who have already added those fantastic new mosaic headers and to those of you who might be contemplating adding them!

                                                                                                               

10 comments:

Kim @ Savvy Southern Style said...

Sue, I don't have a clue if I have a border or not. All over my head. Brenda from Cozy Little House did my header. Thank goodness for you folks that understand this stuff. Great tutorial.

Glenda/MidSouth said...

The letters HTML scare the .... out of me !!!:-D I definitely have a test blog - if I didn't, fellow bloggers out there would report me to the blog inspectors - if there is such a thing. :D
Thanks for the tutorial.
I like your header - Very pretty!

Secret Garden Cottage said...

Thank you once again, Sue! I just went and did it... soooo simple... took me all of two minutes! I've been wondering how to do that ever since I started blogging... grrrrr... lol!
Hope you're having a great weekend!
xoxo,
Jo :)

Sandy said...

Hi Sue... thanks so much for this information.. I did do it for the border around my photo but it's still around my header name? Will try again!!
Great information
Sandy

Crystal Rose Cottage said...

Lots of information Sue! The grandkids just left and I have a slight headache. I don't even know if I have a double line or not. I will have to check it out once I get my second wind! Hope you are having a good weekend!~Hugs, Patti

Carol said...

Great tip, Sue! The header looks so much better without the border!

Brenda Kula said...

I second the motion that your banner is exceptionally pretty, Sue! You did a great job with this!
Brenda

Kathleen said...

Love your new header! I will try it when I am better.

Marti said...

I like your banner too. Do you have a tutorial on how to do something like that? I had been wondering how to make my other heading fit the outline, and now I can just get rid of the lines. Thanks!

Rettabug said...

Hi Sue,

I just followed your wonderful instructions to the letter & I did it right!!! I got rid of my borders! Thank you SO much for posting these instructions.

Hugs,
Rett