Serendipity Forums

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: Your three images are currently positioned at (23,32), (167,29), and (854,33), so edit their positions accordingly.

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): Yes, we could have done this in the index.tpl by adding a "style" line to the div. But if you do it style.css, you can give your users a choice of style.css files, with different colors and positioning. Some other day.

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.

Doesn't look so bad to me.

That's because it was the template you had me download that you were looking at.
I never uploaded my frankenstein.

Please take a look at my changes at www.politicallyoutspoken.com/cblog.

It seems to me that there is too much space between the '911 banner' and the statement just below.
How do I correct that?

I must admit that I am more comfortable with 'containment' than 'tables'.
I suppose that's because it's the only format I've ever worked in.
This in no way implies knowledge thereof, just familiarity.

Anyway, I'm truly clueless as to how and where to drop my material in, which by the way, I believe will be the upcoming lesson por moi?

The statement you want to move is the one we added "margin-top" to. Just reduce the amount of top margin, and it'll creep a little closer. Increase the top margin, and it'll creep down.

I may be misunderstanding "dropping material in". If you mean adding a blog page, you just log in and click on "New Entry". If you mean adding extra stuff to the sidebar, well...

If you haven't enabled SPARTACUS, the automatic plugin and theme wizard, now's the time. From your admin page, choose "Configure Plugins". Click the link to add a new event plugin. Find SPARTACUS and click the little icon to the right. You'll get a configuration screen. The defaults should be fine; just click "Save". That's it! Now, every time you click a link to install a new plugin or theme, SPARTACUS will download a list of everything available. Cool, eh?

Now we want to put some custom HTML in a sidebar. From the admin page, choose "Configure Plugins", and click the link to add a new sidebar plugin. Install "HTML nugget". You'll go to a screen where you can add your HTML.

I noticed most of your old sidebar items were just titles, with no content. That's OK; you can enter HTML in the "Title" field. The next field is the label that will be shown on the "Configure Plugins" screen (like if you ever want to modify this nugget); it'll never show up on the blog. The last field, the big one, is for the "content" of the nugget. The blog will show the title, then the content in the sidebar. It gets different appearances, depending on your theme. Try it out and see what you like.

Now you want to move the nugget to the left sidebar (by default, they go on the right). Click "Configure Plugins" again to see the list of plugins. Find the HTML Nugget you just added (did you give it a nice list-title so you can tell it apart from all the others?). Change the drop-down to show "left". You can also move it up or down to change its order in the sidebar.

As a side note, I noticed that your leftmost image is positioned right:12px. That means it "sticks" to the right side of the page, separated by 12px. When I resize my browser to be too small, it scoots over and covers up part of the main logo. Is this what you were shooting for? It does provide some flexibility in the layout size.

So far, so good.
I'm beginning to feel the sun on my back!

As a side note, I noticed that your leftmost image is positioned right:12px. That means it "sticks" to the right side of the page, separated by 12px. When I resize my browser to be too small, it scoots over and covers up part of the main logo. Is this what you were shooting for?

I'm not clever enough to have figured that one out on my own. But I must say that I'm fond of it.
It's sticky persistance is in sync with the message.

1. I've installed 'Spartacus', but am a bit fuzzy on how to use it. Is this some sort of background program? How do I engage with it?

2. Is there some way to shorten the space between the 'title' and the 'content' of the posts?

3. How do I drop things like the 'Alito's America' banner in to the sidebar?

I want to start a new thread for future questions, but I'm fearful that I will lose you in the shuffle.
Will you be able to find me before I wilt?

Time for another quick lesson. You're catching on pretty fast, I must say.

1) Almost exactly correct. Every time you click on one of the "Install Plugin" or "Install Style" links, SPARTACUS checks SourceForge (or NetMirror, depending on what you've got configured) to see if anything has changed. If so, it lists the new stuff -- and marks out-of-date stuff for you to upgrade if you want. If you choose one of the off-site plugins, SPARTACUS downloads it automatically. It does all that behind the scenes, so you could call it a background program. There are subtle differences you can detect, but they're really not all that important.

2) Yes, this is no problem at all. We'll be modifying our CSS again. At this point, I'm going to direct you to a tool you'll find very helpful. Go to http://slayeroffice.com/tools/modi/v2.0/modi_help.html and bookmark the link there. This is an actual program that runs directly from your bookmarks. It lets you look at the names and classes of the stuff displayed on your screen. It also highlights each block, even if the block is invisible.

If you run the program (by clicking on your bookmark) and run your cursor over your webpage near the titles and entries, you'll see that the title is called a "serendipity_entry_title", and that the entry itself has two main wrappers, "serendipity_entry" on the outside, and "serendipity_entry_body" one step further in. You might also notice that there's a LOT of space between the _body and the _entry.

So open your style.css and go look for the rule that has ".serendipity_entry_body" at the beginning. Inside the braces, you'll see "padding: 10px". You may remember that we added "margin" earlier to put space outside a container; "padding" is the space inside the container, between its edges and its content. Set the padding to 0, and those 10px will go away.

While you're in there, you might notice that the rule for .serendipity_entry_title has 10px padding, too. When you specify just padding or just margin (instead of margin-top or padding-left or something), you get it on all four sides. That means the edge of the title container is 10px from the actual text! We can set that to 0, too.

Finally, I notice that your entries all have a <br> and a <p> before the actual text. Now, Serendipity ships with a plugin that turns blank lines into <br>, but the <p> probably came in during the Blogger import. Now is a good time to clean up your entries; make sure there aren't any extra blank spaces at the beginning or end, and take out those extra <P> tags. While you're in there, you may want to consider removing <font> tags that aren't necessary. For instance, your titles (and pretty much all your text) are already being colored and sized by style.css, and if you change that file you'd like all of them to change together. If it's not different from the other text of the same type, you don't need to override it with a <font> tag. You can set them all at once, consistently, from style.css.

Whew. Big paragraph. But hopefully a good intro.

3) That's a nugget of HTML. You can use "View Source" in your favorite browser to copy it, if you like. Then go to your sidebar plugins and install a new HTML Nugget (you can have more than one!). Give it the "Offtopic" title and the Alito text. You can also include the Offtopic <ul> if you want. (There's a plugin that can follow Offtopic's RSS feed, if they have one, but we'll save that for another day.)

No chance of losing you in all the noise. I use "Show posts since last visit", just like Garvin, and we try to make sure everybody gets a response. If we haven't touched your post in 24 hours or so (not counting holidays), then we might have missed you somehow. Just add a reply, and you'll pop back up on our radars.

You've been making a lot of progress! You should be proud.