Make and use themes with WinterBoard
Section 26: Multi bar lock screen

Updated: August 15, 2009

Page 1 of 2

I stumbled onto this theme purely on accident, and boy am I glad I did. A poster by the name of DouweM took a concept of a two bar lock screen and made it even more functional, and rewrote all the code needed to execute it making it more user configurable. This tutorial is directly based on the thread (which is still being discussed actively) here.

Here is an example of what the theme looks like with some of the bells and whistles. There are a lot of options as far as the look is concerned. I will try to touch on these, but I could never create a tutorial to thoroughly cover everything. This tutorial is a stepping stone to the thread I linked to above over at Mac Themes. Everything you see here is on your lock screen! The section headers for e-mail and events expand and collapse when you touch them.




Now this theme is not without its drawbacks.

• When you receive a call, the caller's name, location and picture will replace your information bars. The slide to answer text will also no longer display, but we will be using a different slider (if you want) so it won't matter.
• When playing a song, the album art will overlap the information bar(s).
• The Sync in Progress text will overlap the bars. The message slide to cancel will be hidden.
• The slide to cancel text will be shifted to the right for alarms. This text can be removed.

There are several things you will need to manually configure. This is not a straight download from Cydia and a push of a button with WinterBoard. It's a little more complex than that. I'll guide you through the process here.

Step 1: Installation

Launch Cydia and install WinterBoard.




After it has installed and you have rebooted, launch Cydia and add david.ashman.com/beta as a source. Then install Lockscreen Info.




This program adds a control panel into the Settings application where you can configure the program. Note my settings!




Launch Cydia again and add cy.sosiphone.com as a source. Then install StatusNotifier.




This program adds a control panel into the Settings application where you can configure the program.









Launch Cydia again and install Lockscreen Clock Hide. Your clock, and date line will be hidden once the SpringBoard restarts.




This program adds a control panel into the Settings application where you can configure the program. Note my settings!




Launch Cydia again and install Lockscreen Dim Delay Control. This is so the iPhone has a longer period of time to load all the information needed, and you have longer to read it. It is adjustable from 1 to 60 seconds.




For the last time, launch Cydia and add cydia.spiqr.nl as a source. Then install MultiBar Lockscreen.




Launch WinterBoard and select MultiBarLockscreen. You should not select LockInfo.




Press Home, let WinterBoard do its magic and this is what you will see next. On the left the iPhone is plugged in, on the right it is not. I will have a couple battery themes where I've positioned the battery much lower on the screen so that you can read your information bars more easily (obviously it is not a problem here, wait until you add more bars). On the right you can easily change wallpapers through your Settings application in the Wallpaper menu. This graphic is a tap to unlock button, which you can substitue for a slide to unlock graphic that I will cover later.




This completes the basic installation.

Step 2: Customization

In order to customize this theme you will need OpenSSH installed on your iPhone, and an SSH client (I'll use Fugu, other programs like Transmit will also work) installed on your Mac. If you don't know anything about SSH, read this tutorial.

Once you have SSH installed, log into the iPhone and go to your /Library/Themes.xxxxxx (where .xxxxxx is your unique string of alphanumeric characters). Double click on the MultiBarLockscreen folder.




Copy the Settings.js file to your desktop. This is the most important file to edit to make changes to this theme. I use BBEdit as my text editor. You can download a trial version of it here.

Section A - Some general settings

I'm going to make several changes at once, so just compare your Settings.js file to mine pictured below. I don't want the words Unlock iDevice in my tap to unlock bar, so I've removed the text from var LockTextLeft and var LockTextRight. I want the larger clock, so I set var UseBigClock to true. I don't like the quote widget, so I set var EnableQuoteWidget to false. I have no clue what FMyLife is (it sounds like another quote widget to me) so I left it set to false. Save the changes to your file and reupload Settings.js to the iPhone. Then, either use SBSettings to respring the SpringBoard, or launch WinterBoard and deselect then reselect a theme and press Home and it will respring for you.




Here's what my screen looks like now.




Note, when Wednesday rolls around this is going to happen...




There is only one solution. Reduce the size of the text in the date line.

If you go to MultiBarLockscreen/Bundles/com.ashman.LockInfo/Private/Javascript and download the General.js file you can edit this line: document.getElementById('ClockTime').style.fontSize = '28px';    I found 26px solved my problem. The text was a little crammed in there, so I went down to 24 pixels. You could go smaller to suit your taste.




To change AM or PM to lowercase letters, go to MultiBarLockscreen/Bundles/com.ashman.LockInfo/Private/Localizations, and download the en.js file to your desktop to edit. Look for the line: var ClockTimeFormat = "[g]:[i] [A]";   If you change the capital A to a lower case a, save the file and reupload it to the iPhone and respring, it will change it. If you do make changes, you might want to make the same changes to var NotifierTimeFormat. Take a look at the other examples below this which are commented out, to see what other formats you can put your date string in.




Here's both the changes.