Themes, introduced in UIQ 2.1 (P900, BenQ P30), are downloadable/installable packs containing graphics and audio files, which are used to customize the user interface of your UIQ smartphone.



Theme pack is a file with .utz extension. It is a normal ZIP archive with any unique name and extension changed from .zip to .utz. This means that after changing the extension from .utz back to .zip you can open the file in any ZIP manager and check/modify its contents.

XML file:

Each theme consists of an XML document (always called Theme.xml) and picture/sound files used by your theme. XML file contains description of your theme, i.e. colors, background pictures, ringtones and alarm tones to be set. Each file mentioned in the XML file has to be included in the archive, but the archive may also contain other UI elements that are not described in the XML document - the system adds them automatically if they are present in the pack, based on their names.

The format used in the XML file looks like the following:



The first two lines are obligatory - they inform the system that this is a Theme pack.

The third line contains information about Theme name, author name and copyrights. The "title" parameter is MANDATORY. Take care to use some unique name for your theme as two themes with identical names can't be installed at the same time. "Screenwidth" and "screenheight" are also MANDATORY and their values have to be always the same as in the above example. "Author" and "copyright" parameters are optional and you can skip them.

Next two lines tell the system which images will be used as background pictures for the Flip open (Applications launcher) and Flip closed screen. Both are optional. If you skip any (or both) of them, the wallpaper won't be set. However, if you decide to use them, you have to include picture(s) in the theme archive. Both pictures can be in any of the supported formats (GIF, PNG, JPEG, BMP, MBM etc.) and their names have to be the same as used in the XML file. The resolution of your Flip closed wallpaper is 208x189 and the resolution of Flip open wallpaper is 208x256 pixels.

The next part between two "CondensedColorScheme" tags describes colors of the user interface (menus, windows, dialogs, text etc). All three lines of this section ("darkcolor", "midcolor" and "lightcolor") are MANDATORY. You have to use hexadecimal values for your colors. Hex values can be obtained in advanced graphic programs like Photoshop - you can select your favourite color in their palette window and the corresponding hexadecimal value will be displayed for you to copy and paste to your theme file.

The "SystemSound" part is OPTIONAL. You can use it if you want to include ringtones and alarms in your theme. You can use ALL or ANY of the sound types shown in our example above. E.g. you can only set the main ringtone and skip all the rest. All files have to be included in the archive in any of the supported formats (MP3, WAV, MID etc).

The above screenshot only shows some parameters. Full list of all possible tone types can be checked in C:\System\Data\themes\sound folder - simply use folder names as parameters for sound files to be installed with your theme. Folder names are pretty obvious and don't require desciption.

The last part (colors id="FcStandby") is responsible for color of texts displayed in the Flip closed mode (Phone screen). This part is OPTIONAL. "Operator" is the color of your operator name. "Softkeys" is the color of text displayed above the "OK" button. "Clock" is the color of time and date displayed in FC mode. "Alarm" is the color of alarm time in FC mode. "Other" is the color of Area info displayed under the operator name (if your network supports Area info).

Other files:

Your theme pack may contain other files. They are not mentioned in the XML file because they are used automatically if the system finds them in your pack. If they are not there, the system will use colors (defined in the XML file) instead of graphic skins. This may be useful if you want to save some operating memory. All these files have to be called exactly as below and they have to be in Symbian's native MBM format. Their resolution has to be as described here while the number of colors is not important.

• AppickerSkin.mbm: This file is the backgroung picture for the top "icon bar" of your phone in Flip Open mode (the one with 6 customizable application icons). It also contains the "selection image" that is shown under the selected icon. The MBM file consists of 3 frames. The first frame contains a 208x25 pixel skin for the icon bar. The next frame contains 6 "selection images" aligned vertically. Each image is 40x25 pixels. The whole frame is 40x150 pixels. There are 6 images in this frame because you can make each of the 6 icons on top of your screen have a different shape of the selection. The third frame is a greyscale "mask" for the second frame. Use white color for areas of the previous frame that you want to display and black color for areas of the previous frame that you want to make transparent. You can also use shades of grey for partial transparency - the darker grey the more transparent the area. This third frame should be created as 8-bit greyscale.
  
• DialogSkin.mbm: the skin for the title bar of all dialog windows. This MBM file contains TWO frames: the first frame is for normal dialog title bar and the second frame is for "selected" dialog title bar (e.g. when you tap on it or drag it). Resolution: 208x25.
  
• FcTitleBarSkin.mbm: the skin for top bar of Flip closed mode. Resolution: 208x20. This file consists of one frame only.
  
• LauncherSkin.mbm: background "balls" for application icons in Applications launcher. This file consists of two frames. The first frame consists of 5 "balls" aligned vertically, each 44 pixels high/wide. You can use 5 identical "balls" if you want a static selection or you can make an animated selection by creating each ball as one frame of your animation. Resolution of the entire picture: 44x220. The second frame is a greyscale "mask" for the second frame. Use white color for areas of the previous frame that you want to display and black color for areas of the previous frame that you want to make transparent. You can also use shades of grey for partial transparency - the darker grey the more transparent the area. This frame should be created as 8-bit greyscale. Of course, your "balls" don't have to have a ball shape - you can use any other shape.
  
• ListBoxSkin.mbm: this is a "bar" used for selection on a list. Resolution: 60x19. This MBM picture consists of one frame only.
  
• MenuSkin.mbm: this file consists of FIVE frames. The first frame is a background for menu bar. Its resolution is 208x22. The second frame is a bar that indicates selected menu title. Resolution: 19x19. The third frame is a mask for the second frame and has the same resolution of 19x19. This frame is a greyscale "mask" for the second frame. Use white color for areas of the previous frame that you want to display and black color for areas of the previous frame that you want to make transparent. You can also use shades of grey for partial transparency - the darker grey the more transparent the area. The fourth frame is a menu selection bar. Resolution: 19x18. The fifth frame is also menu selection bar, but in selected (i.e. "clicked") state - you can make it e.g. a bit darker or lighter than that in the fourth frame. It has the same resolution of 19x18.
  
• StatusBarSkin.mbm: the skin for the bottom bar of your phone in Flip Open mode and for the top bar in Flip closed mode. Consists of two horizontal strips, each 18 pixels high, 208 pixels wide. Resolution of the entire image: 208x36.
  
• MenuExtraSkin.mbm: this file contains skins for the "drop down" menus' background. It consists of four frames. The first frame is the actual background image. Good size to try is 76x58 pixels. The central part of the picture will be repeated to cover the menu size. Top, bottom, right and left 12 pixels of this picture will be shown on the menu's edges, so - if you want - you can use them for some 3D effect or for some frame that will be drawn around the menu body. The second frame contains the bar/stripe that separates menu sections. Use 76x2 pixels size. The third frame is a collection of radio buttons that appear on the menus. The 8 images in the first row are all round option buttons (clear, set, clear highlighted, set highlighted, clear dimmed highlighted, set dimmed highlighted). The second row begins with four ticks (set, set highlighted, set dimmed, set dimmed highlighed), and the four last buttons contained in it are the arrows indicating that there is a cascading sub-menu (set, set highlighted, set dimmed, set dimmed highlighed). The size of each image shall be in the area of 14x14 pixels, so the whole BMP shall be 112x28. Finally, the fourth frame is a transparency mask for the third frame. Use white color for areas of the previous frame that you want to display and black color for areas of the previous frame that you want to make transparent. You can also use shades of grey for partial transparency - the darker grey the more transparent the area.
  

Note: if your are not going to create skins with many graphic elements on their entire area but only color bars with one pattern, you can save some memory by making them much smaller. In such case, your skins don't have to have full screen width (208 pixels). It is enough to create a shorter skin, i.e. both sides (e.g. corners) and some short central part - the center of your skin will be copied by the system to fill the entire bar width between corners. Experiment with it yourself to obtain the best result.


Flip closed mode icons:

The last thing you can change using Themes is background "balls" of Flip closed mode icons. Skins for these "balls" have to be put in a separate folder in your pack (while all the remaining files are in the "root" of your package). The folder is called "Standby" and should contain 3 image files in PNG format. The resolution of all three pictures is 42x42:

• ShortCutSelectedBall.png: this image contains the ball in selected state (i.e. when you select an icon by rotating jog dial).
  
• ShortCutUnselectedBall.png: the ball in unselected (i.e. normal) state.
  
• ShortCutHalo.png: this picture contains a "halo", i.e. a "selection circle" that moves between icons when you rotate the jog dial.

These pictures have to be created in PNG format. PNG supports transparency. Unlike with the MBM frames, there is no need to make a separate mask for transparent areas. Simply create your PNGs with transparent parts for areas you want to be invisible and that's it.

That's all. All you have to do now is to complete all your files: the Theme.xml file, all image and ringtone files in the same folder as the Theme.xml file plus (optionally) the FC mode icon balls in a separate "Standby" folder and ZIP them all using any ZIP archiver. Then just change the extension of your ZIP archive to .utz and you can upload and install the theme in your machine. Have fun!

Note: check our FAQ for information about the MBM format and how to create multi-frame MBM files.