It’s my first attempt at building my own WordPress theme instead of modifying the default one. There are still a lot of things that are incomplete (mainly plugin integrations) so I’m calling it “beta” for now. Why “version three” you ask? Well I just felt like it. Please don’t ask me to explain which layouts were version two and one…

Nitty gritties after the break.

Header

The first thing you should notice is the ginormous banner at the top of every page, featuring everyone’s favourite singing software’s 2D avatar, Hatsune Miku. This was a last minute decision during the initial planning stages and the layout itself is not actually inspired by her in any way. In fact, this is what the original draft in Photoshop looked like:

But after trying out a few characters, I decided that Miku’s colour scheme is the best match. Purely coincidental. Or maybe it’s one of those subconscious thing. I may eventually add more banners in a random rotation like my old layout, but that’s low priority for now.

Overview

The primary colours used in the theme are #a00, #555, #eee and #ccc. (I love colours that can be shortened to three-digit hexadecimal in CSS.) The RSS feed icon is a 24×24 greyscale PNG taken from Feed Icons’ devkit and overlayed with 100% #a00.

One of the most important decisions when designing a website is to choose between a fixed-width layout and a fluid layout. My previous layouts were all fixed to 780px wide so as to accommodate the smallest resolution that people still use, 800×600. It’s quite a commonly-used width because the default WordPress theme uses it.

The nice thing about fluid layouts is that they work on very tiny resolutions without creating horizontal scrolls. Moetron is an example of a 100% fluid layout. However, lines become very long and ugly when viewed on a larger-than-average resolution, such as 1920×1200 on 24″ widescreen. Paragraphs of text turn into single lines that stretch from one end of the screen to the other.

Most professional blogs are turning to either fixed layouts optimized for 1024 (e.g. Joystiq) or a mixture of fluid and fixed layouts (e.g. Engadget, ANN). The problem with the former is that on smaller resolutions (and windowed browsing), there will be horizontal scrolling involved. The latter is harder to design for and cross-browser implementation makes it a huge pain in the ass.

Same page viewed at 800px wide

I chose to go with a semi-compromise. I don’t like my text components changing width, so they are fixed-width. But the navigation bars on the right (or “meta blocks” as I dub them) will drop down to the bottom when viewed in 800×600 so that horizontal scrolling is avoided. I call it a semi-compromise because it all goes haywire if you use some non-standard window size that is between 800 and 1024. There is also some margin issues when moving the meta blocks down.

The design has been tested on the latest versions of Firefox, Opera and IE7. It looks the ugliest on IE7 due to font issues and probably worse on older IE versions due to the use of transparent PNG.

Thumbnails

Every post has at least two thumbnails that are automatically generated. New entries will have three. A 144×144 square thumbnail is for use within the meta blocks, a 180×120 rectangular thumbnail is used in archive mode and a 250×140 resized image is used for the “Previous Entry” section on the main page.

Single category view

Thumbnail generation and caching are all handled by Alakhnor’s Post-thumb revisited plugin. Page-loading is slow for the first time when the thumbnails are generated but subsequent loadings use cached image files.

Sprite Navigation

Whoever first thought of making sprite navigation with CSS is a genius. Basically the mouse-over effect that you see on the right uses no Javascript, no image maps and consists of only one single image file:

Navigation sprite

Using only CSS background repositioning and a:hover, the concept is just brilliant. Not only does the effect work instantly without having to cache additional images, but it also works without relying on Javascript, which many people block with NoScript these days. I found the tutorial here.

Gravatar

You will also notice that the post comments now support Gravatar (Globally Recognized Avatars). If you register an account on gravatar.com and post a comment with the same e-mail address, your associated gravatar will be displayed below. The rest of you get a cool-looking あ faded to grey! Awesome.

Gravatar

Final Notes

I don’t think the site is XHTML validated yet because I coded the layout on a local apache server and haven’t had the chance to submit it. A lot of areas are also not extensively tested, such as commenting and error handling. The comment fields in particular were a rushed job. If you notice anything wrong, please post here along with the browser used. Please note that I am not supporting any version of IE older than 7.

So anyway, what do you think?

P.S. I am aware that some posts have issues with the 144×144 thumbnail. I am in the process of fixing it.

Update: The site is note XHTML 1.0 Strict validated. Do inform me if you find any pages that aren’t.

Some administrative matters to take care of:

• I tried to ensure that everything was working before I swapped the nameserver. However, some scripts and dynamic content depend on the domain/subdomains propagating correctly to work. Therefore parts of the site may remain non-functional to you for now. Try ipconfig /flushdns and restarting your browser to see if it helps.
• Due to some difference in MIME type configuration between DreamHost and HostGator, the old RSS feeds for my lyrics translations no longer work. For the three of you out there who actually use it, the new feed is here. (Japanese feeds here).
• I am actually designing a completely new layout. The new “Random entries” thumbnails you see on the main page is a by-product of that. I am about 30% done. This marks the first time that I’m building a WordPress theme from the foundation up instead of modifying the default Kubrick theme…
• For some inexplicable reason, wp-cache is not working. Trying to fix it, but I have no idea what’s the cause. It’s low priority for now.

Update: The server is backup! And wp-cache is working now too! Hurray!

Because the whole database and PHP interface for the lyrics section were thrown together haphazardly by me some time ago, I now have absolutely zero idea what all the original code does. So instead of modifying existing functions, the PHP backend for the RSS feed is almost completely new and full of redundant code. Yay!

On another note, the latest song added was Inori～You Raise Me Up by Lena Park. I have yet to translate the song, but the romaji is done. Translation is done.

Forget it. 400px wide content div it is. GAO!

I also tweaked the layout here and there and added a tagging system. Now all I need to do is to blog more often… :P

BTW the RSS feed from Danny is part of his “Featured Feeds” initiative.

www.moefactor.com

Some ideas so far:

• moé picture of the day (NSFW galore?)
• peer-ranked Digg-style anime news
• user-submitted anime news but with moderators instead of peer ranking
• translation-related stuff
• a blog in Japanese (できるかな・・・)
• something so crazy, cool and revolutionary that I haven’t thought of it yet
• leave the domain to mould because I’m too lazy to actually implement anything

So what’dya think? That last option sounds pretty good to me right now…

Testing. テスト。

It’s alive! Yay! This blog is now hosted at Dreamhost. :3 I maxed out my bandwidth on my old host, so I thought it was a good chance to switch. I’m pretty happy with Dreamhost so far. It’s faster and I get shell access (IRC yay!) now. Not to mention my month bandwidth increased by a few dozen folds…

Okay, so it’s not exactly a completely new layout. It’s based on the default WP theme Kubrick. Also, it contains not a single line of code from K2, even though the colour and navigation bar might suggest otherwise… Purely coincidental.

Some new features include this totally cool “Continue Reading” button:

Okay, maybe it’s not so cool.

The other cool thing is the RSS feed button now conveniently located at the top right corner! Okay, maybe that’s not so cool either. ＿|ï¿£|O But dammit it took me a bit to get it right.

How about this: the comment text boxes now change colour when you select them!… No? :(

Well, how about the numbered comments? That’s gotta be at least A LITTLE cool… D:

…Oh fuck. I just wasted my time making a useless layout when I have a Chinese paper tomorrow. Damn you procrastination!

So anyway, tell me what you think about the new layout. I have to go do some last minute midnight oil-burning now.

P.S. Haruhi is cool.

I changed the default loading.gif of Lightbox (as you may have noticed in the post below) and modified the CSS file as best as I could to fit the new dimensions and it seems to work fine in Firefox. Click here for a demo.

However, on IE everything falls apart…

For some reason, the image sticks out of the box on IE even though the same box size has no problems on Firefox. Gah. I tried everything I could think of with the margins and positioning but it’s still no good. So I gave up.

Here are the parts I modified from lightbox.css, commented lines are the original values:

#outerImageContainer{
position: relative;
background-color: #fff;
width: 300px;
height: 375px;
//height: 250px;
//width: 250px;
margin: 0 auto;
}

#loading{
position: absolute;
top: 10%;
//top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

I really have no idea what is wrong with Internet Explorer. Hopefully someone out there does… In the meantime, please get Firefox if you want to see an animated gif of a maid balancing a plate the way it was meant to be seen!

Firefox-ko compels you!

BTW, I added a new php script to the website too… See if you notice what it does. (Hint: it concerns the banner)

The script changes the heading text when the banner is Haruhi.

Instead, I’ve been putting my time to good non-academic use by building an entire PHP script from scratch in order to sort and display a small handful of songs that I have transliterated and translated over the past three years. After a total of nearly 16 grueling hours of picking up PHP almost from scratch, learning how to use MySQL in PHP, coding and debugging, I have finally achieved perfection! Or close enough that I can’t be bothered to do anything about it anymore.

URL: http://lyrics.darkmirage.com

You can download a copy of the script to laugh at my horrible programming skills here. I’ve included an incoherent readme file to “explain” some stuff.

P.S. I didn’t realize I translated this many GSD lyrics…