Jailbreak and unlock the iPhone - Make and use themes with WinterBoard

Make and use themes with WinterBoard
Section 27: Gruppled theme

Updated: February 14, 2010

Page 1 of 3

I came across this theme when I discovered the Multi Bar Lock Screen theme. This is a more advanced version of that theme as not only does it provide you with additional lock screen information, but it has expandable sections to include more detailed information. It also comes with a secondary art theme, which replaces an extensive amount of graphics that you may like.

The original thread discussing this theme is at MacThemes here.
The thread discussing Lockscreen Info (required to use the Gruppled theme), is here.
There is a thread discussing how to customize Lockscreen Info by the program's creator David Ashman, here.

Here are a few examples of the theme. They all appeared in the first thread I linked to above.

Step 1: Installation

Here is how to set up the Gruppled theme. Launch Cydia and search for LockInfo. Install it. Press Reload SpringBoard when it has finished. Note: This program is updated very often. The version available may be newer than the screen shot I have posted.

This will also create a control panel in the iPhone's Settings application. Note: This program is available as a trial for 14 days. After that you have to purchase it. I receive nothing from the sale of this program.

Make sure to use this for configuration later on. These are my settings throughout this tutorial unless noted otherwise.

Install Lockscreen Clock Hide. When the iPhone reboots your lock screen will now look like this.

This program will also create a control panel in the iPhone's Settings application. Make sure to look at this for configuration later on. These are my settings throughout this tutorial unless noted otherwise.

Also on Cydia, install Lockscreen Dim Delay Control. This program allows you to drag a slider to set how long your lockscreen stays illuminated - from 1 to 60 seconds. All the better to read everything this theme will display.

Download the original Gruppled theme files here. The author does not maintain these on Cydia, so it is best to download them from his site.

Gruppled Art theme (custom sliders, numerous assorted replacement graphics)
Gruppled LockInfo theme (controls all menus on screen)
Tea LockBackground (only if you want a constant slideshow of images blending into each other based on time of day (which will hide the main charging battery graphic too). If all you want is your own static wallpaper then do not install this.

Note: Since these files are hosted on a site that limits Gruppler's bandwidth and is unavailable from time to time, I've decided to host these files. They haven't been updated in a long time, so you may want to check the links above to make sure you are getting the most recent version.

Decompress the downloads and place these three themes in to the /private/var/stash/Themes.xxxxxx folder on your iPhone. Don't have this folder? Then install WinterBoard via Cydia. Don't know how to place the files in this folder? Read this tutorial. From root, just double click on Library, and then Themes.

Launch WinterBoard and activate the Gruppled Art Theme, Gruppled LockInfo theme, and the Tea LockBackground theme. You should have your themes arranged in the same order as I do. Here is what the theme looks like in its default state. The wallpaper image may be different depending on what time of day it is. You may or may not have events listed in your Calendar section.

This completes the basic installation for the Gruppled theme. I am now going to demonstrate the changes I made to configure the theme the way I wanted. You can pick and choose what steps of mine you'd like to follow to come up with your own combination of course.

Step 2: Customization

The single most important file to customizing the Gruppled theme is called config.js. Before you can get to that file, and all the others, you need to rename the theme to remove the .theme extension so that it will behave like a regular folder. Just so you know, themes do not have to have the .theme extension to function correctly in WinterBoard.

Click on the file name so that it becomes editable. Delete the .theme portion and press return. The Mac will prompt you to confirm this change. You now have a normal folder to work with.

Now go to Gruppled LockInfo/Bundles/com.ashman.LockInfo/config.js

I would edit the downloaded file first, then upload it to the iPhone to check your work. This way you will always have a backup of what is on your iPhone. I use BBEdit as my text editor. You can download a trial version of it here. Windows uers you can download Notepad++ for free here.

Section A - General settings

The first thing you should do is set your language. This is at the line var language = "en"; en is short for English.

A reader contributed an already edited Dutch language file. You can download it here.

Next decide which information sections you want displayed on your lockscreen. Your choices are: Clock, Weather, Mail, Calendar, Calls, Voicemail, and SMS. You can also change this order by rearranging the items in the list. Put two backslashes in front of any section you don't want displayed - I chose SMS as I never text. I kept my order on everything else the same. Note: read this file carefully, there are options that I will not be covering with graphic examples.

Upload the config.js file back to the iPhone and respring (I use SBSettings to do this, you can also use WinterBoard to do it, by pressing any theme name and then pressing the Home button) to check out your changes. There is a bug with 3.0 firmware where the status bar disappears. If you can't launch SBSettings because of this, then click your Sleep/Wake button, press Home and the status bar will reappear. There is now a clock bar on my screen. Press this bar and the calendar drops down! Excellent.

Other options in this general settings section include making the clock text and date match the rest of the text (smaller), turning off the arrow graphics (for the drop down menus), turning off the drop down calendar, and choosing which day of the week to start your calendar with. Don't be afraid to experiment!

While I now have a clock enabled, it doesn't tell me if it's a.m. or p.m. This is an easy fix. Go to the Gruppled LockInfo/Bundles/com.ashman.LockInfo/strings/en.js file. If you are in a non-English speaking country, then substitute en.js for your country abbreviation, i.e. Spain would be es.js.

If you want a.m. and p.m. in lower case letters, and with a space between them and the time, then change this section like so:

Then upload this file to your iPhone, at the same location. You can read more about formatting the date line at the PHP.net website here. Respring the iPhone and there it is.

Section B - Setting your weather location(s)

Unless you happen to live in Blacklick or Columbus Ohio, then you probably want to change where you see the weather forecast from. You can list multiple cities, or just one. There are a lot of things to configure in this section. Compare your file to my edited file below.

I only want one zip code checked, so I substitued mine, and removed the second zip code from the list. If you want to check more than one zip code, you may want to set var mainHeaderWeather to false. Doing this will display the word weather for the section header, instead of just duplicating the temperature and conditions from the first city in your list. The other critical item here is what scale do you want to use, Farenheit or Celsius? Change this value here: var isCelsius = false;

Other options in this weather settings section include how many days to forecast, showing the cities' name in the header, using "real feel" temperatures, how to separate the high and low temperatures, which icon set to use for weather graphics (built in choices are tick and klear). I have added a third set of icons called grzanka. You can also hide the refresh icon (yes, pushing it actually works), set the update interval for the forecast and set a maximum failed attempt counter for the weather. Yahoo weather is broken, so leave the Apple setting alone.

If you want to customize font faces, styles and sizes, then you'll want to edit the style.css file found at Gruppled LockInfo/Bundles/com.ashman.LockInfo/css/

If you want to use the grzanka icons (I can't remember where I found them), you can download them here. Install this icon set in Gruppled LockInfo/Bundles/com.ashman.LockInfo/Icon Sets.

Respring, and now I have a Weather section header, and my city listing. I also have a different icon set.

Section C - Customizing the section headers

I wanted my section headers (Calendar, Weather, et cetera) aligned left, instead of centered. To change this, go to Gruppled LockInfo/Bundles/com.ashman.LockInfo/css/structure.css. In the .header section, change the text-align: to left.

I then changed the icons for the sections header (Calendar, Weather, et cetera). You can download these icons here.

The icons are: calendarh.png, callsh.png, mailh.png, smsh.png, voicemailh.png, and weatherh.png. I've already set alternate graphics to be the default in this set. So the original icons have a 2 appended to their file names. Other alternate graphics have a 3 appeneded to them and so on. Switch them as you like. These icons are located in Gruppled LockInfo/Bundles/com.ashman.LockInfo/images. I have included alternates for other icons that I haven't mentioned in this folder also, so experiment.

Respring and here's the new look.

Section D - Removing relative time

Now that my section headers are the way I like them, when you open the mail and calls and voicemail sections, they will tell you not only when someone mailed you or called, but how long it's been since they did. I find this information to be unnecessary, so I removed it.

Once again, edit our friend the config.js file, and set var displayRelativeTimes to false