Emptiness Header Images

First of all, my apology to Tony Lauria for making him wait for a long time and for not being able to upload these images earlier as promised. Life has been exceptionally busy, but I’ll save the details for another blog post.

It was a pleasant surprise for me to find out that Tony and some other Emptiness Theme users like to the header images from previous versions of the theme and requested their availability for download. Thanks so much for using the theme.

So here they are (in chronological order)…

Light greenish-yellowish leaves on tree branches in front of my home in Carnegie. This picture was used as the default header image from v0.1 to v0.9 of the theme.

A city-loop train with Crown complex in the background. This picture was taken from the Flinders St studio apartment where I lived back in 2005. I used the picture as a custom header image demonstration on a cleaner way to customise WordPress Theme styles using MyCSS Plugin.

Stones and water, which I thought represent the theme of emptiness really really well. The picture was taken at Korakuen Garden during my trip to Japan this year, and was used in v1.0 .

Weird grassy plants at Shinjuku Garden. In retrospective, I found the random pattern of the plants to be quite interesting. This picture was used in v1.1 .

Buildings behind the Shibuya Crossing at night (original 1024×768 image). I used this picture to test the custom image header cropping feature introduced in v1.1 .

A Cleaner Way To Customise WordPress Theme Styles

The most frequently asked question from Emptiness Theme users was about customising the styles (font, color, width, etc) and the header image of the theme, and I usually answered by giving them some pointers to which file to modify and where. The problem was that most WordPress users  would make the modifications directly against the theme files.

The downside of such approach is that the custom code would end up buried within the theme, which users won’t remember few months down the line. And this will then discourage them from upgrading the theme in order to avoid overwriting the customisations accidentally.

A cleaner approach to customise a theme is by isolating the custom code away from the original theme code. Having said that, I would like to encourage my theme users to start practicing this approach. Here’s what you need to do:

1. Install MyCSS Plugin, read the documentation on how to use the plugin. Note: you might encounter an error complaining about ‘my.css file not found’, to fix this, you need to create my.css file under mycss plugin directory and give it a proper permission (644 will do).
2. When you need to customise a style, do it on my.css file. CSS code in this file will take precedence over the theme’s own style.css .

For example, to change the font-family of the sidebar headings, I added these lines to my.css file:

h3 {
    font-family: helvetica, sans-serif;
}

That’s it. I didn’t modify any of the theme code. The catch here is of course we have to be careful not to accidentally delete my.css file.

I don’t know why WordPress doesn’t have this custom CSS feature as part of vanilla WordPress installation. I think this would be very useful when they finally provide easy theme upgrade just like the way upgrading plugins is done.

As for MyCSS Plugin itself, it would be nice if it allows me to customise the location of my.css file so I can put it external to the plugin directory. And how about storing the content of my.css in the database so it can be persisted between plugin versions? Another nice improvement would be to provide the ability to upload files, handy for custom images.

Testing Reflection Plugin

I spent several train rides this week putting together Reflection Plugin for WordPress. This plugin applies reflection effect to images on a blog. The reflection effect is done on the client side using the excellent Raphael JavaScript library. You can use normal image on your posts as usual, and you’ll get the reflection effect by simply adding ‘reflection’ to the class value.

Here are some examples of the effect…

Wide movie poster:

Album covers, aligned, with wrapping text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut pede ut mauris varius ultricies. In a dolor non risus dapibus faucibus. Etiam tristique pellentesque ligula. Cras tempus nunc vel turpis. Vivamus congue. Nullam hendrerit tincidunt metus. Pellentesque bibendum dapibus felis. Suspendisse risus magna, placerat id, malesuada eget, pellentesque quis, felis. Sed dolor lectus, vehicula rutrum, venenatis et, fringilla vel, tellus. Curabitur mi. Donec ligula pede, vulputate vitae, bibendum ac, pharetra in, elit. Pellentesque et mauris ut pede mattis commodo. Mauris massa odio, egestas eget, luctus id, suscipit sit amet, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ac sem. Cras nec dolor a ipsum consectetur lobortis. In blandit erat. Fusce mollis ultrices ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut pede ut mauris varius ultricies. In a dolor non risus dapibus faucibus. Etiam tristique pellentesque ligula. Cras tempus nunc vel turpis. Vivamus congue. Nullam hendrerit tincidunt metus. Pellentesque bibendum dapibus felis. Suspendisse risus magna, placerat id, malesuada eget, pellentesque quis, felis. Sed dolor lectus, vehicula rutrum, venenatis et, fringilla vel, tellus. Curabitur mi. Donec ligula pede, vulputate vitae, bibendum ac, pharetra in, elit. Pellentesque et mauris ut pede mattis commodo. Mauris massa odio, egestas eget, luctus id, suscipit sit amet, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ac sem. Cras nec dolor a ipsum consectetur lobortis. In blandit erat. Fusce mollis ultrices ipsum.

Obligatory browser screenshot:

For more information, please have a look at Reflection Plugin web page.

Update (07/12/2008): I’m starting to think that this plugin can actually be an image effect plugin. Not only reflection, something like rounded corner effect can easily be done with Raphael, along with many other effects. The underlying work is basically to apply client side image effect by using class attribute values as meta data (hmm, shouldn’t future version of CSS support this?). Oh well, let’s see how Reflection Plugin goes.