New blog look and feel New blog look and feel

My blog has a new look, and, more importantly, feel to it. Why? And why blog about it?

A week or so ago, Steve Carlson responded to a blog entry of mine on my building my website by hand. He suggested ":hover" CSS pseudoclass to do some of the dynamic stuff that I was doing there via Javascript. Being a programmer at heart, my natural tendancy is use Javascript first, before I would use CSS to solve a web page problem.

But then, I noticed that I had been blogging a lot (for me) this summer, and my blog was starting to get a bit unwieldy to get around in. The problem is that I use Blogger, and it is really designed for someone who doesn't blog a lot, or, somewhat less well, someone who pumps out a lot of very short entries (see Instapundit.com). It doesn't do as well for a lot of long posts because you have to scroll down through them to find anything. Worse, I was extracting some of my political posts recently from my archives, and the situation was even worse there.

There are some "kludges" available from Blogger for turning on and off the display of blog entries. One of them allows you to hide part of your blog entries, but does so at the price of including HTML in your blog entries. The other just turnes on and off the display of entries.

Neither was very appealing to me. I tried the former, but settled on the latter for my Sony DRM blog last December.

Then, as I mulled it over, I wondered whether I could marry Cascading Style Sheets (CSS) with with Javascript to do a better job, and I think that I have.

Thye result is that I utilize four display modes for blog posts. First, there is the normal "Full" mode, where the entire blog entry is displayed. Then, there is a "Chopped" mode where only the first three inches of it are displayed. Third, is a "Footer" mode, where the title, posting, and commenting information is displayed, and, finally, a "None" mode where the only thing displayed is a single line to change modes. The initial mode for displaying a post is dependant upon the circumstances. If displayed as part of the entire active blog, entries are initially displayed in "Chopped" mode. But if you click on the comments or link via a URL to an entry, the entire entry is initially displayed. And, finally, entries are initially displayed in "None" mode when displayed as part of the archives. The result is that when scrolling down the active blog, a sample of each blog entry is displayed. The entire entry is displayed when you are looking at just it. And only the titles plus the line to switch modes are displayed in the archives.

I took the idea from the "hide/show" blogger hack that I used last December as the basis for this. I provide a set of switches at the bottom of each entry to switch modes. Initially, before I implimented the "Footer" mode, the three choices fairly well filled one line. But one of the choices as always a "NOOP" (computerese for "No Operation"). The answer was to not display the current mode as a selection possibility, but rather, to just display the other three. Thus, you know what mode you are in for a given blog entry because of what mode is not displayed on the mode selection line.

Interestingly, I was able to do this almost entirely through CSS. My Blogger template has less Javascript than is utilized by the "hide/show" Blogger "kludge" that I used last year. Rather, all the Javascript does is to set a global class for a HTML Division ("DIV") that includes all of the HTML for each entry in my Blogger template. These classes then interact with the CSS to do all of the fancy stuff. And, thanks to the tip by Steve Carlson, I ran into the CSS "chop" and "max-height" attributes that I use in "Chopped" mode when I was investigating :hover.