WP-Theme: Jiajia.

I like pictures. I like to take them with my Nikon D50, I like to share them on flickr, I like to show them off on my blog. Sadly, there seem to be very few elegant Wordpress themes that support a 'normal' blog as well as an image blog. Why? Because most themes try to get the content into a 400 pixel or less wide space. Sure, makes sense, as it is much better readable than a 600 pixel wide content area. But how about making it 500 pixels wide, exactly enough for the so-called 'Medium' resolution that flickr has to offer? And in return, making the content font a few pixel bigger? When it comes to blogging flickr images, you can go with 240 pixel wide or 500 pixel wide images, and 240 pixel were just too small for my taste. A workaround is to download the images you want to blog, resize them in Photoshop and host them yourself. But what do I pay flickr for? So I sat down, designed this theme, and since I release almost everything under Creative Commons, why not this Wordpress theme, too? There is another interesting thing about this theme that I didn't mention yet: The content comes first in the source code, then come the Google ads, then the menu and sidebar. Look at the code if you don't believe me! This way, the advertising bots from Google read my content first, then the menu and the sidebar. This way, the ads should be even more focused and related to my entries. Tricky, huh? Well, the technique I used was called on some other blog 'a weird method, that only print designers use'. I don't care, works fine for me! The magic is: 'position:absolute;' in the CSS file. With this attribute, you can position whatever you want wherever you want.

So go ahead, take a look at the messy CSS file, I am far from being a CSS guru, but I got it working quite easily. All you have to do is set the 'top' and 'left' and 'width' and 'height' attributes after commanding an absolute position, and that's it is. I overran the blog with 'browsershots' and it looked with every browser almost the same - good enough for me.

Enough talk. Get the zip file here, it's 1.1 megabytes big. It does not only contain all the necessary files to get it running with Wordpress, I also included my once again messy Photoshop file of the design, so you can open that and start changing around if you'd like. The 'weird' font I used for the sub-navigation at the top is called 'ChangChang' and can be downloaded for free.

Oh, here are some things you need to know: I coded the top menu 'hard' into the footer, so you better edit that one first and change the path to your url://yourdomain.com/whatever/templates/jiajia/images/ folder or you won't see any images there at the top. The headline is also 'big', as I don't like huge headlines that much, so if you're going to write long headlines, you might want to resize the font.

To be honest, you shouldn't see this theme as a 'upload-and-use-it' theme, it's more a 'something-to-start-with' theme, as you probably want to modify it heavily. So go ahead, launch Photoshop and start changing them colors.

Finally, I would like the following sites and / or entries for helping me with their useful stuff while creating this theme - they are a great resource for you, too, if you're going to change the design and layout: gotApi, Clean CSS, (The Only) Ten Things To Know About CSS, Improve Your Blog's Reach With These 20 Essential Web Utilities, The ultimate webdesign usability checklist, Font Tester, Creating a CSS layout from scratch, ChangChang font, 83 Beautiful Wordpress Themes You (Probably) Haven’t Seen, Top 10 Sites for Web Designers, 45 Fresh, Clean and Impressive Designs, Top 10 Most Beautiful Blog Designs, How Web 2.0 Logos are drawn (Photoshop), The Best Minimalist WordPress Themes, Comprehensive list of 980+ Free WordPress 1.5 and 2.0 Themes / Templates available for download, 10 Things You Should Know about WordPress 2.0, and finally read very carefully this one: 10 Things You Must Do When Changing WordPress Themes.

Any problems? Leave a comment.