New Layout

I know, I updated the site design less than a year ago. I decided I could do better than a fixed-width design built for 800 by 600 resolution displays.

The new layout, also my first WordPress theme (yay), is a bit more flexible. By default, it is full-browser-width, with reasonable space allotted to the right sidebar and the main content areas. For modern browsers that support max-width CSS, the design will stop “growing” at 1,000 pixels, just short of full-width on a 1024×768 resolution. The content and sidebar columns have, in addition to their own (possibly redundant) max-widths, reasonable min-widths. This is to prevent the content from being squashed beyond recognition should someone with an abnormally small browser come along. In this case, the sidebar will drop below the content area when the point-of-no-more-shrinkage is reached.

There’s a whopping 6.3KB worth of images to load per page. Unfortunately, they’re almost all translucent gradients, so IE6 users will receive *html hacks in the CSS to clear most of them, to avoid unsightly grey blocks that would otherwise obscure text. The color scheme was heavily based on Cool Grays Lavender by julievonderropp on Kuler.

In addition to the right-hand sidebar, I put two separate “widget areas” in the footer, one above the other. The bottom section is primarily for displaying the archives links — there are a lot of them (one for each month the site’s been up), and they don’t fit very nicely in vertical sidebars. The top section is simply another sidebar, designed to fit up to three widgets.

A decent amount of work went into the comments section, along with some help and ideas from a comments template posted at ChristianMontoya.com. Even/odd comments are striped for easy differentiation. The post’s author’s name is retrieved via an extra database query, and comments made by that author are given an additional class name, used to attach another gradient image to the background. Also, comments and pingbacks are listed separately, comments first, along with their respective counts. This change is extended to the front and search pages, where another extra query is executed for each post to obtain the number of actual comments for that post. A small amount of extra overhead, but it might be worth it for the extra accuracy. Unfortunately, I haven’t yet thought of a succinct way of displaying the total number of responses (comments plus pingbacks).

Concerning the actual theme construction, at the outset, I really had no clue about making WordPress themes, other than that it involved PHP, HTML, CSS, and some MySQL. The design itself started as an HTML file on my local harddrive, just an idea I started tweaking around. Fortunately, in my research I ran across a full-fledged WordPress theme tutorial on WPDesigner.com; it’s really a great tutorial for beginners to the whole WordPress skinning idea. For what the tutorial lacked, the WordPress Codex was a great reference, along with a couple of google searches for some unclear topics. I did have to consult PHP.net a couple of times, but that’s normal for any PHP project. Overall, though, it wasn’t too difficult, just a matter of putting the right pieces in the right places :) .

So, there you have it. My first post in almost a month (sorry :( ) is a self-centered look-at-me post. Criticisms, comments, and congratulations on the design are welcome. As are lectures about what coding, design, or WordPress standards I may have broken :) . In other words, I look forward to your feedback.

Comments are closed.