how to make your own winterboard theme Tutorial

[opusandbill]

I have seen several threads about people wanting to know how to change something using Winterboard. So I thought I would write this.

First if you really want to do this I think you should read Sauriks blog about winterboard, it explains alot.

iPhone Theming on WinterBoard - Jay Freeman (saurik)

second you will need to download this zip file (iPhone Forums at ModMyI.com - iPhone | iPod Touch, news, apps, themes. - Downloads - 2.0 UIImages), it contains the images you will need to change the keyboard and other.artwork files (even the overlays that apple adds to icons)

third you will need to install winterboard (it will have 1 default theme named Saurik)


to add your own theme you will want to do the following:

add a folder with your theme name
you should see this
/Library/Themes/(theme name)
then add both a UIImages and Bundles folders
EX:

/Library/Themes/(theme name)/UIImages
/Library/Themes/(theme name)/Bundles

if you want to add a wallpaper to the springboard it goes in the folder of your theme and needs to be called "Wallpaper.png"



you can copy the plist from the default theme and add it to yours.
This will allow to change the type of font, color and transparency of the fonts both on the dock and springboard.

If you want transparent icon text, check the end of the post for info about new features of the latest update of winterboard.



now to change an image on the springboard like the dock background, you have to add a folder called com.apple.springboard to the Bundles folder.
/Library/Themes/(theme name)/Bundles/com.apple.springboard



the images that you can change on the springboard are located here:
/System/Library/CoreServices/SpringBoard.app

you have to use the names that are listed in the SpringBoard.app or your images will not change.

For Example the dock is called SBDockBG.png



to change any thing about a apple installed app (this includes appstore programs), You need to know what to name the folder.

open the plist for the app and look for a set of words that start with "com."
example
the weather app is called com.apple.weather



you then add your images just as you did for the springboard.

the apps from the apple store are located at:
/var/mobile/Applications

all other apps are located at:
/Applications

this is a list of some of the apps I have modify:

whatever image you want to change has to have the same name as the original.

By doing it this way you can switch between themes fairly easy, and all your stock images are still there.

to change either the keyboard or other.artwork images, you open the image from the zip that you download earlier (I use Photoshop CS3), and make whatever changes to it you want.

when you save the file you want to use the "Save For Web & Devices" option.

then select PNG-8 and make sure the transparency box is checked and that it says none for matte.

you then place the image in the UIImages folder.



once you are done when press the winterboard app you should see the name of your theme.

you simply press theme name and once winterboard resets to the locked screen you will want to restart your phone to make sure the changes stick.

if you want to delete a theme you simply goto (/Library/Themes/(themename)) and delete the theme.

UPDATED WINTERBOARD
with the latest version of winterboard there are now 3 new options

1. User Wallpaper lets you use the same wallpaper that is on your locked screen.
step A: press the bar that says User Wallpaper, you then should see a check mark to the right
step B: press the 3 grey bars and drag it to the top (it should be on top of your theme)
step C: when exit winterboard will automatically restart and the wallpapers should now match

2. making icon text transparent
step A: press the bar that says Transparent Icon Labels, you then should see a check mark to the right
step B: press the 3 grey bars and drag it to the top (it should be on top of your theme)
step C: when exit winterboard will automatically restart and the text should now be gone.

New winterboard update 8-19-2008
Saurik has added support for changing User interface sounds.
this is were the sounds are located: /System/Library/Audio/UISounds/

Step 1: open itunes
Step 2: click Itunes, then preferences
Step 3: click Advanced
Step 4: click import
Step 5: where it says "Import Using" select AIFF encoder
Step 6: load sound to itunes
Step 7: select sound and right click and select "convert selection to AIff"
You should now have 2 clips with the same name.
Step 8: select the AIFF file click "get Info" and make note of where the file is located.
Step 9: find clip
Step 10: drag clip to desktop and rename it as the file you want to replace and changing .aif to .caf
Step 11: Add UISounds to your theme
Step 12: place new clip into UISounds folder
Step 13: open winterboard and tap your theme twice and then exit winterboard and wait for springboard to restart.

you now have a new sound.

---------------------------------------------------------------------------------------------------------------------------------------------------
Another feature of winterboard is that when you open the app you see a list of options.
In my example I am going to explain how to have the same wallpaper on both the lockscreen and springboard.

When you open winterboard you will see a tab labeled with you theme name and one with the words "User Wallpaper"



In the previous photo you see that my theme is checked. If I leave it like this I will have a different wallpaper on both the lockscreen and springboard.

If you press the "User Wallpaper" tab so it has a check mark too and then press the 3 grey bars and drag it on top of your theme you will now have the same wallpaper on both the lockscreen and springboard.

the one on top overwrites the one on the bottom, even though both have a check mark.



------------------------------------------------------------------------------------------------------------------------
to change you carrier do the following.
all carrier logos are located at the following path:
/System/Library/Carrier Bundles/____.bundle

you will need to open the plist for whatever logo you want to change and get the name.
For at&t it is called: com.apple.ATT_US
there are 2 pngs for each logo a FSO and Default.
add com.apple.ATT_US to /Library/Themes/(theme name)/Bundles

this is what you want:
/Library/Themes/(theme name)/Bundles/com.apple.ATT_US
you will then place your new FSO_CARRIER_ATT.png & Default_CARRIER_ATT.PNG into the com.apple.ATT_US folder
Restart winterboard and you are done
-------------------------------------------------------------------------------------------------------------------------
update 7-30-2009
To change the weather app icon you will need to place a png called "SBWeatherCelsius.png" in the com.apple.springboard folder in your bundles in your theme. 2.0 and up uses this png for its summerboard icon (not the one in the app folder).

to change the ipod icon you have 2 choices.
first you can add "icon-MediaPlayer.png" to the com.apple.mobileipod in bundles
or
second (and this is what I have done) you can split the ipod icon into 2 seperate icons (1 for music & 1 for videos)
You will need this file.
http://rapidshare.com/files/26171988...plist.zip.html

then replace the original plist (backup stock plist) in the MobileMusicPlayer app.

then add com.apple.mobileipod to your theme

you then can add 2 icons called "icon-VideoPlayer.png" & "icon-AudioPlayer.png"

here are some photos of what I have done.

[Talynrider]

Clear and concise, very nice opusandbill! Thank you. This should be stickied because a lot of people are going to want to reference this when they get started.

[LeathaFace]

*bookmarked* info was too good.

[xela.enolam]

Would you mind either attaching a template theme or some screenshots of what the theme consists of? I have seen them made several different ways. I have read Saurik's blog about making Winterboard themes, but people have made them several different ways. Also could you elaborate on customizing UIImages? I am very interested in doing some customizations with those files as well.

[Atomik]

Does anyone know if we can change 'SpringBoard.strings' through WinterBoard? I haven't been able to yet. The file is found in 'root/System/Library/CoreServices/SpringBoard.app/English.lproj' but putting it into 'root/Library/Themes/(theme name)/Bundles/com.apple.springboard/English.lproj' does not seem to work. For now I am just editing the original directly but that goes against the benefits of WinterBoard.

[gauravgiri]

@opusandbill:
hey.. nice tutorial.. much appreciated..
can you please tell how you modified the dialer with Winterboard. i used the UIImages tool in the Winterboard app folder but no images from MobilePhonePackedImages.artwork were there..

[opusandbill]

@opusandbill:
hey.. nice tutorial.. much appreciated..
can you please tell how you modified the dialer with Winterboard. i used the UIImages tool in the Winterboard app folder but no images from MobilePhonePackedImages.artwork were there..

that is actually the dialer I made when I was on 1.1.4, so if you have one that will work on firmware 1.1.4 it should work.

[nickh]

Great guide, only wish i had seen this this morning, would of saved me a good 2 -3 hours.

Nice job.

[aniel1]

I saw one problem or perhaps I am not understanding about navigation bar. When I open app bloomberg to see the index map some how on the lower end i see part of the wallpaper and not the app bloomberg background. Any ideas how to get rid of this.

[hartphoto]

Great tutorial! Thank You.

[briannatn]

How long does it usually take a person to do a theme of their own?

[hartphoto]

How long does it usually take a person to do a theme of their own?

This is entirely dependent on the knowledge of the individual. Someone familiar with the process (and tools needed) starting from scratch, maybe a few hours.

Someone not familiar with the process (and tools required), maybe much much longer.

But, that's part of the fun. Learning it all, using the tools, and then seeing the results on the iPhone is mucho grande satisfying.

[opusandbill]

I saw one problem or perhaps I am not understanding about navigation bar. When I open app bloomberg to see the index map some how on the lower end i see part of the wallpaper and not the app bloomberg background. Any ideas how to get rid of this.

can you please post a screenshot of the app.

thanks

[bobsuruncle]

I'm curious about the transparent text. Your instructions are missing - they're just the steps for the wallpaper repeated.

[Kyle Matthews]

Stickied.

[ean101]

not sure if this is the right place for this...but what if i want to take a theme that i am currently using and make the navagation bar black? ie when I go into the text app or cyndia app, i want the navagation bar to be black. i had this on the "type windows" winterboard theme, however I used a bosspref app to "fix user dir permissions" and now when I use the same theme it comes up blue and then turns to black, how can I make this permanently black like it was before?! oh, and im on 2.0.1, jailbroke obviously.

[kordaemon]

Hey I have literally been searching everywhere, all different popular ipod touch/iphone forums to find the answer to one seemingly simple, yet frustratingly complicating question.

Where can you find the background picture file of the springboard?

I've been trying to change the background picture manually instead of using winterboard for a long time. I've been pointed to the Other.artwork file, I have extracted the pictures out of it, (mind you I am on 2.0.1) and the closest thing that looks like a background picture was the others-393.png file, but oddly the picture's dimensions was a bit off, but i decided to replace it nonetheless. I repacked the Other.artwork file and replaced the one in the ipod. The effect, it didn't change the springboard's background picture and if it changed something else, i've yet to find out.
So I ask this forum, where do you find the file that you modify to change the springboard's background image. Or if there is any other way of changing it other than using winterboard or some theming application, what is it? Thanks for those who choose to answer.

[ean101]

just a note about my text above. can i edit something in the info.plist file??

[opusandbill]

not sure if this is the right place for this...but what if i want to take a theme that i am currently using and make the navagation bar black? ie when I go into the text app or cyndia app, i want the navagation bar to be black. i had this on the "type windows" winterboard theme, however I used a bosspref app to "fix user dir permissions" and now when I use the same theme it comes up blue and then turns to black, how can I make this permanently black like it was before?! oh, and im on 2.0.1, jailbroke obviously.

the latest version has made it very easy to have black navigation bars.
When you open you will see the words "Black Navigation Bars"
1. press bar so you get a check mark
2. press 3 grey bars and drag to the top
3. exit winterboard

after restart (which is now automatic) you should have black bars.

just a note about my text above. can i edit something in the info.plist file??

yes you can and if you are using a mac it is very easy to do with the installed text editor.

just open
change
hit save

Hey I have literally been searching everywhere, all different popular ipod touch/iphone forums to find the answer to one seemingly simple, yet frustratingly complicating question.

Where can you find the background picture file of the springboard?

I've been trying to change the background picture manually instead of using winterboard for a long time. I've been pointed to the Other.artwork file, I have extracted the pictures out of it, (mind you I am on 2.0.1) and the closest thing that looks like a background picture was the others-393.png file, but oddly the picture's dimensions was a bit off, but i decided to replace it nonetheless. I repacked the Other.artwork file and replaced the one in the ipod. The effect, it didn't change the springboard's background picture and if it changed something else, i've yet to find out.
So I ask this forum, where do you find the file that you modify to change the springboard's background image. Or if there is any other way of changing it other than using winterboard or some theming application, what is it? Thanks for those who choose to answer.

the image in the other.artwork file is only for when you have your phone locked.
You can not manually change the springboard wallpaper, you have to use some sort of program.
I am using winterboard to change the wallpaper, you can either add a theme or use the "User Wallpaper" option.

[kordaemon]

I was unaware all the files in the Other.artwork file were for when the iphone is locked (i don't believe it is, as there are files that are probably used elsewhere) but if it is not possible to use the Other.artwork file to change the springboard background would someone mind explaining to me how exactly summerboard or winterboard works; how it changes the springboard background, since if the creators of winterboard and summerboard were able to do it, and make it so everyone else can change the background, why not be able to do it manually without the program. Thanks again for those who answer.