Customising the Buuf2 Winterboard Theme

If you’re reading this, you’re probably already using Buuf2, the most distinctive, characterful theme available for the iPhone. Buuf2 is based on the icon set created by mattahan (see his deviantart page here), and was formatted for the iPhone by axero (see the modmyi forum thread here).

The purpose of this guide is to assist you in customising Buuf2 to your liking. Since the release of firmware 2.0 and the AppStore, the number of apps available for the iPhone has exploded. Trying to keep pace with the number of icons required would be a Herculean task; thankfully, modmyi users nmilsaps and golum have stepped up to fulfil many icon requests on the official thread, and axero incorporates their efforts into his updates when he gets a chance.

However, we are seeing an awful lot of icon requests that are repeats, or where there is already a perfectly suitable icon to use. I’m not going to put anyone down for this, though – it’s a measure of the popularity of this incredible theme. What I would like to do is to provide a little guidance on customising the icons yourself, in the hopes of taking some off the load off the theme creator and the guys on the modmyi forums – and to improve the Buuf2 user experience for all!

Icons is going to be the first and most important part of this guide – but I will get to other topics too, such as system graphics, sounds, wallpapers and so on.

Right, so you downloaded a new app from the AppStore, and now you want it to stop sticking out like a sore thumb on your springboard by applying a proper Buuf2-style icon. Well, the first thing you need to realise is that there probably already is one! Let’s go take a look. SSH into your iPhone, and navigate to /var/stash/Themes.xxxxxx/Buuf2.theme (the xxxxxx part will be different for every iPhone). See the Icons folder? I recommend you copy that to your PC. While you’re here, create another folder called Buuf2 Custom.theme, and create an Icons folder in there. This is where we’re going to put our custom icons.

Now that you’ve got the Buuf2 icons on your PC, have a browse through them and see if there’s an icon that suits your new app. There are over 750 icons at the time of writing (though many of them are repeats), and I’m willing to bet there’ll be something in there that will fit the bill, even if it’s not exactly what you were looking for. Got one? OK, now make a copy of it, and rename it with the exact app name that shows on your springboard. Copy the new icon into the icons folder in the Buuf2 Custom.theme we created.

OK, now on your iPhone, launch Winterboard. You should see that as well as Buuf2, you now have a Buuf2 Custom theme in the list. Drag it up the list so that it is above Buuf2, and select it so that it has a tick against it, like so:

Now, respring, and you should see your new icon! That was easy, eh?

At this point, a quick note on why I choose to create a Buuf2 Custom theme, rather than just placing custom icons in the existing Buuf2 theme. If you modify the existing theme, then when the official package on Cydia (or Installer – blech 😉 ) gets updated, the update will overwrite any changes you made. My way, you get to keep your own custom icons – plus whatever other customisations you may wish to make.

Alright, now what if you didn’t find an icon you liked enough in the existing icon set? OK, OK, I’m willing to admit this can happen. There are some pretty off-the-wall apps around, so it is always possible you couldn’t find one that suited well enough. Well, don’t worry just yet – there are a couple of things you need to check out before you post an icon request on the forum thread.

First, was there an icon that almost, but not quite, did the job? Or a couple of icons which, if combined, would be ideal? If so, post details with your icon request. It will save the guys with the icon-editing skills a lot of time if you give them something to work from.

Second, check out mattahan’s complete Buuf icon set (see here). Download it to your PC, extract the icons, and get browsing! Not everything from the full icon set has been ported to the iPhone version – yet. Again, if you find one you like, post details with your icon request and someone will convert it for you. (If you’re feeling brave, you can have a go at converting the icon yourself – any decent image editing program, such as Irfanview or GIMP, can re-size the image to the 60×60 pixels required for the iPhone springboard. However, the results may look a bit jaggy – I certainly don’t have the skills yet to make it look good enough!)

Thirdly, you can always – gulp – browse the thread on modmyi. Yes, I know it’s long, and people hate to search for stuff ;-). There’s a quick way to see if an icon has already been posted – in the New Skins / Themes Launches forum, click on the little paperclip by the Buuf2 thread – this will bring up a list of all the attachments (see below).

I tend to keep an eye on the thread, and any time an interesting-looking icon pops up, I save it for future use if necessary. You never know when you’re going to need a Buuf2-style barfing smiley icon.

Finally, you can have a go at creating an icon yourself. Now, you can’t just edit the icons in Paint you know – they have a transparent area, and Paint just screws that right up. So, you’ll need a ‘proper’ image editor. Luckily, there’s a free one that works well and won’t screw up the transparent areas – GIMP. There’s even a portable version you can install to a USB stick, so there’s no reason not to use it unless you have access to something more professional, like Photoshop (I don’t). Using GIMP, you can open up the icons, copy bits from one and paste them onto another, and generally mash things around until you have something that hopefully looks something like what you wanted, and not just a great big mess ;-). Again though, even if you’re not happy with your results, it can serve as an invaluable example for an icon request – “make a version of this that doesn’t suck, please!”. For some more detailed info on icon creation, nmilsaps posted some tips in the thread here and here.

OK, that’s about it for icons – here are a few extra tips on customising other aspects of the interface!

How to change the ringer volume level icons: put these into Buuf2 Custom.theme/Bundles/com.apple.springboard/

When launching the dialer, you may sometimes see a keypad screen with German text on it pop up briefly. This is just a loading screen – to change it to an English one, place the copy SIckbrain provided into Buuf2 Custom.theme/Bundles/com.apple.mobilephone/.

BiteSMS Buuf Balloons

SBSettings theme (I couldn’t get this to work terribly well with my setup, but I’m sure golum will update it).

Changing system sounds: I find the chime the iPhone makes when you plug it in too loud, when I’m coming to bed after my wife and dock it I’m always worried it’ll wake her up. So I changed it to make it quieter. Using Audacity (well, Audacity portable actually), I opened up the file Buuf2.theme/UISounds/beep-beep.caf, reduced the gain to -12dB or so, and saved it as a .caf file (note: to save as a .caf, go to Edit > Preferences > File Format tab, and change Uncompressed Export Format to CAF (I used 16 bit PCM). Put this file in your Buuf2 Custom theme, and hey presto, quieter charging tone!

Custom sliders: I have to say I’m not a huge fan of the Buuf2 slider icons. There’s a really cool slider theme on Cydia called Zipper Sliders (I think), however unfortunately it wasn’t working properly – I think something in the folder structure changed post-firmware 2.0, and the theme wasn’t updated properly. However, if you install the non-working theme, and copy the zip icons (can’t recall which folder they’re in, sorry) into Buuf2 Custom.theme/Bundles/com.apple.TelephonyUI, you’ll get the zippers I use. You can then un-install the non-working zippers theme.

How to change the text of the unlock-slider: create the folder path Buuf2 Custom.theme/Bundles/com.apple.springboard/en.lproj/. Copy the file SpringBoard.strings from Buuf2.theme/Bundles/com.apple.springboard/en.lproj/ into your new folder and double click the SpringBoard.strings file to edit it. When it opens in notepad, just change Buuf2 to whatever you like.

Some Russian users have packaged up a very comprehensive version of Buuf2, which skins just about everything – calendar, AppStore, Cydia, iPod, and so on. I like to keep my themes to the springboard really, so I haven’t applied it myself, but it does appear to have been very well done. You can get it here.

Wallpapers: Buuf2 has such a distinctive style, it’s kinda hard to find wallpapers that suit it well. You could do worse than to check out some more of mattahan’s excellent work on his deviantart page, of course 🙂

EDIT: I really should give credit to Hack That Phone for this excellent Winterboard tutorial, that taught me most of what I know about customising themes!

iPhone Tips

Bookmarklets

A bookmarklet is a bookmark which, instead of taking you to a url, instead runs a snippet of javascript on the current page. The great thing about this is that bookmarklets can be used to add functionality that is otherwise lacking in the iPhone’s Safari browser. Since I found out about them, I’ve collected quite a few that are now indispensable for my iPhone web browsing!

Adding Any Bookmarklet Without Syncing Your Bookmarks

By far the easiest way of adding Bookmarklets to your iPhone is to use iTunes to sync your bookmarks with either Safari or Internet Explorer on your PC. However, there are two main drawbacks with this approach:

1. My PC bookmarks are generally full of crap, and not what I want to clutter my iPhone up with;
2. I use Firefox or Opera. I hate IE, and I’m not installing another browser just to sync bookmarks with my iPhone.

Unfortunately, most people who publish bookmarklets on the web simply assume that you’re syncing your bookmarks, and don’t provide any other way of getting them onto your iPhone. It took me quite a while to figure out a reliable process for adding bookmarklets without syncing bookmarks, but I’m glad I did, because it gave me access to some excellent ones I couldn’t otherwise have had!

OK, so how to do it. First, you need to familiarise yourself with the method of manually adding a bookmarklet on your iPhone. Both iCopy and iTransmogrify have very good walkthroughs for this.

Now, what do you do if the bookmarklet you want doesn’t have an iPhone-friendly page? You need to create your own ‘dummy’ link with the javascript appended, that’s what – like so:

http://google.com/javascript:… a pretty straightforward way of doing this is to send the link in an email to your iPhone email address – then you can just click on it, and it’ll open up a ‘404 page not found’ in Safari. (Note that it should be a rich-text email with an embedded link – the javascript can make the URL too long otherwise.) Bookmark that page, then edit the bookmark and remove everything preceding the javascript: and hey presto! You just added your first custom-iPhonified bookmarklet!

OK then, here are my recommended bookmarklets…

Scroll to Bottom of Page

Everybody knows that tapping the status bar scrolls straight back up to the top of the page. OK, that’s occasionally pretty handy – but I find that much more often, I want to scroll straight to the bottom of the page. I found a bookmarklet to do just that here.

Here’s an iPhone-friendly bookmarkable link (follow the bookmark editing procedure outlined above once you’ve stored it).

Paste Custom Text

Erica Sadun over at TUAW coded a bookmarklet for pasting custom text straight into a text-field. Tom King made a super-iPhone-friendly version. Saves me typing in my email address or username whenever I want to login to a site – a real time-saver!

Find in Page

This comes in very handy from time to time. I found an iPhone-bookmarkable version hosted here (which, incidentally, was the site that inspired me to find a method for adding any bookmarklet without syncing bookmarks).

Copy/Paste

Everyone and his dog bemoans the lack of copy and paste on the iPhone. Very few people seem to be aware that iCopy works pretty well, at least within Safari. I agree, of course, that cross-application copy and paste is what we really want – but until then, this is a pretty good stop-gap. Just don’t copy and paste anything confidential, as it’s a non-secure method.

Change Font Size

Small text size on a page? Don’t want to zoom about all over the place just to read it? Use the bookmarklet from here to change the font size to something readable on the iPhone. (Note: you have to enter the font size as #em or #px, not just a number!)

‘Bare Bones’ Version of Page

There are times when you’re only interested in the content of a page, not all the flashy pictures (and awful banner ads!) – especially if you’re on GPRS coverage. The bookmarklets here will convert links to stripped-down versions of their target pages, reducing the page load time considerably.

Save Pages Offline

While not strictly a bookmarklet (though there is a bookmarklet version), http://iwebsaver.com/ is a great way of storing entire web pages as a data URL that you can then view offline – even when you have absolutely zero network coverage. Handy!

There are many more bookmarklets out there; I’ve only posted the ones that I’ve found to be both particularly useful, and singularly hard to find and get onto the iPhone. Hopefully the information will benefit other iPhone users!

Forwarding Hotmail to your iPhone

The iPhone’s built-in Mail app is great for email on the move – unless of course, you’re tied to a Hotmail account. Of course, you can set up a Gmail or Yahoo account, but then you’ve got to migrate across to it. If only Hotmail would allow you to forward your mail to your new address…

By default, Microsoft don’t seem to want you to do this on a standard Hotmail account. Unless you pay for a Hotmail Plus account (which is kinda pointless, seeing as you’re looking to use a new provider as your primary account) or forward the mail to one of their other product domains (which is confusing – a ‘custom domain’ is not the layman’s definition of a custom domain, it’s a Microsoft Live custom domain! Not very clear eh!).

However, there is a way… one which I can take no credit for, I’m only posting it for your information.

1. Go to your options, sign up to Mobile Alerts For New Messages.

2. Bang in the pin number sent to your phone.

3. Configure your Alerts so that ‘All New Messages’ is selected.

4. Send an email to your Hotmail account and you should get a text telling you that you have new mail in your account.

5. Now go back to Mobile Alerts, turn them off, then go to Email Forwarding, and like magic, you can now forward your Hotmail to any email account.

Thanks to murray on rllmukforum for bringing this to my attention – though where he got it from I couldn’t say, it’s pure gold. (Update: Hotmail POP3 access is now supported in the iPhone email app; however, Gmail’s IMAP functionality is far better, so I still think doing it via this route is superior. One email to rule them all!)