Saturday, May 08, 2010

Tutorial: How to Change the Charging Battery Icon on a Jailbreak iPhone with Winterboard

Here's how to make a custom icon to replace the big green battery that displays on the lock screen when your iPhone is charging. This tutorial assumes that you have Jailbreaked your phone and have installed OpenSSH and WinterBoard on your phone (via the Cydia app) and have an SSH client installed on your PC/Mac (such as WinSPC for Windows or Terminal for Mac/Linux).

Step 1 - Create the Theme Directory

  1. Open an SSH connection from your PC to your iPhone and navigate to the root directory

  2. Navigate to Library/Themes. Note that the Themes folder is actually a shortcut, and will take you to the following physical directory: /private/var/stash/Themes.XXXXXX (XXXXXX is a series of letters and numbers that differs on each phone).

  3. Within the /private/var/stash/Themes.XXXXXX folder, create a new folder and name it whatever you want your theme name to be, ending with .theme, for example My Custom Battery.theme

  4. Click into the folder you just created and create a folder named Bundles

  5. Click into the Bundles folder and create a folder named

Step 2 - Create Images

The charging battery icon is actually a series of 17 .png files. As the phone charges, the phone displays the proper image.

  1. Find or create a series of 17 images. If they are not already in .png format, save them as such using your favorite image editor such as Photoshop, GIMP (free), or Aviary (free).

  2. The image size of the files should be 264 pixels wide by 129 pixels high. This will ensure that the icon is properly centered and sized on the screen.

  3. The files must be named in series, from BatteryBG_1.png to BatteryBG_17.png

  4. If you do not want a reflection of your icon to show up underneath it on the lock screen, create a fully-black .png file that is 1 pixel wide by 129 pixels high and name it BatteryReflectionMask.png

Step 3 - Move File and Use Your Theme

  1. Using your SSH client, copy all of the .png files into the
    /private/var/stash/Themes.XXXXXX/>My Custom Battery.theme/Bundles/ directory you created in step 1.

  2. Open the WinterBoard app on your iPhone, and go to the Select Themes section. You should see your new theme at the top of the list.

  3. Select the theme and close WinterBoard. This will cause your phone to respring. After it does, your new theme is in use.

  4. Plug your charging cable into your phone and you'll see your new battery indicator.

  5. Enjoy


BARK said...

My good Sir,

After searching for two hours how to do this using installer and Customize, I found your article. It was easy as pie and it worked a charm. Excellent tutorial! Many thanks!

Unknown said...

I created a battery png set and installed. now I have no battery on the lockscreen when charging. any ideas?

jeff said...

Levi, the only things I can think of are to double-check the following things:
1) Are the images 264 pixels wide by 129 high (and are they in .PNG format)?

2) Are your directory names spelled correctly?

3) Are you using a reflection mask? If so, remove it and see if that makes a difference.

Without seeing everything first hand, it's hard to tell exactly what may be going on. If posting additional information would help, feel free to do so.

Post a Comment