Understanding a theme's directory structure
Posted: January 20, 2014
WinterBoard functions by substituting one image for another. It does this in a unique
way: it doesn't directly replace the image, it instead tells the iPhone to look somewhere
else for the image it needs. It accomplishes this through mimicking the folder structure
of the iPhone as far as where it places its images. It's important you understand how this
works, or your themes will not function.
In this very simplistic
tutorial I'll demonstrate how to change the App Store icon
on my iPhone 5. Many graphics aren't yet accessible to being changed in iOS 7. Apple has
made it harder on theme designers this time around.
I think a great way to learn how to theme is get a hold of a theme, and see how it was
constructed on your Mac. See what folders graphics have to be placed in to work properly
in WinterBoard. Keep in mind there are multiple copies of graphics depending on the
resolution of the iPhone.
You can either install a theme through Cydia and then SSH into your phone and go to
/Library/Themes download the theme to your Mac or you can download the theme Touchit HD
this thread at the Mac Rumors Forum.
There's a direct download link to the theme in the first post.
This tutorial assumes you've already read:
First create a folder for the theme you're creating. Mine'll be called App Store icon.
Open this folder and create a folder inside of it called Bundles.
Open this folder and create a folder inside of it called com.apple.AppStore.
Next you'll place your graphic (named Appstore120.png) into this folder.
Upload your AppStore Icon folder to your iPhone's /Library/Themes folder, where the rest
of your WinterBoard themes will go.
For this particular tutorial, here's what I would write in place of showing you step by
step how to build these nested folders, and where to place the graphics:
Create the following directory structure: Your theme/Bundles/com.apple.AppStore/
Then place your graphic called Appstore120.png inside the com.apple.AppStore folder.
Launch WinterBoard, press Select Themes, select the App Store Icon theme, press
WinterBoard, then press Respring.
There's your new icon.