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 from 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:



Step 1.

First create a folder for the theme you're creating. Mine'll be called App Store icon.

iPhone



Open this folder and create a folder inside of it called Bundles.

iPhone




Open this folder and create a folder inside of it called com.apple.AppStore.

iPhone



Next you'll place your graphic (named Appstore120.png) into this folder.

iPhone




Step 2.

Upload your AppStore Icon folder to your iPhone's /Library/Themes folder, where the rest of your WinterBoard themes will go.

iPhone



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.



Step 3.

Launch WinterBoard, press Select Themes, select the App Store Icon theme, press WinterBoard, then press Respring.

iPhone       iPhone



There's your new icon.

iPhone







Return to top of page