Sleek Bluebird Theme

Yay! Yet another cool, new theme for one of best Twitter-clients available on the OS X platform: Bluebird. This time, the theme called Sleek is inspired by 2Smoke’s Silent Night Theme for Bowtie, what’s one of the best Bowtie themes available out there btw.

The theme itself is 100% CSS without any pictures besides the background-image. That one’s the same I’ve also already used within my HUD and HUD-Mini themes. I call this environmental-friendly recycling.

I made use of the cool features Safari already implements, like for example round corners or gradients. It’s just nice to see how much can be done using these features – at this point, the CSS hacks replaced any kind of image plus the whole work needed to make gradient-images in HTML/CSS scalable. A very cool time- and work-saver!

However, I hope you enjoy this new Bluebird theme!

Download sleek.bbtheme

Since I’ve already posted a quite descriptive post regarding the theme itself, I won’t beat around the bush now. For those who haven’t read the initial story, here you can review it. You can download the theme by clicking the link at the bottom of this page. Note, that the theme needs the theme-switcher-reloaded Plugin for WordPress to be up and running to work properly. Additional to that, you will need to make some changes to your actual theme, which allows the user to actually switch to the iPhone theme. These changes depend on what theme you are using, but in general you need to modify your theme’s header.php and include a code like this one:

<?php
if(empty($_COOKIE["iphonetheme" . COOKIEHASH]))
{
if (stristr($_SERVER['HTTP_USER_AGENT'], 'iPhone'))
{
echo "<div style=\"background-color: #F66; color: #fff; padding: 8px;\">";
echo "You seem to be browsing this site from your iPhone or iPod Touch.";
echo "Would you like to <a href=\"?wptheme=iphone\" title=\"\">change to the optimized site</a>?";
echo "</div>";
}
}
?>


The iPhone Theme itself already contains a button which provides you to switch back to the regular theme.

However, feel free to download, distribute, modify and have fun with my WordPress iPhone Theme – it’s released under GNU GPLv2!

Download: WordPress iPhone 0.1

The red block let's you choose.

I’ve been now using Prologue for quite a very long time – I guess longer than I’ve ever used one WordPress theme before – and I’m highly pleased of it. However, even that Prologue has a built-in iPhone/iPod Touch browser-detection which cuts away the sidebar and only keeps the important news-stream in focus, I haven’t been very satisfied by that. The font is still pretty small, nearly unreadable, the links are therefor pretty hard to hit, et cetera.

However, yesterday then Andi showed me some pretty nice little framework he just found, what actually doesn’t have anything to do with WordPress itself, but made me think of a very cool idea. The iWebKit-Framework is a small set of CSS and image files that concentrates on building a website in a way so that it looks just like an iPhone or iPod Touch Application. The whole thing’s appearance is pretty sexy, you can take a look at the downloads and get the framework plus some example HTML files for testing.

My optimized front-page.

So, I took a closer look on the iWebKit stuff and did some (again better, a lot of!) PHP WordPress theme hacking. I think I spent the whole night building that thing – but I also think that it was worth it, heh. And I guess, I’ve created a revolutionary and new WordPress theme aimed for the usage on iPhones and iPod Touches – the only problem I had left was: How to I get WordPress to use this theme only on the tiny Safari, but on nothing else? After some more PHP hacking, which included modifying my Prologue theme but not the actual WordPress (what’s the really cool thing within the whole story), I’ve found a way.

When you browse my WordPress now using your iPhone, you should be getting a red message right on top of the site, which tells you that it has detected the tiny Safari and suggests you to use the iPhone optimized theme. If you confirm by clicking the first link, the whole site’s design should get to look just like on the pictures I’ve inserted here.

My contact information - optimized.

I will extend the theme some more, maybe by building in JavaScript effects or other Eye-Candy, to make it fit even better into the iPhones Look & Feel. I was also thinking of some Cover-Flow’ish effect for my Gallery (which at the moment just links to my Picasa-Site, but thanks to the great API provided by Google it shouldn’t be too hard to implement that right into the page).

Maybe, after some more testing I’ll be able to provide it for download, including a whole documentation of how to make it work. Until then, I hope you enjoy browsing my Blog, especially over the iPhone or your iPod Touch. Please feel free to write me your impressions, feedback and also suggestions for improvement by commenting here or writing me an e-mail. So far …

Have fun!