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.
