Make and manage themes using SummerBoard

intel Mac & PPC





What is a theme? A theme is the graphical "look" of a phone. In the case of the iPhone a theme consists largely of the way the SpringBoard and the dock and all the icons on the SpringBoard look. A theme ultimately involves every single icon being changed, but no one goes to that extent to customize their phone - it's just too many graphics to change. There are just a handful of graphics you can change to create a dramatic look however.

It's not hard to change the look of your iPhone quickly with a couple key programs. You need the Installer, SummerBoard, OpenSSH (if you want to upload your own personal images), and a program to make your graphics with. I use Adobe Photoshop to make my graphics with.

My information in this tutorial comes from the SummerBoard creator's website here. Here are the screen shots from their site to show you a few different examples of what SummerBoard can do. Click the thumbnail images to see the full size picture.

Attention

I will be using Fugu to upload the files in this tutorial. 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 BSD Subsystem, OpenSSH, or BossPrefs (via the Installer) or used Fugu before, then you must read this tutorial first.



You need the following images to make a theme (use as few - or more, as you want) 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).
• Dock.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 you do use your own custom icons. make sure you set the slider for "Theme Icons" to "ON".
  These are the names you must use to replace the original 17 icons: Calculator.png, Calendar.png, Camera.png, Chat.png, Clock.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 go on to replace any other images like the signal strength indicators, battery icons, et cetera. Use my graphics locations page to determine the location of many popular images.

Step 1.

Launch Installer. Press the Install icon and scroll down the list of folders to System. Press it and scroll down to SummerBoard. Install it. Make sure you install version 3.2 or newer. You must turn the iPhone off and then back on again for this program to work when you install it. If you don't your themes won't change.




Here's the icon you use to launch the SummerBoard Preferences program.




If you go back to the list of folders, there is one dedicated to SummerBoard themes. Install away!

Step 2.

Launch Fugu. SummerBoard themes are installed at: /var/mobile/Library/SummerBoard/Themes/

You need to make a folder for each theme you design. If you install themes from the Installer, they will make their own folders. In this case I have many themes in my folder. They were all downloaded from the Instaler. Default is created when you install SummerBoard and will contain any icons you have already changed on the system. before installing SummerBoard. Default is not a colleciton of the default icons per se.




I'm going to make a simple theme. I'm calling it My1stTheme. The full path to this theme is /var/mobile/Library/SummerBoard/Themes/My1stTheme/   To create the folder, click the "New Folder" button. Enter the name and make sure the button "Remotely" is darkened, then click the "Create" button.

Step 3.

Now create your wallpaper image and put it into the folder you just made. Make sure the image is called Wallpaper.png.




Now I want to get rid of the Dock graphic. Here's what the standard dock looks like for reference.




Call the new graphic Dock.png and put it in the My1stTheme folder.





Now I'm going to change the status bar. Here's the one I'll use. Keep in mind you should avoid white or black because it will react badly with some stock system graphics.




Call this graphic StatusBar.png and put it in the My1stTheme folder.




Ok here is what my SpringBoard looks like now. Launch SMBPrefs. Press Theme.




Now select My1stTheme. It will send you back one screen. Scroll down and press Restart SpringBoard and wait about 10 seconds.




You'll be sent back to the slide to unlock screen. Check out your changes.




Don't forget I have a tutorial that teaches you how to change out the application icons also. Check the Hacking menu above. I'll leave the rest of the SummerBoard features for you to explore. There are a lot of settings to play with.