I considered the same thing, once.And, hey! You used "reign" correctly in a sentence! One karma point!
Doesn't look so bad to me. Maybe the red italic font is a little hard on the eyes...
Anyway: columns. Serendipity puts the sidebars in the left and right columns. If you go to your admin page and click "Configure Plugins", the list on the top is the sidebar plugins. Each has a drop-down on the right indicating which sidebar they'll go into: 'left', 'right', or 'hidden'. By default, all the included plugins are on the right. Move one into the left sidebar, and you should see your three columns. (Content goes in the middle, of course.)
Header: yes, we can do something with this. The two headers look very similar to me; the only difference on my screen is that the side images are closer together in Serendipity than in Blogger. Perhaps you've got a different sized screen... ah. Sure enough, when I reduce the page size, the Blogger page gets scrollbars, and the header stays in one piece. The Serendipity header flows onto separate lines.
That's because in your Blogger site, the images are positioned absolutely. They can't move around. Users with small screens will have to scroll, while users with big screens will see a big gap on the right.
When you position something absolutely, it's like having a website with a layer of glass on top. The absolutely positioned stuff gets taken off the table and put on top of the glass, exactly where you specify. Of course, since we took it off the table, everything underneath slides up to take its place. That's why the 'body' got 'pulled up over its belt'.
So, to get what (I think) you want, we'll have to absolutely position the images. Since we didn't give them names, we'll do it in the template. (There are better ways, but this is the one that I believe you'll find easiest to understand. It affects the fewest items.) Edit your index.tpl. For each of those three img tags in your header, edit the line like this:
Code: Select all
<img style="position: absolute; left: 23px; top: 32px;" blah blah blah>Your ReOpen911 img is also absolutely positioned. I had moved it into a div with center alignment to get it to center, no matter how big the user's screen is, but if we try that with absolutely positioned header, it could wind up sliding underneath one of the header images accidentally. We need to position it absolutely, too. Edit the index.tpl and move that img out of its div, right next to the third header image (so now the ReOpen911 img is the fourth one in line. Give it the absolute style, too, at (375, 144). Now it will always appear to be centered under the main banner, just like your old page.
OK, that's done. But now the body goes over the belt. We need to make some extra space for the images somewhere; we've got to tell the top "table" piece to scoot down a bit, even though there's nothing taking up the space.
That's the "margin" style. We specifically want some margin on the top, which is "margin-top", oddly enough. The top piece on the table is that <div> just after the images, but inside the "serendipity_banner" div. In CSS, we can call that "#serendipity_banner div". So edit your style.css and add this somewhere (I recommend right after #serendipity_banner):
Code: Select all
#serendipity_banner div {
margin-top: 191px;
}So, what do you think? It should have scrollbars on small screens now, and your header should look exactly like it once did, with the body giving it enough space to see everything. And you've learned a little about how stuff works on your website.
