Make and use themes with WinterBoard
Updated: August 24, 2010
Section 2: Creating a basic theme
If you have not read the two prerequisite tutorials:
Using YummyFTP and OpenSSH to create themes,
Understanding a theme's directory structure,
then you should prior to performing any of the instructions in the following tutorial.
I am updating all WinterBoard tutorials to reflect the differences in creating graphics for the
iPhone 4, and iPhone 3G / 3G S. It's important you pay attention to file names (they are different,
the iPhone 4 uses an @2x designator just before the .png extension, and dimensions (iPhone 4
graphics are generally double in size from their iPhone 3G / 3G S counterparts). When creating
iPhone 4 graphics you should refer to the original graphic on the iPhone 4 or in its firmware file
to verify your image is the correct size.
Let's make a simple theme. Right click your desktop and make a folder called My first theme.
Find an image you'd like to use as a wallpaper. I'm going to use simple colors, you can use
anything you'd like however. Your wallpaper must be 640 pixels in width by 960 pixels in height
for the iPhone 4, 320 pixels in width by 480 pixels in height for iPhone 3G / 3G S.
Name this graphic Wallpaper.png (do NOT use the @2x designator for the iPhone 4, it is not necessary
in this rare case) Place this file inside the My first theme folder.
This is the iPhone 4 wallpaper.
This wallpaper is for the iPhone 3G / 3G S.
Next find an image you'd like to use as a dock. This image must be 640 by 90 for the iPhone 4, or
320 by 45 for the iPhone 3G / 3G S.
I'm placing my examples in a black table cell so that you can grab them if you'd like. Name this
file SBDockBG@2x for the iPhone 4, or SBDockBG.png for the iPhone 3G / 3G S.
Create the folders My first theme/Bundles/com.apple.springboard Place your SBDockBG@2x.png
or SBDockBG.png file inside com.apple.springboard.
I do not like the dock reflection that is built in by default. To eliminate it, you need a file
called SBDockMask@2x.png for the iPhone 4, or SBDockMask.png for the iPhone 3G / 3G S. This image
must be 118 by 120 for the iPhone 4, or 59 by 60 for the iPhone 3G / 3G S. Here's mine, it's
this file into com.apple.springboard.
I also want to change the status bar at the top of the screen. Currently this can not be done on
the iPhone 4 as WinterBoard has not been updated to replace these new graphics. The iPhone 4 will
allow you to change the status bar with the lower resolution graphics however. They just may not
look that good. I will provide instructions for the iPhone 3G / 3G S.
There are three types of status bar: Black_Base.png, Silver_Base, and Translucent_Base.png.
Depending on what application you are in a different color bar will appear. These images are all 320
by 20. Place these three graphics in My first theme/UIImages Those are capital letter "eyes"
not Ls, it is short for User Interface Images. I'm making mine yellow just so they stand out...
Launch YummyFTP. WinterBoard themes should be installed at: /Library/Themes. You can also get
there via /private/var/stash/Themes.xxxxxx Where .xxxxxx will be a series of random
letters and numbers. In future tutorials I will refer to this as the iPhone's Themes folder.
You should 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,
subfolders, and specific files they used to change things.
Note: This may be the only time I show the Themes folder with all the default WinterBoard themes
inside it. The various folders you see below (and on the right side of the program screen) are
installed when WinterBoard is installed. I normally delete these as I don't use them. It also helps
to reduce the screen clutter in my screen shots and inside the WinterBoard application where you
choose what theme you want to display. The left side of the screen is my users directory on my Mac.
You can drag and drop files from the left to the right and vice versa. You can also drag files
directly from your desktop to the iPhone as well.
Copy your My first theme folder from your computer to your iPhone's Themes folder.
Launch Settings, then press WinterBoard, press Select Themes, then press My first theme. It should
be the only item in the list with a check mark next to it. It should also be at the top of the
list. Then press the home button.
Here's what it looks like on my iPhone 4...
...and on my iPhone 3G.
You can replace most any other image with WinterBoard, by uploading the new graphics using SSH.
These images will go into your theme folder, and 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 some other images.
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 in
this series of tutorials. There is no way I could cover everything. There are just too many
graphics out there...