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!
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!
~~~~~~~~
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.
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.
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.
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.
This is what your template should look like after you’ve changed the code-
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!
