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!

Before Akismet was added to WordPress as a default plugin, I manually moderated all comments. Those were the days when I was lucky to get a single comment for any post. After that Akismet took over and it worked fine for a while. I would still go through all the spam comments to check for false positives but at least Akismet ensured that comments from trusted sources (well, most of them anyway) appeared immediately without having to wait for my moderation.

Staring into the face of evil

Well, recently the increasing spam volume has made it impossible for me to check through them for valid comments. I’ve been getting nearly 1000 spam comments a day and I’m very, very certain that some of your comments have been eaten up by Akismet as false positives in the process.

So I have finally implemented an image verification system for commenting. I hate image verification systems, especially since half the time I can’t tell apart a capital “i” from a lower case “L”. But it’s the lesser of the many evils. An e-mail verification system is even more annoying, Akismet eats comments like Cookie Monster eats cookies and a forced registration policy will just turn lazy people like me off.

The good thing is that if you register an account and remain logged in, you won’t have to enter a security code when commenting. Hurray!

Oh well, hopefully this is enough to stop the spamage. Please tell me if you find any bugs with the verification system.

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.

Part II of DM’s domain-registering misadventure. Long story short: I decided to make it a picture-of-the-day thing.

After hours of WordPress hacking, I finally got it down to something close to what I imagined. Why I didn’t just use one of those ready-made POTD scripts is beyond me, but what’s done is done. There are still a lot of functionalities that I want to add, but it should be sufficient for now.

MoéFactor.com

Update: It’s dead now. That was fast. XD

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.

Stop reading here if you are not interested in technical fluff.

First of all, I have to confess that I was am totally clueless about PHP, so it took me a lot longer than necessary to write this simple script… ＿|ï¿£|O

Basically Amazon Affliate links allow you to link to individual items and adds thumbnail and item information. I noticed that these links are actually webpages nested in an iframe, which makes the actual URL of the page known. The code given looks something like this:

<iframe src="URL IS HERE" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0">

The URL itself is seriously long and it will break my layout if I typed it here. Clicky for a sample of one (btw, that’s KOTOKO’s new single).

As you can see from the iframe code and the URL, Amazon has already provided the user with some levels of customizability. The bg1=ffffff parameter in the URL allows you to set the background colour, lc1= for the link colour, bc1= for the border colour, etc. The most important parameter is asins=B000ANY1HA, which tells Amazon’s script which item you are trying to display, with “B000ANY1HA” being the ASIN (Amazon Serial Identification Number) of the item, which can be found on the page of all items listed on Amazon.

Well, being able to customize the colour is great, but it’s not enough. The links are all underlined and there’s this grey “プライバシーについて” (Privacy policy) text at the bottom which is pretty distracting. The default table and iframe size also cause a tiny white margin to overflow and makes the iframe scroll slightly when you turn the mousewheel. This annoys me greatly.

Since, unlike with Google Adsense which uses Javascript to cloak everything, I now have the URL of the actual page, I decided to reformat it using PHP to fit my layout. Originally, my intention was to do away with the iframe completely and using include() to insert the content directly. The benefit of this is that the CSS formatting will all be applied automatically as the whole thing because effectively part of this page. But I soon realized that the idea stinked because Amazon codes like drunkens and introducing the HTML codes in directly will make my site to contain invalid XHTML.

So I decided to file_get_contents() the thing into a variable, reformat it however I like, echo the result and finally put that into the iframe instead (making sure that there isn’t any overflow). Normally the script retrieves and formats an indexed page (specified using indexed=) instead of a live feed so as to speed things up. The other display method is to input a specific ASIN using the url= parameter, through which the script can display even non-indexed items by downloading the live feed. It cycles through the indexed links randomly by default if neither parameter is present. Source code is here. It’s hardly optimized in anyway, but it works.

The results for comparison: KOTOKO’s 421 -a will- in three versions.

• Original
• Formatted from live feed
• Formatted from indexed page

Pretty good considering I started this thing not knowing any PHP syntax at all… It took me damn long to find out that iconv() lets me convert Shift-JIS (used by 99% of Japanese sites) to UTF-8 (used by my blog).

Thanks to everyone from #php (irc.freenode.net) and #nipponsei (irc.rizon.net) for their help.

EDIT: Seems like my host is acting up again… I swear I’m moving somewhere else once my current term is over.

全ては月の朽ち果てた社から始まった・・・
あなたはそこにいまãã‹
自由の翼と正義の剣
君の姿は僕に似ている
瞳を閉じて入れたら、悲しみも見えないと
風のささやきが微笑みを誘うの
ずっと続いていく愛はある、絶対に
人生の宝物を探しにいこう
飛べない翼に意味はあるのでしょうか
彼女が待つ、その大気の下で
僕は僕のことが知りたい
僕のかわいい殿下
エッチなのはいけないと思いまãï¼
バカばっか
探し物は何でãã‹ï¼Ÿè¦‹ã¤ã‘にくいものなんでãã‹ï¼Ÿ
会いたい、会えない
ただ当たり前のことしか起こらないこの町で
空は青い、海は広い
God’s in His Heaven, all’s right with the world
蒼き清浄なる世界のために！
I thought what I’d do was, I’d pretend I was one of those deaf-mutes
The last love song on this little planet
宇å®ã¨åœ°ä¸Šã«ã²ãã•ã‹ã‚Œã‚‹æ‹äºº
夜空に星が瞬くように、溶けた心は離れない
神にも悪魔にもなれる男
願ったのは束の間の安らぎ、叶ったのは永遠という贖罪
フリクリ
水に浮かんだ卵
校庭のはずれにある伝説の樹の下で
心を込めて
其は古よりの定めの名。 死を司る 二人の処女
ぐるぐるまわる
私のかわいい人形

See if you can get all the references… I’ll be adding more lines when I think of them. Click for answers:

Kannadzuki no Miko
全ては月の朽ち果てた社から始まった・・・
It all started with the ruined shrine on the moon

Soukyuu no Fafner
あなたはそこにいまãã‹
anata wa soko ni imasu ka

Gundam SEED DESTINY
自由の翼と正義の剣
wings of freedom and blade of justice

Gundam SEED DESTINY
君の姿は僕に似ている
kimi wa boku ni niteiru

Gundam SEED DESTINY
瞳を閉じて入れたら、悲しみも見えないと
It’s a line from the song “Shinkai no Kodoku”

Da Capo Plus Situation
風のささやきが微笑みを誘うの
A line from “Soyokaze no Harmony”

Tomoyo After
ずっと続いていく愛はある、絶対に
Some love continue forever, I believe so

Tomoyo After
人生の宝物を探しにいこう
Let’s search for our treasures in life

Air
飛べない翼に意味はあるのでしょうか
Is there any use for wings that can no longer fly?

Air
彼女が待つ、その大気の下で
She is waiting, under the air

RahXephon
僕は僕のことが知りたい
The final line in the TV-size of “Hemisphere”

Seikai no Senki
僕のかわいい殿下
boku no kawaii denka

Mahoromatic
エッチなのはいけないと思いまãï¼
ecchi nano wa ikenai to omoimasu!

Nadesico
バカばっか
baka bakka

Kare Kano
探し物は何でãã‹ï¼Ÿè¦‹ã¤ã‘にくいものなんでãã‹ï¼Ÿ
A line from the ED “Yume no Naka e”

Yami to Boushi to Hon no Tabibito
会いたい、会えない
From the OP “Hitomi no Naka no Meikyuu”

FLCL
ただ当たり前のことしか起こらないこの町で
In this town where nothing extraordinary happens

Nothing particularly
空は青い、海は広い
The sky is blue, the sea is wide

Evangelion
God’s in His Heaven, all’s right with the world

Gundam SEED
蒼き清浄なる世界のために！
For a blue and pure world!

Ghost in the Shell: Stand Alone Complex
I thought what I’d do was, I’d pretend I was one of those deaf-mutes

SaiKano
The last love song on this little planet

Hoshi no Koe
宇å®ã¨åœ°ä¸Šã«ã²ãã•ã‹ã‚Œã‚‹æ‹äºº
Lovers seperated by space and land

Kimi ga Nozomu Eien
夜空に星が瞬くように、溶けた心は離れない
Haruka’s magic charm

Shuffle!
神にも悪魔にもなれる男
The guy who can become God or Devil

Tenshi no Inai 12gatsu
願ったのは束の間の安らぎ、叶ったのは永遠という贖罪
Game subtitle

FLCL
フリクリ
furi kuri

Maaya Sakamoto
水に浮かんだ卵
From the song “Ongaku”

Tokimeki Memorial
校庭のはずれにある伝説の樹の下で
Under the legendary tree at the back of the school

Someday’s Dreamer
心を込めて
With all my heart

Noir
其は古よりの定めの名。 死を司る 二人の処女
The names decided upon since ancient times. The two maidens who govern death

School Rumble
ぐるぐるまわる
guruguru mawaru

Junni Kokuki
私のかわいい人形
From Shoukei’s character song