Blog header Tutorial for all Us little Tweakers

The new blog header was made from a flower photo that I had laying around from the time that DH bought flowers at the Farmer's Market. The lettering was inserted with a photo shop sort of program, and when I saved this header n Blogger I chose the "instead of description" option on the new Gadget that flings code out into your blog.

Many of you may already be convinced I'm a crazed tweaker, but this is fun stuff to do and harmless if you are careful to save the Code before hand.

Before you change anything, be sure to save your template code. I sort of don't bother with this step anymore because I've learned to switch back and forth between the Preview page and the Edit HTML page on my bar. Blogger will auto save a copy anyway, since it knows we mess things up sometimes. But I would still save a page in Word.

This is what the code looks like in your widgets and I've commented, BELOW each one, for each section:

#header-wrapper {
margin:0 11% 10px;
border:5px solid $bordercolor;
}

I changed this to 11% after Blogger shrunk my 740 pixel wide image down to whatever they shrink to. That shrinking leaves the two ends of the border hanging out in space. So, I started with the original % number, which will be on your code, and played with it until it fit, at 11%. Yours may be different.
--------------------------------------------------------
#header-inner {
background-position: center;
margin-$startSide: 1px;
margin-$endSide: 1px;
}

Here, I played with the px numbers so that I would get 1px surround on the inner wrapper ends, instead of what was there when it was far too large a space. I found 1px to be my perfect number but yours may be larger.

-------------------------------------------------

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

Here, after the word "margin", I changed the margin to 5 pix for a wider outer wrapper. You can leave this alone if you like the thin outer wrapper, or REAAALLY crank up that outer margin. If you go too wide with it, though, it can get problematic, just so you are aware of this limit. heehee

When you are done with each section, and are happy with it, then save your work. I do this after each section because I don't want to lose what I'm already happy with.

Enjoy playing if you are so inclined.

PS. See Seitherin's comment about what happens on wide screen monitors. I'll come back tomorrow and mess around with this thing some more. Thanks, Seitherin, for the heads up.