contador Skip to content

Tutorial – How to Create a Winterboard Theme for iOS 4

A very active member of the forum, Laws, has concocted an excellent tutorial allowing you to customize your device under iOS 4. Here it is, to the delight of our readers ^^

First of all, what is a theme?

Saurik answers this question with technical details, but for simplicity, it is a folder that must be placed in SSH in / Library / Themes, which contains images, folders with very specific names .

For example, the Chrome Pro theme is made up like this:

chrome Tutorial How to create a Winterboard theme for liOS 4

chrome2 500x346 Tutorial How to create a Winterboard theme for liOS 4

Here are all the names of folders / files you need to know to customize your device as much as possible;) (Attention: All names given must be carefully copied. You must respect upper and lower case!)

  • First of all, the images to add directly to the “Your Theme” folder (at the root):

– A wallpaper which will be on your SpringBoard (behind the icons if you prefer). It will be an image of size: 320 × 480 pixels. You will have to give it this name “Wallpaper” in PNG format only. Your Wallpaper can also be a video that will run in a loop. Just put a video in MPEG-4 format and call it “Wallpaper”

– A wallpaper on your lockscreen. It will be an image of 320 × 480 pixels which will be called “LockBackground” in PNG format only.

– A dock. It will be an image of size 320 × 91 px (by default) which will be called “dock” in PNG format.

This is a folder to create directly at the root of your theme. It will allow you to customize the SpringBoard icons.

In this folder, you will put icons of size 59 × 60 pixels (by default). You will name them for example like this: “Winterboard” to replace the default icon of Winterboard, “AppStore” to modify the icon of the AppStore etc.

In this file there are many things to put. We will only put the main ones 😉

For the 100% charged battery icon, name the image like this: Black_BatteryCharged.png -> Corresponds to the battery icon on the SpringBoard For the 100% charged battery icon, name the image like this: Silver_BatteryCharged.png -> Corresponds to the battery icon in an application

For the battery charging icon, name the image like this: Black_BatteryCharging.pngFor the charging battery icon, name the image like this: Silver_BatteryCharging.png

For the icon of the battery charged at 0%, name the image like this: Black_BatteryDrainingBG.png For the icon of the battery charged at 0%, name the image like this: Silver_BatteryDrainingBG.png

For the icon of the 10% charged battery, name the image like this: Black_BatteryDrainingInsidesLow.pngFor the icon of the 10% charged battery, name the image like this: Silver_BatteryDrainingInsidesLow.pngTo change the color of the interior of the battery while charging, name the image like this: Black_BatteryDrainingInsides.pngTo change the color of the inside of the battery while charging, name the image like this: Silver_BatteryDrainingInsides.png

The% icon is to be named like this: Black_Percent _%. Png -> icon on the SpringBoardThe% icon is to be named like this: Silver_Percent _%. Png -> icon in an application

The 3G icon is to be named like this: Black_DataTypeUMTS.png -> On the LockScreen The 3G icon is to be named like this: Silver_DataTypeUMTS.png -> SpringBoard is in an application

The Blutooth icon is to be named like this: Black_Bluetooth.png -> On the LockScreen The Blutooth icon renamed there Silver_Bluetooth.png -> On the SpringBoard is in an application

In the Folders folder, create a folder called “UIKit.framework”.

Place all these elements inside the UIKit.framework folder:

To modify the statusbar:

Translucent_Base.png (dimension: 320 × 20 pixels): Status bar of LockScreenBlack_Base.png (dimension: 320 × 20 pixels): Status Bar of SpringBoardSilver_Base.png (dimension: 320x20px): Status Bar when an application is launched

To modify the wifi bars on the SpringBoard:

Name your image: Black_0_WifiBars for the image to display when there is no wifi

Name your image: Black_1_WifiBars for the image to display when there is only one wifi bar

Name your image: Black_2_WifiBars for the image to display when there are only 2 wifi bars

Name your image: Black_3_WifiBars for the image to display when there are only 3 wifi bars

To modify the wifi bars when an application is open:

Name your image: Silver_0_WifiBars for the image to display when there is no wifi

Name your image: Silver_1_WifiBars for the image to display when there is only one wifi bar

Name your image: Silver_2_WifiBars for the image to display when there are only 2 wifi bars

Name your image: Silver_3_WifiBars for the image to display when there are only 3 wifi bars

To modify the bars of the Network signal on the SpringBoard:

Name your image: Black_0_Bars for the image to display when there is no network

Name your image: Black_1_Bars for the image to display when there is only one network bar

Name your image: Black_2_Bars for the image to display when there are only 2 network bars

Name your image: Black_3_Bars for the image to display when there are only 3 network bars

Name your image: Black_4_Bars for the image to display when there are only 4 network bars

Name your image: Black_5_Bars for the image to display when there are only 5 network bars

To modify the bars of the Network signal when an application is open:

Name your image: Silver_0_Bars for the image to display when there is no network

Name your image: Silver_1_Bars for the image to display when there is only one network bar

Name your image: Silver_2_Bars for the image to display when there are only 2 network bars

Name your image: Silver_3_Bars for the image to display when there are only 3 network bars

Name your image: Silver_4_Bars for the image to display when there are only 4 network bars

Name your image: Silver_5_Bars for the image to display when there are only 5 network bars

In this folder you will place the sounds to modify.

– Locking sound -> lock.caf (be careful with the format, you need .tiff or .caf) – Unlocking sound, -> unlock.caf (be careful with the format, you need .tiff or .caf) – Calendar alarm sound -> alarm.caf (beware of format, you need .tiff or .caf) – May send sound -> mail-sent.caf (beware of format, you must .tiff or .caf) – Sound for receiving an email -> new-mail .caf (note the format, you need .tiff or .caf) – Sound for receiving an sms, -> sms -receivedX.caf (X to replace with a number from 1 to 6, for example the 1st sms you receive will play the sound of sms-received1.caf, the 2nd of sms-received2.caf etc.) – Sound of the ‘send an sms -> SentMessage.caf (attention to the format, you need .tiff or .caf) – Sound of the telephone keypad -> dtmf-X.caf (X to replace from 0 to 9. For example if you put a sound with dtmf-1.caf, the key 1 will have the sound that you will have etc etc. For the key “#” name the sound dtmf-pound.caf and for the key “*” n like the sound dtmf-star.caf)

Be careful, for everything to work you have to pay attention to capital letters and accents.

This tutorial should be updated (adding some tips), but the main one is 😉

Thanks to Lois for the filenames

You may also like

The editorial staff recommends you