[tut] Editing Icons In S60 Themes on pc using siscontent


Editing Icons In S60 Themes

When an author creates his theme in Carebide.ui Theme edition he is allowed to specify his own icons that are used for system and 3rd party applications, folders and services. The only things he needs to know are either the application's unique identifier (UID) or folder identifiers (IDs) in order to associate the icon with the corresponding application/folder and a graphics file for that icon. When theme is applied on the device, icons specified in it replace default ones. Icons not specified in theme stay unchanged. Nowadays there are lots of Symbian applications and their amount grows every day. When an author creates his icon pack (the set of styled icons used for replacement of icons of default system and 3rd party applications and folders) he tries to support as much applications as possible. But he cannot know UIDs of all apps and he barely has time to paint icons for hundreds of applications users may have installed on their devices. At the same time users often contact authors of themes asking them to add some more icons after theme is built and released. Now it's not necessary, because you can do it yourself if you have corresponding icons for applications you would like to be changed.

This tutorial is aimed to explain how to manage icons containing in themes for S60 platform using SISContents. SISContents allows you to add new icons, replace graphics of the existing icons and delete icons containing in S60 themes. All operations are made in sis package, no unpacking or re-packaging is needed. After theoretical basis I'm going to show how to change and add some icons to Aviator theme created by tehk.

So, let's get it started.

First download the latest version of SISContents From Below Link.

Adding new icons
To add an icon to some application you need to know its unique identifier (UID) and corresponding graphics file (in SVG or SVGB format). If you don't know UID of necessary application, see Appendix to find out how to obtain it.
The information about icons is stored in the skin file of theme (with .skn extension) and the steps of adding an icon are the following:
- Open sis package of theme with SISContents and press Tools->Edit package.
- Switch to Contents tab and look for a file with .skn extension (themepackage.skn usually).
- Select this file in the list and click on View details at the bar of the buttons above (or double click on the file in the list).
- In the appeared window switch to Application icons tab. There is a list of all application icons a theme has. The empty list means that theme does not have any icons and uses system default ones. The amount of currently displayed and total icons is shown at the top of the list. Each item in the list consists of UID of application the icon is specified for, the name of that application (if it was found in the database of SISContents) and corresponding graphics resource in mif file (where images of icons are stored).

- Before adding new icon make sure it is not specified. You can use Search both by name and UID. Type first letters of application’s name or digits of UID. Searching by UID is considered to be more accurate cause, first, different versions of application may have different UIDs and, second, if application is translated into several languages, it can have different names, while SISContents has a database of names in english only (it is also possible that application’s name is not contained in the database). If application's icon already exists in the list it’s better to replace the image of icon, cause SISContents does not add an extra record but replaces an existing one.

- If you have not found application in the list, press Add application icon. In the appeared window enter UID of application or select it in the list (by clicking on Choose from list…). You should also specify an image file or if you want to use one of the existing images click on Choose image from the list of existing icons and select image in the box below.

Replacing existing icons
This function is pretty similar to adding a new icon. Select icon in the list and press Replace icon image. Specify a new image by clicking on Browse or choose one from existing images. Application UID can be changed as well. If you don't want to replace the image you may change UID only. In this case leave Icon file field blank.

Deleting icons
This feature allows you to exclude an icon from a theme. Press Delete icon and confirm your intention in the appeared message box. Since now a default icon will be used instead of one specified in a theme.

Ok, let's get to the practice now.

In this section I'm going to show how I have modified the list of icons in Aviator theme so it can better look on the screen of my Samsung i8910 HD. The original theme can be downloaded from the webpage of its author, tehk.

Theme is great (thanks for the work, tehk) but it does not have some icons of applications specific for this device. First of all, the default icon of VideoPlayer with a black solid background looks terrible on the blue background of theme. Secondly, I did not like how icons used for Podcasts and MediaBrowser looked and decided to replace them as well. You can see how theme was looking before modification on the screenshot below.

VideoPlayer is application used for playing DivX encoded videos. I wondered whether Aviator theme had an icon for popular DivX player (UID 0x2000ED5F). I opened theme in SISContents and found that icon was present. In my opinion, there is no need to have two DivX players (embedded and standalone) at the same time and I had decided just to change UID of the icon dedicated to DivX player so that it was linked to VideoPlayer. I pressed Replace icon image, in the appeared window clicked on Choose from list... and selected VideoPlayer application. I had left the Icon file field blank cause my goal was to change UID only using existing image.

After that I did the same with Podcasts. I searched for the icon of Podcasting application which is preinstalled on all Nokia phones (and thus very often painted by theme makers). But on i8910 HD it’s another application, so I had to change its UID from Nokia’s Podcasting (0x1028190B) to Samsung’s Podcasts (0x2001E44E).

Next was the icon of MediaBrowser. There were two variants of how to add it: using existing image of theme’s icon set or to add a new image. I’ll describe both. In case of using an existing image it was necessary to find one. I searched for a Gallery and found out that its image was Entry156.svgb. Ok, then it was time to add new item to the list and I pressed Add application icon. In the list of applications I selected MediaBrowser (UID 0x20018901) (remember you can search it by typing either UID or application’s name) and when window closed I clicked on Choose image from the list of existing icons. In the box below I scrolled down the list and selected Entry156.svgb. New icon was added.

Adding an icon with a new image is the same. You should just click on Load icon graphics from file, click on Browse... and specify the path to your file in SVG (or SVGB) format in the appeared dialog box.

After all modifications theme looked like on the screenshots below.

Before installing on a device theme package must be signed. The better practice would be to sign it against a self-signed certificate, which is not restricted to the list of IMEIs and thus package can be installed on any compatible device. Press Tools->Sign package in the main menu of SISContents, choose SISContents self-signed certificate in the box of signing profiles located at the right-bottom part of the tab Package and press Add signature. After that close the window, save your file and install on device.

That’s all I wanted to share with you. Don't remember that editing of applications icons is currently in beta stage. If something goes wrong feel free to contact me and report bugs. You can find my e-mail in the menu Help->About in SISContents. SISContents creates a backup file (with .bak extension) of original package in the same folder so that if your theme package is damaged somehow you can restore it.

At the end there is a list of current restrictions.
Current restrictions:
- editing of icons of folders is not supported yet; (implemented in SISContents 1.5.5)
- replacing and adding of icons in bitmap (bmp) format is not supported. Only SVG or SVGB (SVG binary encoded) icons can be used;
- deleting of icon from skin file does not delete actual icon image from mif (or mbm) resource, because in the current implementation it may cause mess of all graphics in the theme and as a result to make it unusable. Although image is still present in mif (mbm) file it is not used by operating system of device on theme rendering.

Appendix. How to find out UID of application

To add an icon of any application to a theme you need to know its UID. If you have an application installed on the device the best way to get its UID is to use task manager, such as Best Taskman (version for S60 3rd edition devices and version for S60 5th edition devices). Best Taskman has lists of opened and installed applications. Select application in the list and press Options->Application info. Among other data you will see App.UID. That's what you need. If you don’t see an application in the menu of your device and thus cannot run it to see its UID switch to Installed Apps. (Options->View->Advanced->Installed apps.). Don't forget to include hidden and ROM apps in this list (Options->Show hidden and Options->Show ROM apps). Find an application you would like to know UID for and click on it. In the window popped up you will see its UID.

If you don’t have necessary application installed on the device yet but you have its sis package open it with SISContents and find an executable file (with .exe extension). Double click on it and look at the UID3.

If sis package has several .exe files you can only guess which of them has an icon in the menu. In most cases this file has the same UID as UID of package but it is not mandatory. Try to check their UIDs in Google (theme makers publish the list of UIDs of most common applications) or install sis package on device and then see its UID. You can also try to find application by name in the database of SISContents but remember this search is not 100% accurate cause different versions of the same application may have different UIDs and it's better to know which one is installed on your device (if you enter wrong UID application's icon will not be replaced).

Leave a Reply