Hi everyone, I've put together a tutorial on how to make themes for Wiztiles. We will make this process easier in the future, with some kind of Desktop tool. For now you will need to do everything manually.
Anyone can make themes. You will need the following:
• Text Editor like Notepad
• Zip utility like Winzip
• Imaging application like Photoshop
A theme consists of the following: text files and images. I’ve attached a sample theme called Metro, which comes with the Wiztiles app.
[See Metro.zip below]
Unzipping the theme will show the following structure:
• Backgrounds Folder
• Icons Folder
• Theme.png
• Theme.txt
Backgrounds folder will contain png files that are tile backgrounds.
Icons folder will contain png files that are icons.
Theme.png is preview image that the user will see when they’re browsing their theme list. The dimension of this image is: 360x240 pixels
Theme.txt contains all the information to describe your theme.
Before you can describe your theme, you need to understand the anatomy of a Wiztile:
Layer 1: Tile solid background color
Layer 2: Tile background image
Layer 3: Tile icon image
Layer 4: Tile title text and tile back text
Knowing the above, you can now describe your theme. Here’s an example of Theme.txt
[Theme]
Name=Metro
Version=2.0
UpdatedOn=2012/01/01
Description=Metro theme
Author=Wiztiles
AuthorUrl=http://www.wiztiles.com
[Tile]
task=Phone
front.icon=phone1.png
front.background.color=#635297
front.background.image=
front.title=Phone
back.background.color=#635297
back.icon=phone2.png
back.background.image=back01.png
back.title=Phone
back.text=This is awesome!
back.disabled=true
The first block called [Theme] is a summary of the theme you are making. Within [Theme] you need to populate the following:
Name: Put the name of your theme here
Version: Version number of your theme. When you make a new version, enter a higher number here. Your users will get a notification on the app that a new theme is available if their version is lower than the new version you input here.
UpdatedOn: Put in the date that you last updated your theme. Format is yyyy/mm/dd
Description: Put in whatever you want here. This could describe your theme, it could be about you. It could be about your pet, we don’t care. Just hold back on profanities. Whatever you put here will show up on the “Download Themes” section. The user will be able to read this when previewing your theme.
Author: Your name, nick name, etc.
AuthorUrl: link to your website. Again, don’t be silly and put some porn site URL or something.
Next block is [Tile] Repeat this block for every tile in your theme.
task: This is the action of your tile when the user pins it to their start screen. There are currently 10 tasks available. We will be adding more in the future.
• Phone: Dials a phone number
• Email: Composes an email
• Browser: Launches the Web browser
• Message: Composes text messages
• Camera: Take a picture
• Status: Share status to Facebook, Twitter, LinkedIn, Windows Live
• Connection: Launch Airplane Mode, Bluetooth, Wifi, and Cellular settings
• Map: Launch Bing Maps for directions, or just to use Maps
• Search: Launch Bing Search
• Marketplace: Launch the WP7 Marketplace
front.icon: icon on the front tile
front.background.color: background color of the front tile
front.background.image: background image of the front tile
front.title: text title of the front tile
back.icon: icon on the back tile
back.background.color: background color of the back tile
back.background.image: background image of the back tile
back.title: text title of the back tile
back.text: text of the back tile
back.disabled: set to true to disable. False to disable, or don’t put “back.disabled” at all
We’ve recently added something called params. We will expose more in future updates. Only one param is exposed right now: uri. If you are using the Browser task, you can add the uri param to point the web browser task to a website. Example:
params=uri=amazon.com
After you’ve finished your theme, zip it with a zip utility. Upload it to a server, and use Wiztiles to load it into your phone. Go to “download themes”. Pivot to the “donwnload site”. Input the URL address of your zip file. After pressing “download theme”, it will show up on the theme list of the Wiztile home page.
Now that you know how to make a theme, you will probably want to make themes out of images. If you know your way around Photoshop, the following template will help you “cut up” your image:
[see WiztilesThemeTemplate.zip below]
Simply slice up the images in Photoshop and save the pngs into the backgrounds folder. Each tile dimension is 173x173 pixels. Don’t forget to make a preview image(Theme.png)
Let me know if you have questions. Thanks!
Anyone can make themes. You will need the following:
• Text Editor like Notepad
• Zip utility like Winzip
• Imaging application like Photoshop
A theme consists of the following: text files and images. I’ve attached a sample theme called Metro, which comes with the Wiztiles app.
[See Metro.zip below]
Unzipping the theme will show the following structure:
• Backgrounds Folder
• Icons Folder
• Theme.png
• Theme.txt
Backgrounds folder will contain png files that are tile backgrounds.
Icons folder will contain png files that are icons.
Theme.png is preview image that the user will see when they’re browsing their theme list. The dimension of this image is: 360x240 pixels
Theme.txt contains all the information to describe your theme.
Before you can describe your theme, you need to understand the anatomy of a Wiztile:
Layer 1: Tile solid background color
Layer 2: Tile background image
Layer 3: Tile icon image
Layer 4: Tile title text and tile back text
Knowing the above, you can now describe your theme. Here’s an example of Theme.txt
[Theme]
Name=Metro
Version=2.0
UpdatedOn=2012/01/01
Description=Metro theme
Author=Wiztiles
AuthorUrl=http://www.wiztiles.com
[Tile]
task=Phone
front.icon=phone1.png
front.background.color=#635297
front.background.image=
front.title=Phone
back.background.color=#635297
back.icon=phone2.png
back.background.image=back01.png
back.title=Phone
back.text=This is awesome!
back.disabled=true
The first block called [Theme] is a summary of the theme you are making. Within [Theme] you need to populate the following:
Name: Put the name of your theme here
Version: Version number of your theme. When you make a new version, enter a higher number here. Your users will get a notification on the app that a new theme is available if their version is lower than the new version you input here.
UpdatedOn: Put in the date that you last updated your theme. Format is yyyy/mm/dd
Description: Put in whatever you want here. This could describe your theme, it could be about you. It could be about your pet, we don’t care. Just hold back on profanities. Whatever you put here will show up on the “Download Themes” section. The user will be able to read this when previewing your theme.
Author: Your name, nick name, etc.
AuthorUrl: link to your website. Again, don’t be silly and put some porn site URL or something.
Next block is [Tile] Repeat this block for every tile in your theme.
task: This is the action of your tile when the user pins it to their start screen. There are currently 10 tasks available. We will be adding more in the future.
• Phone: Dials a phone number
• Email: Composes an email
• Browser: Launches the Web browser
• Message: Composes text messages
• Camera: Take a picture
• Status: Share status to Facebook, Twitter, LinkedIn, Windows Live
• Connection: Launch Airplane Mode, Bluetooth, Wifi, and Cellular settings
• Map: Launch Bing Maps for directions, or just to use Maps
• Search: Launch Bing Search
• Marketplace: Launch the WP7 Marketplace
front.icon: icon on the front tile
front.background.color: background color of the front tile
front.background.image: background image of the front tile
front.title: text title of the front tile
back.icon: icon on the back tile
back.background.color: background color of the back tile
back.background.image: background image of the back tile
back.title: text title of the back tile
back.text: text of the back tile
back.disabled: set to true to disable. False to disable, or don’t put “back.disabled” at all
We’ve recently added something called params. We will expose more in future updates. Only one param is exposed right now: uri. If you are using the Browser task, you can add the uri param to point the web browser task to a website. Example:
params=uri=amazon.com
After you’ve finished your theme, zip it with a zip utility. Upload it to a server, and use Wiztiles to load it into your phone. Go to “download themes”. Pivot to the “donwnload site”. Input the URL address of your zip file. After pressing “download theme”, it will show up on the theme list of the Wiztile home page.
Now that you know how to make a theme, you will probably want to make themes out of images. If you know your way around Photoshop, the following template will help you “cut up” your image:
[see WiztilesThemeTemplate.zip below]
Simply slice up the images in Photoshop and save the pngs into the backgrounds folder. Each tile dimension is 173x173 pixels. Don’t forget to make a preview image(Theme.png)
Let me know if you have questions. Thanks!
Last edited:
Facebook
Twitter
Instagram