Make and use themes with WinterBoard

intel Mac & PPC

Updated: February 27, 2009





Section 2: Creating a basic theme.



Step 1.

First we need to install WinterBoard. Launch Cydia.

iPhone       iPhone



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.

iPhone       iPhone




Press the Install button. Once it has finished installing, press the Reload SpringBoard button.

iPhone       iPhone



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) here. 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 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.

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 here. I'm also hosting the file that Leram84 created here.




Step 2.

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.

iPhone



If you go into the Saurik folder you will see several items here. Items in bold represent folders. Here is the directory structure:

Saurik.theme
      Bundles
         com.apple.springboard
            SBDockBG.png (this is the dock image on the SpringBoard)
      Info.plist
      Private
         Plant.png
         Rock.png
      UISounds
         Tock.caf
      Wallpaper.html

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.

iPhone



You should now see your new theme folder. Double click it to go into it.

iPhone



Create your wallpaper image and place it into the folder you just made. Make sure the image is called Wallpaper.png

iPhone



Click the New Folder button, and name it Bundles   Make sure it is being created Remotely, then click the Create button.

iPhone



You should now see this. Go into the Bundles folder.

iPhone



Click New Folder button, and name it com.apple.springboard   Make sure it is being created Remotely, then click the Create button.

iPhone



You should now see this.

iPhone



Go into the com.apple.springboard folder. Place your new dock image, called SBDockBG.png here.

iPhone



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.

iPhone



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.

iPhone       iPhone

iPhone






Ready to change the program icons now?



Section 3: Changing program icons.





Return to top of page