Birth and death of a steampunk layout


Proposed logo

The original layout for the reboot of my site was going to use a “steampunk”-like theme that I was developing in mockup for this site, but I kept having trouble figuring out how to represent the main section and the part with the entries and sidebar(s) would go. It was completely coded from scratch and used a grid based system from BlueTrip CSS Grid. Then later I tinkered with Blueprint CSS, and even the Adobe AIR application Boks for layout. The idea was scrapped completely last year when my site suffered from a minor eval(base64_decode()… crack and I put the site in maintenance mode for a bit.

From what I was working with, the mid section was still a blur to me on how it should look and it’s been so long since I’ve peeked at the code behind WordPress. Sure I’ve been sandbox testing out the various WP versions that came out since v2.04 but nothing has been put live until now. This has been the main reason why it has taken me so long to redo my site layout–from scratch. That and the usual where you code and code or edit images until you mess everything up. Then clean things up and mess it up again in a seemingly endless cycle that produces absolutely nothing and your creativity spark and interest for the original design wains.

I even had a little logo going that had flourishes like steam above the “7” in the “72”, but it was done in Paint Shop Pro 5.01 (an ancient version, I know). In order to really have a logo that is expandable it should be created as a .svg with layers and in a larger scale than what I need. Easier done in the GIMP or Inkscape. That way the logo can be adjusted to what ever smaller size I need without the problems with transparency.

2009 mockup header #2

The next-to-final mockup of the header graphic.

Midsection graphic

Midsection mockup for Categories and Tags.

Must really learn to use GIMP and Inkscape better and get rid of my Paint Shop Pro install. The old PSP 5.01 doesn’t handle .png/transparency images to my liking. My current new logo was created in Inkscape and then all layers scaled down and saved as a single layer .png.

New mockup theme (Reincarnation of a site):
I decided to just hunker down and settle with modifying the Sandbox theme from Besides my last theme was an altered Sandbox as well. This will be much more productive in the long run since I don’t have to spend so much time learning and re-learning the tags and loops or figuring out how things should be displayed. Sure there is a lot of pride in creating your own theme from scratch but if you keep getting brain farts and lulls of productivity it’s time to embrace fate, settle and admit your losses and failures and gear your goals into smaller sized chunks so you can move on to other things.

As for the current incarnation of the site:
The old design was based on the Chinese Year of the Rat 鼠 (shú, lo shu…). This was replaced with a Japanese theme and 朱 (しゅ, shiyu, shu) which is Japanese for vermilion, cinnabar, scarlet, red, bloody color. Plus…red/crimson is my favorite color. So it’s a minimalist theme with a touch of red.

Old theme and new theme

Last theme and new theme; above fold

Now that my site reboot is out of the way here’s to a more productive year.