Implementing custom skins
Step: 1
Open the SmartPhone Emulator (Developer Edition).
Navigate to...
Or press 'CTRL' & 'M'
Step: 2
You will be presented with a Skin Manager. This utility is used to add and remove skins that are used with the emulator.
Navigate to...
Or press 'CTRL' & 'A'
Step: 3
Skin FileThis is the location of the skin file you have created or downloaded. The format should be filename.yos
Click the 
button to browse your local files.
Display Name
This is the name that is displayed on the Model selection menu.
Step: 4
If your skin was successfully added to the emulator you will see a 'skin deployed' message in the bottom left hand corner of the Emulator.
Step: 5
You should now see the skin you added at the top of the list of the available models.
Step: 6
To apply the skin, simply double-click its entry in the list.
If you are deploying the skin in the Developer Edition, that's it.
However, if you want to deploy the skin in the Web Site Edition, you now have to change the HTML applet code where the emulator is embedded on your website.
Step: 7 (Web Site Edition only)
Make sure that the skin works correctly in the Developer Edition. Check that every button behaves as you intended (it's easy to overlook a button graphic when creating new skins) and that the LCD display fits in the screen correctly. If you detect any problems, go back to Skin Builder and correct them.
When you are satisfied that everything is OK, place the skin file (.yos) on your web server. You don't have to put the skin in the same place as the web page on which the applet appears, although this is a suitable location.
Step: 8 (Web Site Edition only)
You must indicate to the applet where the custom skin is located.
Edit the HTML of the page which contains the applet: you need to change the "phonePropsPath" <param> tag to contain the URL of the skin file. It's important that
this is an absolute URL, starting with
If this is the first time you have deployed a custom skin on this applet, the value of phonePropsPath will look something like this:
<param name="phonePropsPath" value="/nokia/n7110/com.yospace/cropped/green/size1">
Note: changing a custom skin
If you change your custom skin file after you have deployed it on the web, the changes might not take effect immediately. This is because our server caches a copy of your skin file to speed delivery of the applet and its resources to anyone viewing your web page. One consequence of this (apart from faster access, of course) is that any changes you make to the skin file may take a while to filter through the cache -- the file will be reloaded within a few minutes of the next time that someone tries to use the skin. Therefore, we recommend that you refresh your browser, wait for a short while, and then refresh it again. This is one of the reasons why we strongly recommend that you test your skin thoroughly using the SmartPhone Emulator Developer Edition before deploying it on your website. If you do need to change the skin and want to see immediate changes, use a different filename each time you modify the skin file.
Whenever someone visits your web page, the components of the custom skin must be sent to their browser (the browser may cache it after the first visit). Therefore you should avoid making skins that are very large because there is an implicit download overhead. Our server automatically disregards any .yos files which are larger than 1Mb. Skin files are normally much smaller than this limit.