Modding your iPhone for Windows 103

[arthursdomain]

Modding your iPhone for Windows 103

In this post i will mainly talk about techniques to installing and creating a theme or background image for your home screen. Up to now, if you read all the tutorials you are 90% of the way to modding your iphone with a theme.

Things you will need for Modding your iPhone for Windows 103
1. Stock DisplayOrder.plist [Download]
2. Windows Vista Background RC1 [Download]
3. Stock Home Icons [Download]
4. Stock Icon Package [Download]


Adding a Dock
In Modding your iPhone for Windows 102 you learned how to add icons to your home screen. We will use that knowledge along with a few techniques to getting your home screen nice and themed.

Step 1
The following process is CASE SENSITIVE, meaning that you need to follow the uppercase and lowercase of the directories and file names.
In this simple step you will create a dock, a dock is merely an image which sits at the lower third of your home screen, it is normally home to your phone, mail, internet, ipod icons. Normal docks have a width of 320px and a height of 91px. I would stick to those measurements in the begining.
1. get an dock graphic, there are many ways to do this, you can make your own or download one from the many from our fabulous members of MMi, either way it should be around 320px x 91px.
2. save graphic as SBDockBG2.png and interlaced and save it in the Cphonedmg folder
3. start iphoneinterface
4. type: cd /System/Library/CoreServices/SpringBoard.app
5. type: putfile /System/Library/CoreServices/SpringBoard.app/SBDockBG2.png
6. type: quit
7. restart your phone (hold the power button until the red slider appears and slide to turn off, turn on the phone by pressing the power button)

Just like installing an icon, your dock is done and behind your icons.

So now that youve changed all your icons and your dock, what next? The background. For this we will need to use a little photoshop and a little patients. For the next example I will give 2 ways to do a background.

ADDING A BACKGROUND TYPE 1

STEP 1
Starting with an image
1. select a background, whether it be a wallpaper you like or a current background/wallpaper on the site, choose one something you want to see behind your icons. The bigger the better, you can always shrink down, but you will have a hard time making something bigger. You need to find an image AT LEAST 480px in height and a width of around 400px in width.
2. open Adobe Photoshop CS2
3. I would recommend you to download my theme to use for both version as templates. [Download]
4. open the icon.psd (from the .rar file you just downloaded)
5. open the background image you select in step 1
6. place your background image within the same image as the once currently there. You can lay it right on top of it, in a new layer.

STEP 2
Adding your Icons to your Background
1. open all of your icons for your home screen (calendar, stocks, youtube, clock, etc.) in photoshop
** if you used the stock icons, they can be downloaded in the download section [Download] or [Download] , you can use these to place on your background **
2. place your icons in rows of 4 spaced out evenly through out the screen. you are going to place every icon on the screen - except (phone, mail, safari, ipod).
** in the icon.psd there is a layer with a layout for all 12 icons, you can align your icons up with those icons. **
3. save as icon.png and make it interlaced save this to the Cphonedmg folder

STEP 3
Changing the Display Order (DisplayOrder.plist)
1. Download the unmodified version of the DisplayOrder.plist [Download] and save it in the Cphonedmg folder
2. open DisplayOrder.plist with notepad (start->run->type: notepad)
3. look for this line:

</array>
<key>special</key>
<array>

above this line type in the following:

<dict>
<key>displayIdentifier</key>
<string>com.apple.DemoApp</string>
</dict>

4. save DisplayOrder.plist in the Cphonedmg
** MAKE SURE ITS NOT SAVED AS A TXT extension ie: DisplayOrder.plist.txt <-- WRONG **

STEP 4
Uploading your Background
1. start iphoneinterface
2. type: cd /Applications/DemoApp.app
3. type: putfile /Applications/DemoApp.app icon.png
4. type: cd /System/Library/CoreServices/SpringBoard.app
5. type: putfile /System/Library/CoreServices/SpringBoard.app/DisplayOrder.plist
6. type: quit
7. restart your phone (hold the power button until the red slider appears and slide to turn off, turn on the phone by pressing the power button)

ADDING BACKGROUND TYPE 2
This version is a little more complicated on the photoshop end and should only be attempted by adept photoshop users.

NOTE: THIS IS FOR STOCK IMAGE USERS ONLY! HOWEVER THE SAME TECHNIQUE CAN BE USED BUT MAY REQUIRE WORK THAT HAS NOT BEEN COVERED IN THIS TUTORIAL. IF YOU USE CUSTOM HOME SCREEN ICONS USE ADDING BACKGROUND TYPE 1.

STEP 1
Starting with an image
1. select a background, whether it be a wallpaper you like or a current background/wallpaper on the site, choose one something you want to see behind your icons. The bigger the better, you can always shrink down, but you will have a hard time making something bigger. You need to find an image AT LEAST 480px in height and a width of around 400px in width.
2. open Adobe Photoshop CS2
3. I would recommend you to download my theme to use for both version as templates. [Download]
4. open the icon.psd (from the .rar file you just downloaded)
5. open the background image you select in step 1
6. place your background image within the same image as the once currently there. You can lay it right on top of it, in a new layer.
- Up to this point everything is the same as before but now things get interesting -
7. in the psd there is also a layer with holes cut out, hide your current background and make visible my template background.
8. using the magic wand wand each white area and hold shift to select more than once cut out at a time
9. once you have all the cut outs marqueed hide the template layer and make visible your background layer
** make sure your background layer is not only visible but selected **
10. press your delete key
** make sure that the holes are now 'transparent' -- you can tell this by the checkerboard white/grey, if its not, make sure only relevant layers are selected **

- your template is now completed and you continue as before, you do not need to do step 2 from above -

STEP 2
Changing the Display Order (DisplayOrder.plist)
1. Download the unmodified version of the DisplayOrder.plist [Download] and save it in the Cphonedmg folder
2. open DisplayOrder.plist with notepad (start->run->type: notepad)
3. look for this line:

</array>
<key>special</key>
<array>

above this line type in the following:

<dict>
<key>displayIdentifier</key>
<string>com.apple.DemoApp</string>
</dict>

4. save DisplayOrder.plist in the Cphonedmg
** MAKE SURE ITS NOT SAVED AS A TXT extension ie: DisplayOrder.plist.txt <-- WRONG **

STEP 3
Uploading your Background
1. start iphoneinterface
2. type: cd /Applications/DemoApp.app
3. type: putfile /Applications/DemoApp.app icon.png
4. type: cd /System/Library/CoreServices/SpringBoard.app
5. type: putfile /System/Library/CoreServices/SpringBoard.app/DisplayOrder.plist
6. type: quit
7. restart your phone (hold the power button until the red slider appears and slide to turn off, turn on the phone by pressing the power button)

Some people have suggested putting notifier icons at the bottom tray, i have not yet made modifications on my template to accomidate that. The way to do this briefly is to move the mail and sms icon on the dock and move either safari or ipod to the home screen. This will force you to make changes in your DisplayOrder.plist (as shown above). However, that modification will not effect this tutorial in anyway. All STOCK icons can be interchanged.

What is the difference between TYPE 1 and TYPE 2?
Well the difference is quite simple, in type 1 is a much faster and easier way to quickly mod, gives you a lot more creative freedom as the icons as well as the background are combined into one image. type 2 is a much more difficult process and currently as it is can only accomidate the stock images. however, the plus sides is that the icons are the real icons and therefore highlight and act properly. The background is hooked up to a icon which does not exist so its fairly stable. Both have their pros and cons, but in short if you use custom icons , go with type 1, if you have the stock icons and just want to put a background picture and are okay in photoshop do type 2.

After reading 100-103 you should have the skills to create an entire home screen theme/skin with little trouble. With a little looking and more reading in the forums and the guides/wiki you can find that you can mod a lot more things. Im not sure if this will be my last windows guide, I may make a Modding your iPhone for Windows 104 (battery icon, signal icons, wifi icons and more!) but until then, have fun modding and keep looking its out there.

[bluaeon]

i have a problem with uploading the icon.png file onto the demoapp folder... is the icon.png file suppose to be not there? cuz the files that i only see are:
Default-Calculator.png
Default-Calendar.png
Default-Notes.png
Default-WorldClock.png
Default.png
DemoApp
Info.plist
PkgInfo

I have added the icon.png but the wallpaper didnt show up.
Help?
Thanks!

[Kyle Matthews]

Ha, I haven't even got Windows 102 Wiki'd yet. PM me a reminder... great work, I love it.

[arthursdomain]

I think there is a typo, yes the demo app icon should appear after uploaded. The error is in the putfile line for uploading ghe icon. It shouldbe
putfile /Applications/DemoApp.app/icon.png

Let me know if that helps

[bluaeon]

I think there is a typo, yes the demo app icon should appear after uploaded. The error is in the putfile line for uploading ghe icon. It shouldbe
putfile /Applications/DemoApp.app/icon.png

Let me know if that helps

yeah... thats where i put the file at... but is there suppose to be a file in there cuz i didnt see any... the icon.png file i mean... i uploaded it through manzana and when i restarted the phone it didnt show at all... i looked it up at manzana again, and the file is there (icon.png) but the image is not showing... anything wrong on how i did it? thanks!

oh yeah... im at apple store posting this... w00t w00t!! hahaha

[arthursdomain]

yeah... thats where i put the file at... but is there suppose to be a file in there cuz i didnt see any... the icon.png file i mean... i uploaded it through manzana and when i restarted the phone it didnt show at all... i looked it up at manzana again, and the file is there (icon.png) but the image is not showing... anything wrong on how i did it? thanks!

oh yeah... im at apple store posting this... w00t w00t!! hahaha

i dont think demoapp comes with a default icon. since its a 'hidden' one. other than that, did you change your DisplayOrder.plist? DemoApp wont show up unless DisplayOrder.plist is changed properly.

[bluaeon]

i dont think demoapp comes with a default icon. since its a 'hidden' one. other than that, did you change your DisplayOrder.plist? DemoApp wont show up unless DisplayOrder.plist is changed properly.

this is one thing that i didnt do... so you have to add the demoapp in order for the icon to show up... i see... will be doing this now. thanks

[shizzabrick]

holes don't line up in your icon1.psd. The background image itself seems to be a little wider than 320 and shorter than 480. Why? When I cut out holes in my background, it still bleeds into the icons...

BTW, I am using method 2 in order to keep the stock icons.

Also, what's the real height of the dock? Doesn't quite seem to be 91 px.

Any ideas?

EDIT:
Ok, near-perfect if I do this:
Move background down 2 px.
Take the background with the holes. COPY.
Take the background with the holes. COPY (second time).
Move copy #1 to the left 2px
Move copy #2 to the right 2px
Put your background in.
Select orig background with holes, go to your background, clear the selection.
Go to orig copy #1, select holes, go to your background, clear selection.
Go to orig copy #2, select holes, go to your background, clear selection.
Move copy #1 right 1 px.
Go to orig copy #1, select holes, go to your background, clear selection.

My result... (yeah, I was only messing with the bottom row of icons).

[arthursdomain]

holes don't line up in your icon1.psd. The background image itself seems to be a little wider than 320 and shorter than 480. Why? When I cut out holes in my background, it still bleeds into the icons...

BTW, I am using method 2 in order to keep the stock icons.

Also, what's the real height of the dock? Doesn't quite seem to be 91 px.

Any ideas?

your question is rather vague, could you eleborate. did you place your bg image in the same place as mine? did you use the demoapp icon as your background image? the dock should have no baring on the over all theme, it is interchangeable, im not sure on exact heights of the bg or dock, these have been used off of previous dock/bg examples that have worked prior.

[shizzabrick]

n/m, check my edit above. Thx for your help!

[arthursdomain]

looks like a perfect fit, can you upload your psd with all the layers?

[bluaeon]

i finally got it working... thanks for the help...

1 tip i kinda noticed about the dock is you can make it 91x320... but move the image 1 pixel to the right and the space on the left side when you moved the pic... just apply black background... this will line up your images perfectly... also if you are adding a bg image... it should be 320x480... to line up the dock image... from the bottom of the pic... count 24 pixels up and this will be the bottom of the dock image... from the bottom of the dock image to the top most of the dock... its 91 pixel high, but it sill 320 pixel width. this is how i lined up my dock images... i made sure my math was correct.

so to recap:
bg image HxW: 480x320
dock image HxW: 91x320
lining up the dock image properly:
-start @ bottom of image and count 24 pixels UP (this is the bottom of the dock)
-from that line... height is 91pixels... count 91 pixels up... this will be your dock image
-create new image with HxW of 91x320
-add a new layer
-apply black image to new layer
-Paste copied image (should now have 2 layers; 1 is the bg with black color and 2 is the image you just pasted
-make sure the layer with the image is on top of the layer with the black bg
-Move the newly pasted image 1 pixel to the LEFT
-Save it and you have a new dock image
-- Save it as ---> SBDockBG2.png <---

on my uploaded theme... i have attached the psd file in it... try to play around with my psd... my icons are 64x64 though and not 60x60 which is the stock measurements.

anyways... thanks for the tip arthur.

[arthursdomain]

glad to see you got it working, perhaps i can improve my guide with your new information. Ill look over your psd.

[troyboy657]

when i go to tpe in all the info for adding the dock in iphone interface
it comes up as "not found"
for example, when i typed in System/Library/CoreServices/SpringBoard.app
it showed up as "not found"
any tips?
Thanks!

[Kyle Matthews]

Sounds like you haven't jailbroke yet.

[laz305]

hey just had to say Thankyou so much for taking the time to do this tutorial.

[arthursdomain]

hey just had to say Thankyou so much for taking the time to do this tutorial.

no problem, i had a hard time in the beginning too try ing to read the mac tuts.

[whoop208]

Does anyone know how to remove a dock or a ringtone once it's been installed? instead of putfile do I use removefile? Sorry I'm very new to this all. Thanks for any help!

[arthursdomain]

Does anyone know how to remove a dock or a ringtone once it's been installed? instead of putfile do I use removefile? Sorry I'm very new to this all. Thanks for any help!

well you can simple just putfile a new image you want to replace it. or you can use the rmdir command, works on both directories and files.

[Azrael]

This is a great tutorial and your template is really good. But the misalignment of the cut out holes kind of bothers me. I was wondering if a new version of your .psd has been uploaded anywhere with the appropriately sized holes?

I was also wondering if you could upload a .psd with something that made it easier to change the names under the icons. Mine aren't in the same order as yours and it would be great if I could just click on a layer and rename it instead of dragging the other names around and trying to realign them.