How to Theme your iPhone Without Winterboard

[photoshop]

Basics


Let me start with some facts so everybody knows what im talking about.

Cydia = Cydia is an application that allows you to add other applications to your iPhone, iPad or iPod touch. Cydia is similar to the App Store in that it will allow you to add many more applications such as: games, networking applications, productivity applications…etc. It also allows you to change the look of your iPhone. You can select from a variety of themes that change your icons, wallpaper, dock and status bar. You can even use an application called WinterBoard to changes things like your dialer keypad, your Chat bubbles, the color of the WiFi and Signal bars…etc.

Winterboard = Winterboard allows you to customize Springboard of your iPhone. Using Winterboard you can change iPhone icons, customize applications, status bar graphics, iPhone dock graphics, install themes and change wallpapers of your iPhone Springboard. You can even customize sounds on your iPhone. With Winterboard you can theme almost everything that comes to your mind. You can download Winterboard from Cydia for free.

Springboard = Springboard is the launcher application -- i.e. the one you see on the home screen with all the tiled app icons. This is an Apple system application!

iFunBox = A free iPhone browser app for Windows. Google it.

Afc2add = a file which you must download from Cydia in-order to use iFunbox so it can navigate/browse your iPhone file system! Its free.

Respring = A way of restarting Springboard.app. Use SBSettings or get an app from Cydia which does this. You need to do this everytime you change/theme something on your iPhone.


Many people, such as myself, hate using Winterboard to customise our iPhones. The reason is because of lag! It causes lag and does cause your iPhone to slow down. Its not only Winterboard that does this, apps from Cydia also do this when they running in the background but generally, they don’t use much resources- its more battery life they consume.

The good thing about using Winterboard is that you can easily and quickly change themes, lockscreens, icons etc etc You can have several themes in Winterboard and all you do is apply them and your iPhone look instantly changes. Doing it manually means you have to go into the file system and change every file yourself which can be time consuming and also confusing if you don’t know what your doing.

I'm not gonner go into too much detail. I think the above is enough. If your still confused then I would strongly recommend you stick with Winterboard to do your theming!

I'm gonner assume you have jailbroken your iPhone and are running iOS 5.0.x from this moment on…..I'm also going to assume you have a theme waiting to be applied manually. This could be a theme you downloaded from the internet…….


For reference im running iPhone 4 iOS 5.0.1 jailbroken on Windows XP SP3

ALWAYS BACKUP ANY FILES YOU REPLACE OR CHANGE!!!
Please don't hold me responsible if you screw your iPhone up! Back Up Back Up BACK UP!

 

[photoshop]

Icons and Application Images

So say for example I wanted to change the Shazam icon to the one from the theme I have downloaded. I go into /var/mobile/Applications on my iPhone and then look for Shazam app. I find it and double click to view its contents.

Inside that folder I should see another file named Shazam which I double click on to open.

Once ive done that I should see loads of folders, files and icons which Shazam uses. I am now free to change any of them. But we only want to change the homescreen icon so we look for that. The image we are looking for is called “icon@2x” (these can also be sometimes named: [email protected]@2x~iphone).

We double check that the themed icon is renamed the same and we just copy and paste it over so it overwrites the original. We respring our iPhone and we have a themed Shazam Icon.
Retina devices generally use the [email protected] prefix always for icon and file names. Native devices just use Icon.png

If it doesn’t change then chances are you didn’t give it the exact same name. You’ll also notice the original icon still there. Make sure the names are exact. If its icon@2x do not use Icon@2x because it doesn’t have a capital I!

Go through all the applications changing icons and files in this fashion.

All AppStore Apps/Games are kept in: /var/mobile/Applications
All Apple/Cydia Apps are kept in: /private/var/stash/Applications


Now lets take the folder: com.apple.springboard in the Bundles Folder of the Theme.
We want to copy all those files to the corresponding folder in the iOS: /System/Library/CoreServices/SpringBoard.app

Springboard typically contains your lockscreen charging battery, your folder icons, your folder background wallpaper, your ipod controls in your dock, the notification/alert bubbles which appear on your icons, your dock image, icon shadows, UI for using your volume buttons etc etc Its a CORE service for the iOS so its kept in /System/Library/CoreServices.

Example 1:

Now as an example, I have the Suave theme here infront of me. If i look in Suave HD/Bundles/com.apple.springboard folder It contains the themed image files for the battery charging and the rest etc etc.

I navigate to: Suave HD 5.0\Bundles\com.apple.springboard on my desktop and copy all of the files from that folder and paste them in /System/Library/CoreServices/SpringBoard.app on my iPhone overwriting any files with corresponding names.

If you respring you will see that all those Suave elements have now been applied by the iOS and the iOS is using those files as default. Its as simple as that assuming all the files have been renamed properly and the Theme has been updated for iOS5 (most themes have the prefix “HD” if they have been updated for iOS5).

Example 2:

Now lets take the folder Suave HD 5.0\Bundles\com.bitesms on my desktop.
We want to copy all of the files in that folder and paste them in: /private/var/stash/Applications/biteSMS.app on the iPhone overwriting all the existing files with the same name.
After a respring, your BiteSMS icon will have changed (along with chat bubbles/the send button/the camera button etc if the theme has them).

Example 3:

Now lets just say i was browsing at macthemes and i notice a rather nice SMS icon and i want to use it to replace my existing SMS icon.
I save the icon file to my desktop (or wherever on my PC). In iFunbox i navigate to /Applications/MobileSMS.app on my iPhone and look to see what the existing icon is called. I see that its called "icon@2x" so i rename the new icon ive just downloaded to icon@2x. Then i basically just drag it over (or copy and paste it) into iFunbox, respring and its changed!

Example 4:

Lets say i want to change the icon for SBSettings. I navigate to /private/var/stash/Applications/SBSettings.app on my iPhone. See what the icon file is called. In this case its "Icon@2x". I rename the new icon Icon@2x and simply copy and paste (or just drag) it over. Respring and its changed.

Changing other elements is just like this! Whether your changing an icon or a default application loading/splash screen image.

You should now know how the “Bundles” folder within themes works. You should also now know where to find the actual folders in the Apple iOS to copy those files too for theming icons and the UI for those apps. You will need to go through all the folders in "Bundles" copying the contents over to the iPhone iOS.

Make sure all the themed element files are named correctly otherwise they will not work/change. This is a problem for themes which have not been updated for iOS5. You will find many themes at macthemes forum which have been updated such as Suave HD, Black UPS HD, Matt Nano HD etc etc. Macthemes is where i go for themes and resources. Its an excellent community!


Heres a list of where things are kept on the iOS:

/var/stash/Themes - Where your themes are stored
/Library/LockInfo - LockInfo is Stored here
/var/mobile/Library/Carrier Bundle.bundle - Your carrier logo
/private/var/stash/Applications - As discussed above
/var/mobile/Library/MyFonts - BytaFonts are stored here
/System/Library/PrivateFrameworks/ChatKit.framework - SMS UIImages/bubbles are kept here
/System/Library/Frameworks/UIKit.framework - Status Bar alerts are kept here along with the "SharedArtwork" file
/System/Library/PrivateFrameworks/TelephonyUI.framework - Where your Lockscreen images are kept
/System/Library/PrivateFrameworks/iPodUI.framework - iPod app stuff is kept here
/System/Library/CoreServices/SpringBoard.app - As discussed above
/System/Library/Frameworks/MediaPlayer.framework - More iPod stuff is kept here
/System/Library/PrivateFrameworks/MobileIcons.framework - Handles the theming of icons such as applying gloss and rounded corners.

I will discuss most of these later.

 

[photoshop]

LockScreen Customisation

For this part im going to assume you have downloaded a lockscreen theme you want to use. I'm going to use "Satiunet HD iOS5" as an example as its for iOS5 and has all the correct file names so there isn't any issues.

If we look in the Satiunet HD iOS5 folder we will see the following folders:

- Bundles
- UIImages

Inside the Bundles folder are the following folders:

- com.apple.springboard
- com.apple.TelephonyUI

Now, ive already explained above what you do with the contents of these folders.
You copy the contents of the com.apple.springboard folder to /System/Library/CoreServices/SpringBoard.app on your iPhone (using iFunbox) and the contents of com.apple.TelephonyUI to /System/Library/PrivateFrameworks/TelephonyUI.framework overwriting any files with the same names.

Now, to get rid of the Lockscreen Padlock and the status bar time we use an app from Cydia called "Springtomise". This is a brilliant app which lets you do a lot of stuff. I recommend it!

Now the other folder in the root of Satiunet HD iOS5 folder is UIImages. Unfortunately, the way iOS works, it has a single file called SharedArtWork@2x which handles most of the UI Images. We would need to extract the contents of this file and repackage them. This is a very complex procedure which even i wount try! So, we have to use Winterboard for this. So we browse to /var/stash/Themes. and put the Satiunet HD iOS5 folder in there. Inside that folder should only be the UIImages folder which will only contain 1 file...."Translucent_Base". This is the status bar on the lockscreen. Then in Winterboard we select it in the themes list and respring.

I know for the UIImages we must use Winterboard but its only one file so its no big deal and wount use any resources.

You should now have a personalized Lock Screen!

Use a free app from Cydia called BytaFont to change the Lockscreen font (aswell as system fonts).

 

[photoshop]

SMS Customisation

This will theme your Apple SMS app and BiteSMS.

For this guide im going to assume you have downloaded a theme already which you want to use. As an example im going to use RoundSquare SMS iOS5 which i got from Macthemes Forum's.

Inside the RoundSquare SMS iOS5 folder is the following:

- Bundles

Inside that folder is:

-com.apple.chatkit

We want to copy the contents of that folder into:

- /System/Library/PrivateFrameworks/ChatKit.framework

Now for the second part (which relates to BiteSMS) im going to use the theme BlacKUI which i also got from Macthemes Forum.

If we look inside the Bundles folder we will see the following folder (amongst others):

- com.bitesms

We want to copy the contents of that folder to:

- /private/var/stash/Applications/biteSMS.app

This will change a lot of the elements to darker colours and remove the gloss.

Note: BiteSMS uses a lot of the UI elements from the Apple SMS app such as bubbles and the general conversation look so a lot of elements are shared so no need to theme the whole of BiteSMS.

Changing SMS conversation Wallpaper

Unfortunately, there is no image file on the iOS which contains this and its hidden in code in some file. No one has found it yet.

So we must use Winterboard for this.

Create a folder called

- SMSBackground.theme

Inside the root of that folder put your chosen background image in PNG format. The file must be 640 x 640 pixels. Call this file SMSBackground.

Now take your SMSBackground.theme folder and put it in /var/stash/Themes. Go into Winterboard and select the theme and respring.

Job Done.

 

[photoshop]

Changing Carrier Image


First, get yourself a cool carrier logo image from here: http://macthemes.net/forum/viewtopic.php?id=16798497
Its 73 pages long so im sure you will find one.

Once you got the images which are iOS5 compatible follow these steps:

1 - Navigate to /var/mobile/Library/Carrier Bundle.bundle.
This is where you carrier images are kept.

2 - BACK UP the contents of the folder!!!

3 - Rename your chosen carrier logo to the following:
- Default_CARRIER_O2-UK_1only_@2x
- FSO_CARRIER_O2-UK_1only_@2x
- TS_CARRIER_O2-UK_1only_@2x

4 - Copy and paste into /var/mobile/Library/Carrier Bundle.bundle overwriting the existing files.

Make sure you choose the right files for the right colours

5 - Respring and enjoy

 

[photoshop]

How to Theme Status Bar Objects

Unfortunately, for this part, we must use Winterboard
The reason is because there are no image files in the iOS which deal with the status bar objects.
Everything is kept in one file and that file is "SharedArtwork@2x". This contains pretty much the user UI elements and the status bar elements. In-order to edit the the files, you must extract this file which isn't an easy procedure. If you manage to do that then you must repackage it with your chosen themes files. BUT, the new files must be the same dimensions, the same file size and the same file names. If they are not then you will not be able to package it back up! This is something i haven't done because its complicated and time consuming. Its all about running scripts.

So, go get around this i have managed to get hold of a SharedArtwork file which someone has done to change the UI to black. Its "BLACK UI" and its available as a free download from Macthemes Forum. Direct link to teh thread is:

http://macthemes.net/forum/viewtopic.php?id=16809912

Download it from there and put it in:

/System/Library/Frameworks/UIKit.framework

Make sure you back up your existing SharedArtwork@2x file!!

Now, most of you guys will be happy with the UI in the Black UI. I however wasn't happy with the battery, the %, the Signal and wifi bars so i changed them to suit the ones i wanted.

For this i had to use winterboard for reasons explained above.
I simply created a folder called....

User Images.theme and in there put a UIImages folder which contained all my images for the battery, the %, the signals and the wifi stuff. Then simply choose in winterboard and respring.
The only good news about using winterboard for this is that the status images are cached so once they are loaded they are not eating up resources.

The stuff im using is available at Macthemes along with tons of other status bar items.


LockInfo Status Bar Objects

These can be found in:

System/Library/Frameworks/UIKit.framework

Take the ones from the BLACK UI theme and insert them at the above location overwriting the existing files.

 

[photoshop]

Transparent Dock background

Copy and paste this file into /System/Library/CoreServices/SpringBoard.app

1. SBDockBG@2x~iphone

Make sure they have those file names because when you download them they loose their names.
Respring and your done.

If you have another dock which you like and want to use just create 2 files and call them the above and simply place in the above folder link.

Avery large collection of docks can be found here: http://macthemes.net/forum/viewtopic.php?id=16809717

 

[photoshop]

Theming the Notification Center

The files for the Notification Center are kept in: System/Library/CoreServices/SpringBoard.app

There are a number of files.
Best thing to do is download a theme and insert the files in the above location.

For reference i use Appman's BlackNotificationCentre (as it goes with my dark theme). I've got a little bit of photoshop skills so ive edited mine incase anyone wonders why mine is slightly different.
Direct link to thread is: http://macthemes.net/forum/viewtopic.php?id=16810710 and http://darren-coates.deviantart.com/#/d3jhjmi


Theming the Notification Center

The files for the Notification Center are kept in: System/Library/CoreServices/SpringBoard.app

There are a number of files.
Best thing to do is download a theme and insert the files in the above location.

For reference i use Appman's BlackNotificationCentre (as it goes with my dark theme). I've got a little bit of photoshop skills so ive edited mine incase anyone wonders why mine is slightly different.
Direct link to thread is: http://macthemes.net/forum/viewtopic.php?id=16810710 and http://darren-coates.deviantart.com/#/d3jhjmi


Theming the Pop up Bubbles on Lockscreen/Homescreen

You've all seen those really crappy looking bubbles that Apple uses with the stupid glare on them. They look pants right!
Now im going to show how you can themes these.

The files are kept in: /System/Library/CoreServices/SpringBoard.app

Alert Bubble for the Lockscreen:
BulletinListLockScreenFirstAlertBG@2x~iphone

HomeScreen Pop-ups:
UIPopupAlertSheetBackground@2x

For theming the lockscreen camera, the image is called:
LockScreenCamera@2x~iphone

Its also found in Springboard.app
LockScreenCamera@2x~iphone

 

[photoshop]

Reserved..... ...

 

[Steve_bullockuk]

Fantastic!

First time I ever attempted to this and it is very straight forward. Thanks for the guide.

 

[GJ02]

been doing this more the past year
good info and guide for new people to the area
well done

 

[Steve_bullockuk]

Im having issue finding the phone icon. Doesn't seem to be located in /private/var/stash/Applications (unless im blind).

Also, Ive changed the calendar and mail icons making sure they have the correct names (iFunBox even removed the old icon due to naming conflict) but its still the old icons after a respring.

 

[Skyboat]

Brilliant guide, thanks very much. This should be stickied.

 

[Jay794]

Did you really buy all those apps?

 

[photoshop]

Im having issue finding the phone icon. Doesn't seem to be located in /private/var/stash/Applications (unless im blind).

Also, Ive changed the calendar and mail icons making sure they have the correct names (iFunBox even removed the old icon due to naming conflict) but its still the old icons after a respring.

Phone icon is in:

/private/var/stash/Applications/MobilePhone.app

Its exactly where you looking

It wount say MobilePhone.app. It will be called FaceTime.app. (but when you copy that app over to PC it will say MobilePhone.app - strange but thats the way it is)
Icon is in there and its called Icon@2x

/private/var/stash/Applications/MobileCal.app
Calender icon is called icon@2x

/private/var/stash/Applications/MobileMail.app
Mail icon is called Icon@2x

Make sure these are named exactly the same. Double check. If it still doesn't change then restart your phone which will clear your cache file.

 

[Steve_bullockuk]

Phone icon is in:

/private/var/stash/Applications/MobilePhone.app

Its exactly where you looking

It wount say MobilePhone.app. It will be called FaceTime.app. (but when you copy that app over to PC it will say MobilePhone.app - strange but thats the way it is)
Icon is in there and its called Icon@2x

/private/var/stash/Applications/MobileCal.app
Calender icon is called icon@2x

/private/var/stash/Applications/MobileMail.app
Mail icon is called Icon@2x

Make sure these are named exactly the same. Double check. If it still doesn't change then restart your phone which will clear your cache file.

Thanks for your help. The icon in iFunBox is even my edited one (for both mail and calendar) but a reboot will not change it on the phone.

 

[stoke1863]

Just reading all that it sounds totaly brainless that apple dont allow you to modify the icons and such as you want.

Thier rules i suppose,

 

[Steve_bullockuk]

Just reading all that it sounds totaly brainless that apple dont allow you to modify the icons and such as you want.

Thier rules i suppose,

I agree although giving everyone root access could potentially cause lots of bricked iPhone's for people who don't know what they are doing.

No doubt "themes" will be something that they look at as an AppStore purchase in the future.

 

[photoshop]

Thanks for your help. The icon in iFunBox is even my edited one (for both mail and calendar) but a reboot will not change it on the phone.

Are the new icons from a theme?
Are you deffo in the right location for the app?
Icon needs to be 118x120 pixels.

See here (my Mail.app folder showing the themed icon):

Upload the icon files to somewhere like imageshack and link here so i can see.

 

[Steve_bullockuk]

The icon's are from a theme pack: