Make and use themes with WinterBoard

Section 11: Simplifying the lock screen

Updated: June 21, 2011

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.

I've seen a few people clean up their lock screens so they could better see their wallpaper image, or to show more information if they are using a program like LockInfo. On first glance, you might think that there is no way to slide to unlock the iPhone since there is no slider in the image on the image on the right. However, it works perfectly fine. The graphics are still there, they are just transparent. There are a several options in this tutorial and I'll try to point them all out. I will cover the iPhone / iPhone 3G and iPhone 3G S first, then show you how to do this on the iPhone 4.

iPhone       iPhone



Should you do this, you should be aware of two drawbacks: when you turn the iPhone off, or answer a call, the graphics you made disappear on your lock screen will disappear on these screens as well. The text messages "slide to unlock", "slide to answer" and "slide to power down" also disappear. This can all be customized however.

iPhone       iPhone




Update As of 4.3.3 firmware Apple has changed some things, again.

If you want to get rid of that tall shaded bar at the bottom of the screen, you need to change the files BarBottomLock.png (1 pixel x 96 pixels) and BarBottomLock@2x.png (1 pixel x 192 pixels). If you don't change both, the iPhone 4 will use the normal sized graphic in lieu of the @2x one.

To get rid of the smaller darker bar (the tray that the slider knob travels within) you need to change the files WellLock.png (27 pixels x 52 pixels) and WellLock@2x.png (54 pixels x 104 pixels). If you don't change both, the iPhone 4 will use the normal sized graphic in lieu of the @2x one. This file used to be called bottombarbkgndlock.png or bottombarbkgndlock@2x.png.



iPhone 3G / 3G S - Step 1.

This theme consists of seven images: bottombarbkgndlock.png (79 by 96), bottombarlocktextmask.png (80 by 32), bottombarknobgreen.png (71 by 47), bottombarknobred.png (70 by 47), bottombarknobgray.png (71 by 47), BarLCD.png (1 by 96), and topbarbkgnd.png (79 by 96).

These are the images.




Download this collection of files. It contains almost everything you will need. Decompress this file and you will be left with a folder.

iPhone



Place the Clear lock screen theme into your iPhone's Themes folder.

iPhone




iPhone 3G / 3G S - Step 2.

Download Lockscreen Clock Hide from Cydia. You will have to respring your iPhone for it to load. It might work right away and hide your clock and date. If it does not, you can manually adjust it.

iPhone



This will install its own menu entry in the Settings application, so make sure you check out the controls there.

iPhone       iPhone





iPhone 3G / 3G S - Step 3.

Launch Settings, go into WinterBoard and activate the Clear lock screen theme.

iPhone



Here are your options to customize this theme:
  • If you want that large shaded gray bar behind the date and time, then remove the BarLCD.png graphic from the TelephonyUI.framework folder that you downloaded from this site.
  • If you want to see any of the original sliders: red (power down), green (answer call), or gray (slide to unlock), then delete the appropriately named graphic from the TelephonyUI.framework folder that you downloaded from this site.
  • Instead of eliminating the slider buttons, you could replace them with the Tap To Unlock Sliders in Cydia.
  • If you want to customize the text messages that were removed go into the SpringBoard.strings file in the en.lproj folder, and edit it with a program like BBEdit. You can make the messages say anything, although you are limited as far as message length.




iPhone 4 - Step 1.

This theme consists of seven images: bottombarbkgndlock@2x.png (158 by 192), bottombarlocktextmask@2x.png (160 by 64), bottombarknobgreen@2x.png (142 by 94), bottombarknobred@2x.png (140 by 94), bottombarknobgray@2x.png (142 by 94), BarLCD@2x.png (1 by 192), and topbarbkgnd@2x.png (158 by 192).

These are the original images.




Download this collection of files. It contains everything you will need. Decompress this file and you will be left with a folder.

iPhone



Place the Clear lock screen theme into your iPhone's Themes folder.

iPhone




iPhone 4 - Step 2.

Download Lockscreen Clock Hide from Cydia. You will have to respring your iPhone for it to load. It might work right away and hide your clock and date. If it does not, you can manually adjust it.

iPhone



This will install its own menu entry in the Settings application, so make sure you check out the controls there.

iPhone       iPhone




iPhone 4 - Step 3.

Launch Settings, go into WinterBoard and activate the Clear lock screen theme.

iPhone



Here are your options to customize this theme:
  • If you want that large shaded gray bar behind the date and time, then remove the BarLCD@2x.png graphic from the TelephonyUI.framework folder that you downloaded from this site.
  • If you want to see any of the original sliders: red (power down), green (answer call), or gray (slide to unlock), then delete the appropriately named graphic from the TelephonyUI.framework folder that you downloaded from this site.
  • Instead of eliminating the slider buttons, you could replace them with the Tap To Unlock Sliders in Cydia.
  • If you want to customize the text messages that were removed go into the SpringBoard.strings file in the en.lproj folder, and edit it with a program like BBEdit. You can make the messages say anything, although you are limited as far as message length.







Return to top of page