How-to build or edit a custom iPhone theme

The jailbreak community offers an abundance of tools that allow you to make your iPhone fit your personality and mood.  If you're anything like me, I can be pretty picky about layouts and exactly how my phone is set up.  I want all my most frequently used apps in one place, neat and tidy, and ready to use.

For some iPhone users, that plain black background and all the stock icons get pretty boring.  I change my theme on my iPhone a couple times a month, if not more.  There are several jailbreak tools that can help turn your iPhone from boring, to brilliant.

There's always one problem with paid and free themes, you get what the theme developer gives you.  There may be some theme elements you don't like at all, or ones that are missing that you'd like to add.  There are several ways to edit themes and customize them to fit you individually. Today, we'll show you how to do just that.

There's a couple things you'll need in order to do this:

  1. Winterboard - Free via Cydia and Rock
  2. Custom theme - This can be your choice, paid or free. I chose iTopSB for this tutorial by ToyVan, available in Cydia and Rock for $1.99
  3. OpenSSH - Free via Cydia and Rock
  4. SBSettings - Convenient to toggle SSH and other settings on and off, Free via Cydia and Rock
  5. iWipeCache - Clears your springboard cache for you instead of having to do it manually, Free via Cydia and Rock
  6. SSHClient - Several free and paid available for PC and Mac. Here's an earlier article that links to popular choices
  7. Optional installs: iBlank, FontSwap, CategoriesSB (there is a free version but I highly recommend CategoriesSB over plain Categories, it's worth the $0.99), FiveiRows, FiveIconDock (I say optional as these are totally user preference and not neccessary if you don't want them - they're all free so give them a try, you can always disable and they'll be there later if you want to use them with a different theme at some other point).

After you have all of the above and any of the optionals you think interest you, continue on.

First thing I recommend doing is going into your iPhone's settings and turn the auto-lock to never. You can do this by going to Settings, General, Auto-Lock, and check Never.  Sometimes if your phone goes to sleep while you're making changes to the file system via SSH, it'll disconnect you and certain files may not transfer.  I also recommend having your phone charging throughout the SSH process. Using SSH and having the backlight on constantly will deplete your battery pretty quick.

Next, toggle SSH on via SBSettings if you haven't already.

Now you'll need to open your SSH client on your computer and SSH into your phone. If you aren't sure how to do this, read this article first. Your iPhone's IP address is also easily found via SBSettings as seen in the above screenshot.

After you have gotten into the main file system of your iPhone, you'll need to go into your Themes folder. The easiest way to do this is with the shortcuts in the main directory.  Just go to Library, Themes.

Now I can see a list of all my themes that I have installed via Winterboard.  Before continuing on, I think it's imperative to explain a little about why Winterboard is such a powerful tool.  Some themes can be customized completely without even having to SSH into your iPhone with the use of Winterboard alone.  Lets say for example, I have a theme I bought through Cydia, but I don't like the chat bubbles.  That's something I can fix easily via Winterboard.  I can download chat bubbles I do like, select them in Winterboard, and just drag them higher up in Winterboard than the main theme. My chat bubbles will now override the chat bubbles in the theme.  That's because Winterboard works as a hierarchy.  Things at the top take precedence over those further down in the list.

Use this to your advantage.  Sometimes I don't like the sounds a theme comes with, so I'll simply download a sound pack I do like, drag it higher than the theme in Winterboard, and it overrides the theme default sounds.  This is especially useful for times when you're not near a computer and need a quick fix.  It doesn't replace the power of actual editing via SSH, but it's definitely useful.

Alright, now for editing a theme.  I chose iTopSB for this example.  This is a very beautiful and extensive theme but there are certain things that just don't suit my taste in this theme, so I want to remove them.

These are the items I'm going to remove in this tutorial:

  • Splash/loading screens
  • Lock background
  • Arrow UI elements inside the mail app

I may remove or show a couple more in the video as well.

Another tip, I always copy the entire theme to my desktop on my iMac. Then I rename it something like "iTopSB Edited" and drag it back over.  That's the copy I edit.  Then, when you receive updates via Rock and Cydia for a theme, you don't have to do this process everytime.  It'll update the main theme and not your edited theme.  Then you can go apply the main theme, see if there's any new additions you'd like to bring over to your edit version, and do that if need be.  It makes life much easier than re-tweaking a theme everytime an update is issued.

Alright, first thing in our list is splash screens.  These always irritate me in themes. I know some people really like them, but to me, all they do is increase the time it takes for an app to load and be useful.  Therefore, I remove them.

Splash screens are typically located inside the main theme folder in a folder called "Folders".  Inside that folder, you'll fine typical stock and popular apps that the developer has made splash screens for. You'll have to go into each of these folders and delete the splash screen PNG in order to get rid of them.  Depending on what you need/want from that folder, you can sometimes get away with just deleting the entire "Folders" folder with no damage to the theme but ridding yourself of splash screens and other extra UI tweaks that aren't technically necessary.

Again, this is all a matter of personal preference.  Some people like extra UI images and tweaks.  To me, I may want my iPhone to look different, but I don't want the UI bogged down. I still want a clean look, not cluttered.  This is why I always clean up themes to suit my personal taste.  I figure if anything, this process will teach some of you how to find what you're looking for when deleting theme elements and get you more comfortable with the folder systems and where to find things inside a theme folder.

Alright, I've found my splash screens, and in my case, since there was nothing inside that specific folder I wanted, I've went ahead and deleted it completely in my edited theme.

Next we move to the lock background.  I typically like my own picture on my lockscreen.  So I'll just go into the main theme folder and delete the file called LockBackground.png.  That's it.  Pretty easy, eh?

For our final deletion, we'll have to find what UI element is creating the little pesky arrows in the mail app that I'm just not to crazy about.  And keep in mind, you aren't always going to know exactly where these elements are. There are a few different ways theme developers can form their file structure. So where I may put certain UI elements, another developer may choose another folder syntax.  For the most part, it's universal, but certain things, such as Icons, can be done a few ways.  Most SSH clients have nice preview features that allow you to preview files and see if it's what you're looking for.

In my case, most of the culprits were always found in Library/Themes/"ThemeName"/Folders or Library/Themes/"ThemeName"/UIImages

You'll probably have the most luck looking for things in those two locations.  Check out the video for a walkthrough and a couple other tips and tricks!

And as always, if there's something you really can't figure out or find, leave it below or in the forums!

YouTube Link

Allyson Kazmucha

Senior editor for iMore. I can take apart an iPhone in less than 6 minutes. I also like coffee and Harry Potter more than anyone really should.

More Posts

 

0
loading...
0
loading...
0
loading...
0
loading...

← Previously

Does the iPhone 4 really have Retina Display?

Next up →

iPad Live! Tonight at 8pm ET/5pm PT (1am BST)

Reader comments

How-to build or edit a custom iPhone theme

24 Comments

CategoriesSB is an add-on for categories, it's not a separate app. You need to have categories installed in order to use categories. Just putting that out there. :)

One of my favorie websites that allows you to customize almost EVERY ASPECT of the iPod/iPhone is www.codethemed.com. They allow you to add any application and either use their previously created icons, you can "iconify" your own image, or upload any image you would like for your desired application. The option to change the font size & color and then have the text either hidden or visable for docked or undocked icons adds even more customization. From there, you can change the text for the "slide to unlock," "slide to answer," and "slide to power off" options is even more awesome. Icon transparency and slider buttons can be changed to the user's liking to further display the ability to add any image, or use previously created images, to the lock and or home screen, thus making the theme more appealing. The website is very user friendly and can be navigated quite easily.

I guess I am one of those that doesn't care for themes or JB'ing a phone. There are some very creative people however. My hats off to those.

Does anyone know how to add AM or PM to the factory unjailbroken lockscreen Clock? And yes I have it on the 12-hour format. I've been searching for this for weeks to no avail. Such a simple addition but no one has a clue how to do it or if it's possible.
Thanks for the link, Brandon.

By the way, when I wrote "unjailbroken", I meant not as an HTML-based lockscreen theme. I mean the stock Clock on the "Slide to Unlock" screen; there must be some way to alter it to show AM and PM through OpenSSH.

@Dexter - I have heard that there was a way to add "am" or "pm" to the lock screen, but it was a bug in OS 2.1 (which doesn't help us here) that apple fixed. I have yet to find anything that allows for that change, as of recently. Sorry, that doesn't help much tho. I hope that website helps you!

Thanks Brandon. I did read about that exploit of 2.1. It amazes me that Apple did not make the clock show AM or PM for the United States at least where it is used all of the time. This is the weird stuff Apple does that no one has a clue why.

Yeah, Dexter I don't know why Apple does some of the things they do. It leaves me scratching my head more times than not which is pure madness :(

ILoveOnSale offers various kinds of wedding dresses, such as Tee-length Wedding Dress,A-line Wedding Dresses,Ball Gown Wedding Dresses,Empire Waist Wedding Dresses,etc. And it also offers special occasion dress through B2C platform. Customers can visit our website and purchase at any time from any places.A-line Wedding Dresses,cosplay customs

Awesome theme! i've been using this on my iPod Touch 4G ever since 4.1 and i recently updated it to 4.3.3 and i immediately noticed two differences/issues and i was hoping you are able to provide a solution to 1. toggle buttons are out of alignment and 2. the slider background has a transparent box - all this happened after updating to 4.3.3. Please help or point me in the right direction.. Thanks
http://imageshack.us/photo/my-images/846/img1001l.png/
http://imageshack.us/photo/my-images/88/img1002.png/

Please disregard my previous post I didn't realize that Pipes DID reset the game board to 4×4 when I transferred it to the iPad. I'd still love to see the game fill the screen without fuzzies or pixellation though!