Make and use themes with WinterBoard

Section 2: Creating a basic theme

Updated: August 24, 2010

Attention

If you have not read the two prerequisite tutorials: Using YummyFTP and OpenSSH to create themes, and 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.

Step 1.

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.




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 transparent. Place 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...

Step 2.

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.







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 page to determine the location of some other images.

To learn more about advanced theme techniques, read this page 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...