Make and use themes with WinterBoard
Updated: February 14, 2010
Section 27: Gruppled theme
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
- The thread discussing Lockscreen Info (required to use the Gruppled theme),
- There is a thread discussing how to customize Lockscreen Info by the program's creator David
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
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
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
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
Windows uers you
can download Notepad++ for free
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
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
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
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
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.
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
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
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
Here's my before and after.