New (old) Design

The Fiancée was out of town last night, so since I had no one to watch TV with, I created a new design for this site. It’s something that I’d wanted to do for a while now, since I’m not really one for using the “default design.” Don’t get me wrong, Kubrick is a great looking layout, it just looks like so many other sites out there that I was starting to feel like a clone.

What’s “old” about it?

For a few years now, whenever I have to whip up a test page or some other thing, I tend to use a particular simple style that is super-quick to cast in CSS and very easy to look at. Little bit of margin, some borders, a background on the HTML and white in the BODY, and more-or-less the standard web colors that have been around since Netscape 1.0.

However, my web log has never really “fit” with these pages, making my site seem like a conglomeration of pieces when in fact it is the united work of one man. So, rather than re-do all those simple pages with overly fancy-schmancy layouts that don’t make sense for that purpose, I toned down the style on my blog to match them.

So what’s “new”?

There’s a few frills that I’ve been meaning to incorporate for a while, and I threw them into this new skin.

  1. Tags are now fully incorporated, and Categories have gone the way of the dodo. Category URIs will still work, but from here on out, I’m no longer advertising them.

    The archives page now also contains a “tag archive” section in addition to the ubiquitous “tag cloud.”

  2. I beefed up the links page to show the description and notes for each link.

  3. The background is #369 (known as “elligence blue” around the office, on account of our software’s logo) instead of #ccc like my “stand-alone” pages. There’s also a sidebar and a few internal gray borders to make the separation clearer. I started out making an exact copy, but found that a little bit of differentiation is a good thing in this case.

  4. The upper-right corner displays a random image on each page load. This was a really simple thing to hack into the skin, and I’ve wanted to do so for a while, but just never got around to it. In my header.php file, I put a class on the H1 like this:

    <h1 class="p<?php echo rand(1,17) ?>">

    Then, in style.css, I have this:

    #header h1.p1 a { background-image:url(images/toppic1.jpg) }
    #header h1.p2 a { background-image:url(images/toppic2.jpg) }
    #header h1.p3 a { background-image:url(images/toppic3.jpg) }
    #header h1.p4 a { background-image:url(images/toppic4.jpg) }
    #header h1.p5 a { background-image:url(images/toppic5.jpg) }
    #header h1.p6 a { background-image:url(images/toppic6.jpg) }
    #header h1.p7 a { background-image:url(images/toppic7.jpg) }
    #header h1.p8 a { background-image:url(images/toppic8.jpg) }
    #header h1.p9 a { background-image:url(images/toppic9.jpg) }
    #header h1.p10 a { background-image:url(images/toppic10.jpg) }
    #header h1.p11 a { background-image:url(images/toppic11.jpg) }
    #header h1.p12 a { background-image:url(images/toppic12.jpg) }
    #header h1.p13 a { background-image:url(images/toppic13.jpg) }
    #header h1.p14 a { background-image:url(images/toppic14.jpg) }
    #header h1.p15 a { background-image:url(images/toppic15.jpg) }
    #header h1.p16 a { background-image:url(images/toppic16.jpg) }
    #header h1.p17 a { background-image:url(images/toppic17.jpg) }

    Then I just rustled up 17 thumbnails, and that’s all there was to it!

ToDo

  1. I’d like to add some sort of expanding/collapsing/re-ordering client-side script for the sidebar. Just something to be able to close a section or move it up or down with as little code as possible.

  2. There’s a few spots where a heading is just a pixel or two off, or where a slightly different color might be better. I’m sure I’ll do some tweaking, but I am pretty pleased with how it came out.

What do you think? Comments are much appreciated.

One Response to “New (old) Design”

  1. On October 14th, 2005 at 19:37:22, Schlueterica Said:

    Expandolicious Sidebar

    You may notice a new functionality in my sidebar. Using a sprinkling of JavaScript, some choice CSS, and a bit of XHTML cleanup, you can now click on the headings in the sidebar to hide or show any of the sections.
    Since 72% of this site’s tr…

Leave a Reply

Comments are moderated like crazy using a variety of plugins. There is a very high likelihood that your comment won't show up right away, especially if you have never commented here before, but it was not deleted.

Please be patient, and do not post your comment more than once. It will show up once it is approved.

You must be logged in to post a comment.