Theming with WinterBoard

[HackThatPhone]

I just finished creating a tutorial for the use of WinterBoard in both using a stock theme already provided on Cydia, and for creating a highly customized theme. I'd appreciate any input on improving this tutorial. I originally drafted a much more basic tutorial, but after receiving some input from Saurik, I decided to expand it more to show off some of the advanced features of WinterBoard. WinterBoard is far superior to SummerBoard.

Being that I've been hacking on the iPhone since day one, sometimes I'm a little too close to the material to stand back from a guide to be objective about its contents and completely provide what a less experienced modder is looking for.

Let me know what you think.


http://www.hackthatphone.com/3x/themes_with_winterboard.html

Link updated as we are now on 3.x firmware. There are now 29 different tutorials in this section of my site alone. Theming is fun! Check out Section 26 and 27. Those are very cool themes that greatly expand the lockscreen's capabilities.

[Spoon]

Thanks so much! I think people really appreciate this kind of thing. I'll definitely have to check it out.

What's the difference between this and SummerBoard?

[HackThatPhone]

To read more about WinterBoard, visit this link:

http://www.saurik.com/id/9

You can use html, like Saurik uses in the default theme with WinterBoard to rotate your images, dissolve them et cetera. You can also replace any graphic on the phone with a theme without replacing the original images, or using messy backup scripts that rename the images to something else then flip them back.

[qwik3r]

You've done a great job with your tutorial however you really need to do a more advanced one too. Something that indicates how to change the battery, the sliders, a tap to unlock, skin safari, the phone etc etc. If you know how to even do this hehe, but I'll assume you do. Your tuts are great. Thanks!

[deise boy]

dude this is much appreciated and liked by all no doubt

so i thank you for your work and persistance with this ..
whats the name of the theme that looks like a chocolate vending machine thats awesome man .. how you think of that ..

[HackThatPhone]

I appreciate that input. If you know the path to the specific graphic you want to change, then it's the same process as I've already demonstrated for the other graphics. You make the similar folders and application folder and then insert those graphics to be swapped out in that.

Keep in mind, there is a link in that guide to a basic graphics directory listing (which I don't think you looked at) where I already show the battery graphics, the three slider buttons, et ceterta, and their paths. This page is here http://www.hackthatphone.com/20/graphics_locations.html You mentioned changing out the battery graphics, well those live in SpringBoard.app. All you do is create an/System/Library/CoreServices/SpringBoard.app folder and insert your properly named battery images there. I can certainly demonstrate all this, but it's going to turn into a ten page tutorial pretty quickly. My tutorial is just to give you the foundation of creating a theme. It's the same principle just repeated for all your custom graphics.

If someone wants to poke around and determine the path for all the other graphics I can certainly add to my current list, and show what the original graphics look like so that you will know what you will be changing. I don't have that kind of time to be doing this myself however.

If you download someone's theme from Cydia you can also SSH that off the phone to analyze how they did it. You can then see the directory structure you must mimic to do it.

[HackThatPhone]

I've made a massive update to this tutorial to reflect the most recent version of WinterBoard as there are a few changes.

I have also expanded the tutorial with more examples of graphic swaps, and I intend to add a few more things to it like changing out some other icons and system sounds. I'd appreciate any input for what YOU think should be added to this tutorial.

[Andy]

Hi,

I have a question regarding skinning for Winterboard, first of all congrats on the tutorials they are really a good help.

So my question is about the wallpaper on the iPhone, is there a way to define a wallpaper in a winterboard theme and if yes how do I do that?

I am not talking about the background, that is the one with the icons on top of it, I am talking about the wallpaper where you have to slide to unlock your phone.

Any help on this would be greatly appreciated.

[HackThatPhone]

I tried to change it using WinterBoard and it didn't work. The images live in /private/var/stash/Wallpaper.

You can press Settings>Wallpaper to change them manually.

Maybe someone knows, otherwise the functionality may not be there.

[HackThatPhone]

I just added section 13 to this tutorial. It's about having a clean(er) looking lock screen. If anyone knows how to reposition and/or eliminate the clock and date, I'd love to hear from you.

This specific section of this tutorial is here:

http://www.hackthatphone.com/20/themes_with_winterboard_section13.html

[AzelisWolf]

Okay I've got a question. You say a few times to make sure any replacement graphics are exactly the size of the ones being replaced. What happens if they're larger or smaller? Perhaps it's a useful effect?

[HackThatPhone]

Experiment and find out. I don't have the time to do this and report on maximum file sizes, etc.

[bitSplit]

Okay I've got a question. You say a few times to make sure any replacement graphics are exactly the size of the ones being replaced. What happens if they're larger or smaller? Perhaps it's a useful effect?

Actually this can be a very useful effect.

For example, in Calculator.app, landscapeDisplayBackground.png is 1 x 60 and gets stretched across the display (it is used for both, landscape and portrait.) If you replace it with a 320 x 89 image, you have a picture as LCD display, not just a uniform bar - take a look at an example at http://iFuntastic.com/Examples.html#Calculator.

Mark is right, though, experiment!
There are delicious Yesss!' moments to be had :-)

[macplace]

In the Make and use themes with WinterBoard tutorials it mentions: You should be at your Themes.xxxxxx folder.
Does this mean that you should be within the folders of the theme that you are using on the iphone.
The theme I am using does not have a folder called bundles. Should I create one?
I know that I access the iphone using an SSH client but I'm not sure what, You should be at your Themes.xxxxxx folder actually means.

[HackThatPhone]

To avoid the most confusion, take a look at the picture in the tutorial. Themes.xxx folder is where all themes are placed together. There are many there by default when WinterBoard is installed.

If you don't have a folder you need then yes, create it.

Here is an example of this folder:
http://www.hackthatphone.net/gif3/356.gif

[macplace]

Thank you for your very quick reply.
The .gif file 'Here is an example of this folder' that is attached to your reply will not open on my computer.
Could you please, please post again with the file as a .jpg which may allow me to view the file.
Thank you again.

[HackThatPhone]

Read the tutorial then.

[macplace]

Read through the tutorial again and this time it all clicked. Completed the changes within the phone, thanks again.

[egk69]

I just finished creating a tutorial for the use of WinterBoard in both using a stock theme already provided on Cydia, and for creating a highly customized theme. I'd appreciate any input on improving this tutorial. I originally drafted a much more basic tutorial, but after receiving some input from Saurik, I decided to expand it more to show off some of the advanced features of WinterBoard. WinterBoard is far superior to SummerBoard.

Being that I've been hacking on the iPhone since day one, sometimes I'm a little too close to the material to stand back from a guide to be objective about its contents and completely provide what a less experienced modder is looking for.

Let me know what you think.


http://www.hackthatphone.com/20/themes_with_winterboard.html

Hi, I read one of your tutorials:
(this one>) http://www.hackthatphone.com/20/themes_with_winterboard_section2.html

But I kinda Got stuck, when you start working on "FUGU" cause as I understand thats for Mac, and I have a Windows PC:(, I try a FTP program (dont remember the name) but I couldnt connect to the phone, it keeps getting a error...

what program can I use to follow your tutorial

Thanks, I apreciate your Help
Im looking foward to do everything on the Tut...
Carlos

[HackThatPhone]

WinSCP is an EXCELLENT ssh program for Windows and it's free!

[X UND3RCOV3R X]

WinSCP is an EXCELLENT ssh program for Windows and it's free!

You Can Download It At www.download.com or www.cnet.com :)

[X UND3RCOV3R X]

I will post an exact link up in a minute

[X UND3RCOV3R X]

Get It from www.brothersoft.com

Here is The LINK

http://www.brothersoft.com/winscp-20706.html

Good luck :)

[egk69]

ok ,winscp, work perfectly

So now I know a few things, but I have one question or a few, hehe

1- Is it possible to change the BOOKMARKS icons (the bookmarks i've saved on the springboard) how do I do it??, is it the same as changing apps icons?

2- how or were I can find all the OEM iPhone Skins?, cause i think i found those on the Phone, copy to my PC, but when I try open it, it wont let me

THANKS

[HackThatPhone]

The bookmark icons are created by Safari. I think that is what you are referring to. I have no idea where those are made, let me know and I'll make a guide on how to do this.

There are no OEM skins, which is the whole reason for WinterBoard being created in the first place.

[egk69]

Ok, I found how to make the Bookmarks Icons, simply make one in photoshop and name it what ever the bookmark is called, and place it on the same folder you put the rest of the sprinboard icons, and Thats it!!, very good, im loving this Freaking iPhone!!

About the OEM skins, what I try to said was, I want to find all the OEM skins, themes, icons, everything, so I can modify those. The iphone should have those somewere...

[HackThatPhone]

Cool, I'll look into covering this bookmark thingy


As far as a stock icons list for the phone, no one has ever compiled a complete collection. I have a basic reference page (with the actual icons that have already been decrypted) here:

http://www.hackthatphone.com/20/graphics_locations.html

I also have a tutorial on how to convert the encrypted graphics from the firmware directly here:

http://www.hackthatphone.com/20/convert_png_files.html


And I have a tutorial on how to decrypt 2.0 firmware here:

http://www.hackthatphone.com/20/decrypt_2_0_firmware.html

[egk69]

You know were can I find any more tuts, for things like changing the notes and SMS windows, and the keyboards (more in depth)

[sman113]

Just wanted to say thanks for the Winterboard Tutorial. Great Stuff.

Any chance the theme you show on your phone is available for download?

[HackThatPhone]

Just wanted to say thanks for the Winterboard Tutorial. Great Stuff.

Any chance the theme you show on your phone is available for download?

Here you go...

http://www.hackthatphone.net/downloads/Marks_Theme.zip

I just cobbled together elements from other themes already out there. I didn't make this.

[theosus]

Does anyone know how to change the white background that seems to be standard behind things, like the contacts list and the text messaging window?

Im doing a Borg (star trek cyborg monster guys) theme, and have my sounds and wallpapers, battery charge, and icons pretty much done, and even included a green keyboard I got from cydia, but then up pops the ugly white screen behind emails and text messages.


Is this "changeable"? I would love a deep grey-green color like their ships.

[deise boy]

dude look mr up when its done the borg are well cool

[theosus]

dude look me up when its done the borg are well cool

LOL... I pretty much finished it over the weekend. Anyone know how to put stuff on Cydia? Of course, if you can ssh into your phone you dont need cydia. If someone could host the zip file for download you could drop it right into your theme folder. The whole thing is about 14mb

The theme is self-contained in one folder. I included a green keyboard I found on cydia (whoever did it - they saved me an ass of work), plus a bunch of icons. There are sound effects for major functions, new backgrounds for sms and notepad, edited strings for incoming calls, text and voicemail, walpapers, and a borg-symbol dial pad.
The battery charge indicator is different - but borg too. The wifi signal blob is either red (crappy signal) blue (okay) or green (full) - but its a borg alphabet circle. I left at&t, and the little battery alone.
If anyone knows how to change the login keypad... or the "accept" and "decline" buttons for phone calls, I would love to mod those as well.

Send me an email if you can host the file or help out.

[paki421]

The tutorial was great. just one confusion. i do not know what size to keep the carious icons like the signal bars, battery charge etc. Moreover, another question i have in mind is that if i manage to get 12-14 dif themes from the net or cydia, is it possible to break them up and use dif parts of them to create ur own theme? The last thing is a request. if possible, could you please share the black keyboard theme and duracel battery theme that you created. Thanks in advance.

[HackThatPhone]

The tutorial was great. just one confusion. i do not know what size to keep the carious icons like the signal bars, battery charge etc. Moreover, another question i have in mind is that if i manage to get 12-14 dif themes from the net or cydia, is it possible to break them up and use dif parts of them to create ur own theme? The last thing is a request. if possible, could you please share the black keyboard theme and duracel battery theme that you created. Thanks in advance.

My tutorials clearly state at the top to use the same dimensions as the original.

Of course you can make your own theme with items from other themes. They are just graphics. This isn't magic.

I did not create the black keyboard or the battery, they are in Cydia.

[captainplanet17]

I was wondering if you knew the path to use to change the icons of app store apps. I have changed the regular native apps. I want to know where to go in the phone to change apps that I donwload from the app store. I have looked around using scp but can't find where the other apps are located. I am trying to change The Weather Channel icon. Thanks for any help you can give.

[HackThatPhone]

Try /Applications/<your application>/icon.png

[captainplanet17]

no that didn't work...

[HackThatPhone]

Then I have no idea what your particular app's icon.png is called. You'll have to search in the app's folder.

[almulder]

I have just found your post here and it has been great help, but I am wondering if you have worked much with Theming .strings.

I am trying to change some strings with in a ".strings" file, with I just went and copied the original file and made all the changes that I wanted to and moved that file into the folder within winterboard, but it does not work.

All the graphics do, but not the .strings file. Any thoughts?

[HackThatPhone]

See this page http://www.hackthatphone.com/2x/themes_with_winterboard_section9.html

I change the .strings file to say something else on the unlock screen.

[almulder]

Ok I get it now.

Strings must be placed inside en.lproj folder

Thank you it all works now.

[HackThatPhone]

All 2.x WinterBoard tutorials (except custom keyboards) have been updated in the 3.x firmware section. I'll continue adding things as I find them.

http://www.hackthatphone.com/3x/themes_with_winterboard.html

I have also just gone through every tutorial updating screen shots as needed. They needed it. It was driving me nuts seeing icons for Installer and Boss Prefs, both which I consider to be long dead now.

[almulder]

Nice update. Thank you.

[iphonelrner]

Hi, First Thanks for the great tutorials I have figured out a lot from working through them... thanks for all your hard work.
My question is after following your tutorial about removing the time and date on the lock screen i am left with the light and dark gray background bars (behind the date and time) where do i find this image file so that I can either delete or edit to remove. I figured out how to remove the one behind the slider in the i zipper

Thanks and keep up the good work

[HackThatPhone]

Hi, First Thanks for the great tutorials I have figured out a lot from working through them... thanks for all your hard work.
My question is after following your tutorial about removing the time and date on the lock screen i am left with the light and dark gray background bars (behind the date and time) where do i find this image file so that I can either delete or edit to remove. I figured out how to remove the one behind the slider in the i zipper

Thanks and keep up the good work

You should read this then:
http://www.hackthatphone.com/3x/themes_with_winterboard_section13.html

[Golfdude]

Your tutoorials are all great, however I'm having trouble finding the settings.js file referred to in the wintereboard tutorial. Can you tell me where it is located? I want to adjust the weather information.

Thanks

[HackThatPhone]

Your tutoorials are all great, however I'm having trouble finding the settings.js file referred to in the wintereboard tutorial. Can you tell me where it is located? I want to adjust the weather information.

Thanks

Which tutorial are you referring to? I have 27 in the WinterBoard section.

[Golfdude]

Make and use themes with WinterBoard

intel Mac & PPC

Section 26: Multi bar lock screen, Step 4 is where you mention changing the weather from New York to the user's local weather.

It says, "Now open the Settings.js file. Scroll down to the weather section. Enter your code in the area I have highlighted." I just can't seem to find the settings.js file.

Again, thanks for your help.

[HackThatPhone]

Make and use themes with WinterBoard

intel Mac & PPC

Section 26: Multi bar lock screen, Step 4 is where you mention changing the weather from New York to the user's local weather.

It says, "Now open the Settings.js file. Scroll down to the weather section. Enter your code in the area I have highlighted." I just can't seem to find the settings.js file.

Again, thanks for your help.

These are the instructions in the tutorial:

In Fugu, navigate to your MultiBar Lockscreen.theme/Private folder. Drag out the Settings.js file to your dekstop so you can edit it. Scroll down to the weather section. Enter your code in the area I have highlighted.

Since 2.0 of this theme was released I have completely overhauled the entire tutorial. Reread it fully as much has changed.

[Invisible Fist]

Thanks for the tutorial HackThatPhone but, the "Per-page Wallpapers" don't seem to be working for me. I correctly named them as "Page0.png", "Page1.png", and so on. I am running the 3.0 firmware on a jailbroken 2G iphone. Does this have anything to do with the firmware or I am just doing something wrong?

[HackThatPhone]

It works fine for me. I couldn't guess at what you are doing wrong.

[Nathan_Explosion]

HackThatPhone -

I have been using your site for a while now and would like to thank you for all of the time and effort you have put into your tutorials. I love the attention to detail. Many times I will try and follow directions from some random site and they leave out steps that they assume you should know. I have followed many off your tutorials, most recently the Gruppled theme (which is kick_ass by the way) and have had ZERO trouble with executing. Even going into config files and changing commands around to suit my own liking seem easy when you lay it all out.

Thanks again!

[HackThatPhone]

Thanks! I used to be just like you only turn the clock back to when the Motorola V3 came out. I stumbled onto this whole hacking scene on accident. I found all kinds of forums showing me how to do things but the instructions were always wrong or incomplete. So I made a site just like my iPhone site but for Motorola phones. No one ever had screen shots in their instructions back then either. I like to think all those sites out there now took a lesson from me.

[Flip]

Thanks! I used to be just like you only turn the clock back to when the Motorola V3 came out. I stumbled onto this whole hacking scene on accident. I found all kinds of forums showing me how to do things but the instructions were always wrong or incomplete. So I made a site just like my iPhone site but for Motorola phones. No one ever had screen shots in their instructions back then either. I like to think all those sites out there now took a lesson from me.

OMG, you did the http://www.hackthev3.com/ site? I used that site all the time for my Razr. I owe you like a case of beer for all your help.

[HackThatPhone]

OMG, you did the http://www.hackthev3.com/ site? I used that site all the time for my Razr. I owe you like a case of beer for all your help.

Yes that's my site along with HacktheV3i, and HacktheL7.

[HackThatPhone]

I have recently expanded Section 14 on making custom keypad dialers. Before I took the wimpy way out and only showed you how to change the buttons 1-9 and * 0 and #.

Well, I spent the bulk of today showing you how to fully cover the screen with a photo (except for the bottom where favorites, recents, contacts, keypad and voicemail are). It's a time consuming task to do this, but if you have a program like Photoshop you can easily follow along with me.

http://www.hackthatphone.com/3x/themes_with_winterboard_section14.html

[Aponizuma]

thank you very much for the elaborate tutorials on theming our iphones.

could you kindly elaborate on this from section.11 -

As far as ringtones are concerned, /private/var/stash/Ringtones contains the stock ringtones only. Custom ringtone sounds are placed in /private/var/mobile/Media/iTunes_Control/Ringtones. You can put your custom ringtones in the same folder as the stock ones, however.

i would like to include a ringtone with my simple theme, how do i do it? i want it to appear in settings-sounds as an option to choose. thanks again.

[HackThatPhone]

You can't change ringtones using a theme, to the best of my knowledge. Even if you could, that theme could only contain one ringtone. Also there would be no control over them through the settings sounds screen, WinterBoard would control the theme.

Best to just sync your custom ringtones through iTunes.

There is a program on Cydia that will rotate your ringtones for you but it costs money.

[Aponizuma]

thank you for the quick reply. i do have one ringtone only, i just thought that the way ringtones could be installed through cydia may be implemented using winterboard. i guess i have to just utilize one of the sms tones :) thanks again.

[fangorn81]

HackThatPhone your tutorials are awesome. I am getting close to finishing up a theme based on the Vid-Ph?ns from Blade Runner and you have been enormously helpful.

I have a question. For anyone really.

Is there a way to put an image layer OVER the icons on the springboard? I want to have a semi transparent "old CRT effect" over everything...and I don't want to make a custom icon for every app, as I would like it to be universally applicable, no matter what apps you have installed (my main gripe with most themes is insufficient icons...not that I don't understand WHY!!).

Any ideas anyone? I believe I heard somewhere that there is a universal icon overlay that springboard applies to each icon. Is that true? If so can anyone point me in the right direction?

Thanks in advance!

You can see my theme in progress shots here: trappedstateside.blogspot.com

EDIT: Looks like I might have found what I need at the ModMyi forum. Will have to wait till after work to try it out. It might not work on jailbreak app icons though...

In case anyone else has the same question I do:
http://modmyi.com/forums/native-iphone-ipod-touch-app-launches/269651-winter-board-8.html

[HackThatPhone]

Bumping this back to page 1 because I think it will help many people if they know it is here.

[AlMcCoy]

First, a big thank you to HackThatPhone, your tutorials are great and very clear!

I am trying to add a couple of customized icons on the spring board to directly launch some specific videos (that I would copy on the iphone through SSH)... I would like to view each video directly at the push of a button without having to go through another apps selection screen (that's why using the ipod app wouldn't do... or even MPlayer as it is asking to select a video first...).

I thought it is possible to write a code associated to an icon that says to a player to directly launch a video and then exit when it is done... my problem is that I don't know any iPhone programming...

Would you have any hint to help with this?

Many thanks and wish you best :)

[HackThatPhone]

You're welcome. I know nothing about what you are trying to do. It could be possible.

[bitSplit]

Hi,
if you have a Mac (and are willing to invest $10) you should give iFuntastic (http://iFuntastic.com) a try. It lets you do this (and a lot more - password protect your video clips, for example) quite easily. Alright, with the plug out of the way, what you want to do is this:
install the Safari File Schema from Cydia. Then make a web clip and edit its Info.plist file to point to your video file (locally on the device; e.g. file:///private/var/mobile/Media/myVideo.mov) The web clip will open Safari which will then switch to the video player. You may have to experiment with the proper video format (extension should be .mov, though) and file location.
Regards