Blog header and sidebar titles

Okay, this is going to be a condensed version. I have needed to write this up for awhile and I'm not going to put it off anymore, but I don't feel like making it as detailed as originally planned. :) So, feel free to ask questions if you have any.

First of all, the "trick" is to use a solid color background for the main section, sidebar, and header. I chose white because that's easiest. I'm not sure if blogger has a template where all the sections are connected without there being a "theme" of some kind. I just chose the minima template (or whatever it's called) and played around the with html. I believe (sorry I'm too lazy to check) that I ended up adjusting the "padding" in order to get the sidebar and main section connected to each other and to the header. That's the first step.

Now, I used PSE to create the header and sidebar titles. The trick here is to use that solid background color as your background. My image is actually a rectangle (not an odd shape with swirls and things) and I just made the background white. I did the same with the sidebar titles. Oh, and I alway create everything big and then resize instead of having to resize all my elements and papers. For instance, I usually start my header at about 10x3 (or 3.5 or 4) at 300 ppi and then when I'm done, I'll resize it to 800 pixels wide or whatever the width of my template is. I did a similar thing with the sidebar titles and then I made them only like 200 pixels wide, or less.

Blogger makes it really easy to upload pictures for the header. If you save your image as a jpg, it'll be good to go. It is also easy to add the sidebar titles. You just add a picture page element and upload it there. Now, the problem I had is that there was a dotted line between the titles and the actual sections. In the html part of the settings, there is a code looking something like this

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

And you can either remove the border-bottom line completely, or just change 1px to 0px. That way if you ever want it back, you can easily add it.

Now lastly, I was still not satisfied with the look. There was too much space between sidebar elements, including my titles. So my trick was the make the sidebar titles taller. There is quite a bit more "white" space above each picture than below. So it looks funny in photoshop, but it looks great on the blog.

So, I don't know if anyone will be able to understand this and I'm sure it makes no sense to a lot of people, but hopefully it'll help at least one person! Again, let me know if you have any questions and I will take the time to be more specific.