Make and use themes with WinterBoard
Updated: July 23, 2009
Section 2: Creating a basic theme
I will be using Fugu to upload various files throughtout these tutorials. These instructions can be
applied to any files you want to add 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).
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
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
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.
Launch Fugu. WinterBoard themes should be installed at: /private/var/stash/Themes.xxxxxx
Where .xxxxxx will be a series of random letters and numbers. Note: You may see instructions
elsewhere telling you to place your themes in /Library/Themes. This is symlinked to
/private/var/stash/Themes.xxxxxx. My .xxxxxx may change from tutorial to tutorial as I often use
multiple iPhones to create the various tutorials with. Don't worry about this.
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 created 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), or behaviors with.
Note: This is the only time I will show the entire program window for Fugu, as it is a large
screen shot to keep showing again and again. This also may be the only time I show the Themes.xxxxxx
folder with all the default WinterBoard themes inside it. The various folders you see below are
installed when WinterBoard is installed. I normally delete these themes except for User Lock
Background, as I don't use them to reduce the screen clutter. All I'm getting it is that your
Themes.xxxxxx folder may have more in it than what I'm showing after this screen shot. That's
If you go into the Saurik.theme 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)
Note: en.lproj has an L in it, that is not an i. It's short for English Language Project. Other
languages use other abbreviations, for example Portuguese uses pt.
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.
Now that we've seen how one theme was created, let's make our own. I'm calling this My first theme.
It will be placed in the same folder that the Saurik folder is in. To create your folder, click the
New Folder button. Enter your name and make sure the Remotely button is selected, then click the
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
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 system graphics.
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. Was that simple
Ready to change the program icons now?