Make and use themes with WinterBoard
intel Mac & PPC
Updated: February 27, 2009
Section 2: Creating a basic theme.
First we need to install WinterBoard. Launch Cydia.
Press the Sections button at the bottom, and press All Packages. Scroll down the list and press WinterBoard.
Note: WinterBoard is updated often. There is no way this tutorial can be updated as frequently to reflect
the current version of the program, including all the changes that would appear in my various sections, and
screen shots. Your mileage may vary.
Press the Install button. Once it has finished installing, press the Reload SpringBoard button.
I will be using Fugu to upload the files for this tutorial. Fugu can be used to transfer or remove any files
you want to your iPhone, provided you already have SSH installed. If you have not installed OpenSSH, or used
Fugu before, then you must read this tutorial first.
Should you decide to directly replace a graphic on the iPhone, always make a backup
copy of the file you intend to replace first. If you should make a mistake, you can always revert to the original
files. Do not destroy/overwrite original system files (without a backup), or a restore may be in order!
Since we are using WinterBoard, you won't have to worry about this.
You will need the following items to make the basic theme I am going to demonstrate. They will go within your custom theme folder.
StatusBar.png (this is the staus bar image where the carrier name, Wi-Fi icon, time and battery strength icon appear, it is optional
and is 320x20. It has no alpha (transparency) set.
Wallpaper.png (this is the image that covers the SpringBoard, and is 320x480 with no alpha).
SBDockBG.png (this is the dock background image where the phone, mail, safari and ipod icons reside, it is 320x91 with alpha).
Application icons (60x60, PNG with alpha, these icons get placed in the YourCustomTheme/Icons folder).
You don't have to swap out the stock icons if you don't want to. If no icons are present in this folder, then the stock icons
will be used
Note: If you replace any graphic with your own custom graphic, make sure you are saving the file as a png,
and that it retains the same dimensions as the original. You can try experimenting with dimensions, but
your restults may be mixed.
These are the names you must use to replace the original 20 icons: AppStore.png Calculator.png, Calendar.png, Camera.png,
Chat.png, Clock.png, Contacts.png, iPod.png, iTunes.png Mail.png, Maps.png, Notes.png, Phone.png, Photos.png, Safari.png, Settings.png,
Stocks.png, Text.png, Weather.png, YouTube.png. As long as you name your icon the exact same thing as the name of the
application, you can replace anything.
You can replace any other images with WinterBoard, by uploading the new graphics using SSH, like the signal strength
indicators, battery icons, et cetera. These images will go into your theme folder, not to the original images' location.
WinterBoard will "map" these images, so to speak, to take the place of the original images when you use your theme.
Use my graphics locations
page to determine the location
of many popular images. I also have a tutorial on changing other graphics (via directly overwriting the original images)
This is an option if you would like
a simpler method of replacing images, and do not intend to use Cydia or WinterBoard.
To learn more about advanced theme techniques, read
from Saurik's site (the creator of Cydia and WinterBoard).
I am only going to scratch the surface of what WinterBoard can do.
A reader by the name of "Leram84" over at the ModMyi.com forums, made a very helpful post that will
assist anyone in creating their own theme. What he did was compile all the graphics and audio
files that can be themed with WinterBoard. This is a stock iPhone theme, with no modifications.
You can use this as a template to create themes with. All you have to do is replicate the folder
structure to drill down to where the specific graphic or audio file is, then place your custom file
into a mirror image of the folder. You can then systematically create your own theme. You can read the original post
I'm also hosting the file that Leram84 created
Launch Fugu. WinterBoard themes should be installed at: /private/var/stash/Themes.xxxxxx
Where .xxxxxx will be a series of random letters and numbers. On three different installs, my folders were called
Themes.rUGqw2, Themes.shiHte, and Themes.3Oxlbn. Note: You may see instructions telling you to place your themes
in /Library/Themes. This is symlinked to /private/var/stash.
You need to make a unique folder for each theme you design. If you install themes from Cydia, they will make their
own folders. Note: If you find a theme on Cydia that you like and want to learn how they did it, look in this themes
folder for it. Then you can see exactly what folders, et cetera they used to tweak a specific graphic(s) with.
Saurik.theme is created when you install WinterBoard. Note: This is the only time I will show the
entire program window for Fugu, in the interest of having a faster loading page.
If you go into the Saurik folder you will see several items here. Items in bold represent folders.
Here is the directory structure:
SBDockBG.png (this is the dock image on the SpringBoard)
In this case, the Saurik theme uses the Wallpaper.html file to "toggle" the two images contained in the Private
folder: Plant.png and Rock.png. If you open the .html file and examine the source code you will see how this is
done. I am not going to provide any lessons in HTML or CSS scripting. There are plenty of sites you can learn this
at. Using a .html file you can easily achieve what is accomplished with the Saurik theme. The Tock.caf symlink is
just to demonstrate how an audio file would be replaced. Just name your file the same thing as the file you wish
to replace and it will be handled when using this theme.
Note: You do not have to use a .html file if all you want is a static image for your wallpaper.
I'm going to make a simple theme. I'm calling it My first theme. It will be placed in the same folder as the Saurik folder.
To create your folder, click the New Folder button. Enter your name and make sure the button Remotely is darkened, then
click the Create button.
You should now see your new theme folder. Double click it to go into it.
Create your wallpaper image and place it into the folder you just made. Make sure the image is called Wallpaper.png
Click the New Folder button, and name it Bundles Make sure it is being created Remotely, then click the Create button.
You should now see this. Go into the Bundles folder.
Click New Folder button, and name it com.apple.springboard Make sure it is being created Remotely, then click the Create button.
You should now see this.
Go into the com.apple.springboard folder. Place your new dock image, called SBDockBG.png here.
Go back to your My first theme folder (or whatever you named it), by clicking the blue up arrow to the right of your
current directory folder. Create your status bar image and copy it into this folder. It must be called StatusBar.png
Keep in mind you should avoid making this graphic solid white or black because it will react badly with some stock
At this point you can check out how your theme is coming along. Launch WinterBoard and select your
theme's name. You should see your SpringBoard reset and you will be sent back to the slide to unlock
screen. You should see a different status bar, dock, and wallpaper image.
Ready to change the program icons now?