NOTE: This entry was created in 2005. I'm not using skins on this site anymore, so you can select a different skin, but the code below should work, although a method may be provided to do this with a module now.

This past year I've learned how to do a few things a little better as a site developer. The work I did for Winning Connections and Management Innovation Group sites led me to come up with better ways to architect and improve my markup and style sheet strategy. Working closely with the MIG visual designer also allowed me to come up with better ways for converting a grid-based design to CSS (a topic I'd like to write a lengthier article on later). So I wanted to incorporate some of that learning into this site's design and code. Here's the first set of notes on how I'm starting to evolve this site.

Visual design

The visual design incorporates some of the design elements I used in previous skins a year or two ago. If you've followed my skinning explorations, you might remember those. I like simple, minimal and spare design, but I really react to colors, especially warm ones. I've been looking at the white pages on this weblog every day for the last year and was really missing having warm colors on my screen. So they're back, but, guess what, you can also select a white background too if you're not into the colors.

Here's a comparison of the new skin with some of the site's previous designs:

All were pretty minimal, but the design before this (bottom left in the picture above) was the most spare. I really liked the home page and think that design would have lasted a long time. But I wanted to get a few messages up on the home page -- mainly that I do freelance work now -- so you can see in the screenshots what a big change has occurred in the use of white space. But that design was really a splash page, so I'm comfortable giving up a little on having that quiet page for a little purposefulness.

The version you see live on the site right now is called skin 2. Skin 1 is the white one in the bottom right corner of the picture above. It's the first skin I've had with a background color in a long time. I'm not sure if I'll keep that as the default or use the white one yet. Right now I'm liking the orange background so I'm going to leave that up for a few days and consider setting skin 1 (white background) as the default.

Drupal blocks

I completed the first part of this redesign, creating the new theme files which use blocks more effectively to generate local navigation where necessary. Previously in the non-blog sections, I didn't have any local navigation in areas that needed it, so the back button or the global nav links were the only way to jump back up to a parent. I'm using a PHP snippet in my blocks with a simple array to put out the local nav. I could have done some searching for taxonomy terms to generate that bit, but I wanted a bit more control of the display. The script also searches the URI and if it matches the location in the array, makes the current local nav link appear selected (bold and black). I wish there were an easier way to do that on pages out of the box. I like how WordPress' page model uses parent-child relationships and generates this tree for you.

Now that I know how to use Drupal blocks a little more effectively, I'm really impressed with how much more I can do. I had previously been using the Side Content module (another excellent module, by the way) to output per-page sidebars, but using blocks for entire sections is much more powerful. I'm digging that.

Here's the code I used to generate the local nav in the Services section:

The Publications and Weblog sections also use the Similar Entries module to show "More like this..." type related nodes. I also like the Side Content module, so I have that installed to add sidebar blocks per-node, but I'm not using them anywhere yet.

Drupal front_page.module

I also have the front_page.module working for me. I had actually been using a script I created with adodb to generate the home page because front_page hadn't been created at the time. front_page is another indispensable module if you don't want a cookie-cutter blog, which this site is not. This is one of the reasons Drupal and WordPress are so well-suited as content management systems. The customization options are very good if you know what modules to install.

The PHP Snippets section of the Drupal docs has some great tips for selecting and displaying lists of nodes. Here's the code I used for putting out "New on this site" part of the home page.

I learned how to put links from my aggregator into the front page by reading this page on drupal.org: Placing the contents of a block in any location. Here's the PHP snippet I used for the "Elsewhere" content on the home page. This basically tells Drupal to output the aggregator block for category # 6.

Skins are back!

I've also updated my skinning script to work even though Drupal is caching pages. I did a little workaround by forcing a CSS file to be generated using PHP. That way I can check the cookie to see what the user has set for their skin and use that value in the CSS file rather than in the cached HTML pages Drupal generates.

To force the Apache server to execute a CSS file as PHP, I created an .htaccess file in the directory containing the theme.css file. The .htaccess file contained this text:

The skinning script works by setting a cookie on your browser with a numeric value. Right now there are only two values, 1 and 2. The theme.css file checks to see what the cookie value is and uses that number to reference the appropriate CSS skin. Here's the PHP code for theme.css:

(Thanks to Ed Costello suggesting putting in security measures check in the script above.)

Then you create your skin selecting page, which lists the available skins and has the function for setting the cookie. I won't go into that here, but I use a script I created for doing this that uses some of the PHP from my old skinning script.

More to do

Of course, the remaining part will be to do the minor realignment of the content areas, e.g. the portfolio is moved under the heading "Services" now. Since I've started doing a little freelance in the past year, it seemed like time to make this site a bit more service oriented so I can market what I do. Along with that will be the long needed update of the Lucent Technologies section of my portfolio, which hasn't been updated in 4 years. That will be the biggest part.

Still working on a style sheet for Mac IE 5. Sigh. More to come.