Make and use themes with WinterBoard
Section 2: Creating a basic theme
Updated: July 23, 2009
Attention
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.
Step 1.
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).
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.
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. 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 okay.
|
If you go into the Saurik.theme folder you will see several items here. Items in bold
represent folders. Here is the directory structure:
Saurik.theme Bundles com.apple.springboard en.lproj SpringBoard.strings SBDockBG.png (this is the dock image on the SpringBoard) Info.plist Private Plant.png Rock.png UISounds Tock.caf Wallpaper.html 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 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 system graphics.
Step 3.
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 or what?
Ready to change the program icons now?
