Lair of the Wolf Dragon

End of Summer Redesign

Summer is coming to a close and I for one am happy for it. I realize that I’m in the minority here so for everyone else, I say: hey, there’s always next year.

You may remember that over a year and a half ago, I created my own WordPress theme for this site called “Lair Version Umpteen”. It looked something like this:

Because I cannot resist tweaking and fixing things, I’ve made edits to it over that 1 1/2 year span until it looked like this:

The general layout is basically the same, I just moved things around styled them differently. The point being, I would like to say that I hadn’t touched the theme for a long time but truthfully, I didn’t.

For this past month or so at work, I’ve been working almost full time with a new WordPress installation, creating a number of themes. You would think that this would make me sick of working it. But noooo, it ends up inspiring me instead. So what free time I’ve had over the past 2 weeks had been spent designing and coding a completely new theme from the bottom up. Besides some bits of code and a few images that I borrowed from Lair Umpteen, the templates and CSS are all new.

My focus for this theme was different. I wanted to move forward, with a modern look and some new tricks. As such, I wanted to code it with the latest languages: HTML5 and CSS3. Which is how the theme got its name, Lair 53.

Previously I had been making fixed width layouts. Responsive design is the way of the future though. More and more people are surfing the web with their tablets or smartphones, myself included. They come in all shapes and sizes so the best thing you can do is make it fit for all shapes and sizes. If you resize your browser window, you can see the design shrink or grow accordingly to accommodate different screen widths.

I also gave myself a personal objective for the design: use as few images as possible, as much CSS as possible. As a result, the date ribbon, the folded corner on the posts, the 3D post titles, the sidebar headers, the tags, and the buttons are just a few things that are made entirely of CSS. It involved a lot of research and more than a few hair-pulling problems, but it was worth it in the end. The page loads faster, it looks great, and I learned a lot from the whole experience.

If I had to pick one feature I love, it would be the header image behind the Lair logo. It uses the Custom Header feature which was introduced back in 2007. What I did not realize until recently is that you can also use it to add a bunch of header images and randomize which one will be displayed. In this case, I’m using it to showcase some of my favorite screenshots and concept art from video games that I’ve played. There’s 11 different images right now but I plan to add more as I find them. It makes for one interesting and eye-catching header, don’t you think?

Due to all of these cool new features, it looks great in modern browsers, specifically Firefox, Chrome, and IE10+. IE9 loses a few neat effects but looks mostly the same. IE8 looks passable but not the greatest. IE7 and below…I can’t be held responsible for what this looks like in browsers 7 years old or older. Seriously, that’s ancient in internet time.

If you encounter anything funky in any modern browser or mobile device, please contact me or leave a comment to let me know. I only have a desktop and an Android phone to test it on so what I can check is very limited. And it’s always good for me to learn the different quirks on different devices. Also, if you have any questions or comments, please leave those below too.

I’m sure that I’ll be making tweaks to Lair 53 in the days and weeks to come. After all, I’m just beginning my 2-week long summer/autumn vaction. But regardless, I hope you enjoy the Lair of the Wolf Dragon’s newest design!