Change Skin for Nokia 9500 and 9300

Finally, the article you’ve all been asking for. Hayden ‘Switchblade’ Smith takes a look at the plain and drab colours of the Nokia 9500 and 9300 and shows you how to skin your own themes. This article comes with a repetition of some common sense. Make sure you back up your phone before attempting this, and if you get into trouble and loose data, then that’s why you backed up. Although I’m sure we’ll be around on the Forums to help you out, all this is at your own risk.

Introduction

After the success of Epocware’s "Colours" application for the 9210, and the modern love affair of being able to customise the look and feel of applications to suit individual users desires, it appears that Nokia have dropped the ball in regards to customising the 9500. With its limited colour choice and simple wallpaper changes, there doesn’t seem to be a lot of scope to play around. Fortunately behind the scenes, Series 80 is far more customisable system than expected. Let me tell you about skinning...

In this article we’re going to look at what’s called "skinning," a term used to describe changing the desktop to another look. What you should realise is, of course, that the basic view of the Series 80 desktop is, in fact, a skin. There are just no notes on how to change this yourself included with the phone.


Where Everything Goes

All the skin data is stored on the Z: drive (which we can't look at on the device), but fortunately it is reproduced in full in the Series 80 Software Development Kit (SDK) as this includes an Emulator. The standard Nokia skins consist of 11 graphical files (MBM files), with these MBM file containing almost 250 separate images. There are 2 SKE files containing information on images for the messaging application, and a single SKN file containing information on the location of the MBM files, which fonts are used, and which colours are displayed.

The zip file download for this tutorial contains all the files you will need to install a new skin. The actual process of installing the skin is copying a skinpath.txt file to c:\system\data\skinconfig. Very important, do not edit this file in Notepad or Documents on the smartphone as you will corrupt it and the skin will not work, causing your phone to revert to the default skin. Once you’ve copied the skinpath.txt file, place the contents of the Skins folder (from the tutorial zip file) into c:\System\Skins\ while preserving the rest of the directory structure The files in C:\system\skins\0x101F8EDB\ contain all the data about our new skin that Series 80 needs.

But how do we make the contents of the Skins folder? Unzip the "editable" folder onto your PC. In the "editable" folder are 11 more folders, one for each MBM file (the folder names match the MBM file names that exists in the "0x101F8EDB" folder). These folders contain all the bitmapped images from the MBM files in numerical order. When you come to recompile the MBM files with your own images, make sure you get the order correct or the skin will not work, display incorrectly, or possibly soft reset your device. These BMP files are what you need to edit in your image editor to make your own skin, you can change as much or little as you want. When making your own MBMs I'd recommend using Dazler's MBMWhizzard application available, which you can download from his site, along with a tutorial on how to use it.

So far I've be using Symbian’s command line tool, bmconv.exe, application, but typing out the command line to merge 103 bitmaps into one file is murder.

Editing A Skin

You’ll want to read this in conjunction with the reference lists at the end of this article.

First get the background image you want to work with, I thought I'd start with some thing simple as this Matrix Wallpaper. When choosing your wallpaper remember that the clock on the Desktop always has a solid colour background, so you will need to select a design where this will not effect the aesthetics. Resize or crop your image until you have an 800x200 pixel image. This image is going to be sliced and diced a million ways to make all the elements. It’s rather like making a digital jigsaw.

Now open bitmaps 1-4 of Skinappview, create a new layer on each and overlay your image. Your skin should only occupy the non-white areas, so get your graphics package to copy the image (overlay) only if the area underneath is not white. Similarly with bitmap 9, this is the top left corner of the screen. Once done you are now ready these nine images into one MBM image.

Next we need to make your desk wallpaper (which will fill the white area that we avoided in Skinnappview). Crop the first 92 pixels from your 800x200 image. Now copy the next 463x200 pixel section into a new file. Crop 6 pixels from the top and then save the resulting 463x194 image as a jpg image. When you install your skin, set this image as your wallpaper to complete the effect.

For the CBA panel (that’s the column on the right which shows the options for the four soft buttons), copy a 200x200 pixel section following on from the section used for the wallpaper and save it as all 3 images in the skincommandbar folder. This is the second completed MBM Image, so go ahead and compile this as well.

For skinapptitle, overlay the image in bitmap 5 with a 640x480 selection of your chosen wallpaper starting at point (92,0) on the image. This removes the thin coloured bar at the top of the desk screen, so needs to be this exact section to fit in on the desktop. Bear in mind that certain views will cause this image not to fit in if you are using a strong pattern or picture.

Now all that remains is to edit the relevant items in skinwidget, skinscrollbar and skindialogframe to fit in with your colour scheme, then compile those images into MBM files. There is the mildly mammoth task of editing the orange.skn file to correct the colours to be as you desire (this skin is based on the Orange skin file, hence the filename orange.skn). I'd recommend taking a few screenshots then adjusting the colours in an art package such as Paint Shop Pro, and then using the colour values (which will be displayed by your graphics application) from your mockup in your .skn file. The second appendix to this article lists all the colour values that have been worked out so far. We’ll edit this and keep it up to date as we discover more.

Now we can take these MBM files, and the SKN file, and drop them into the C: of our 9500, and there we go.

Appendix 1: List of MBM files and what they contain:

1. MMSFORM.MBM - Images relating to the media applications regarding what opens the MMS file you have received.
2. MSGEDITORVIEW.MBM - Borders and lines used by the messaging application.
3. SKINAPPTITLE.MBM - The Application title bar background, note only 2 images contain data, the rest are blank, I don't know why.
4. SKINAPPVIEW.MBM - Images on the left hand side panel and title bar as used in various guises, images 1-4 and 9 are the ones you should edit, remembering to keep your design out of the white-space.
5. SKINBORDERS.MBM - Borders for various panes.
6. SKINCOMMANDBAR.MBM - The right hand side Control Button Area background (remember display.mbm all 9210 skinners), contains 3 identical images (no idea why 3) sized 200x200 pixels.
7. SKINDIALOGFRAME.MBM - Image files for all the dialogue box frames and tabs.
8. SKINGENERAL.MBM - General images used in various places on the device.
9. SKINMENU.MBM - All the images used for borders and graphical extras on the menus.
10. SKINSCROLLBAR.MBM - Frighteningly enough all the images used to make the scrollbars.
11. SKINWIDGETS.MBM - Icons and small images used around the device.

Appendix 2: List of SKE Files and contents.

1. MmsUiFormDefaultSkin.ske - Details of the images in MMSFORM.MBM and colours to use with it for use with MMS messages.
2. MsgEditorView.ske - Details of the images in MSGEDITORVIEW.MBM for the messaging application.

Appendix 3: SKN file values

The SKN file is just a plain text file editable on your PC or device. It contains colour data for all the applications on the 9500 (apart from applications that assign their own colours for themselves), information on the SKIN*.MBM files, and information on fonts used on the device. Below is a list of colour numbers and the relevant application that is effected by that change.

You do not need to include every colour in your SKN file, any that are not included will use the default colour from the default skin. The values should be in decimal format 0-255 and are RGB. Hence to set the main background colour to a bright red I would use a very small SNK file of three lines…

[code]
2 255 0 0
[/code]

You can add in as many lines to your SKN file as you need, just remmber to stick to the syntax of…

[code] [red component] [blue component] [green component]

…on each line.

[code]
[color_section]
0 calendar/calculator/sheet bg colour
1 calendar/calculator/sheet normal text colour
2 Telephone/messaging/contacts/control panel/file manager/documents/clock/images/music/standard? bg colour
3 Desk Icon text/telephone/messaging/contacts/control panel/file manager/documents/notes/clock/app title/images/music text colour.
4 unknown
5 unknown
6 messaging/telephone/control panel/file man highlight
7 desk/messaging/telephone/contacts/control panel/fileman/ highlight text colour
8 unknown
9 greyed out variable text
10 unknown
11 unknown
12 dialog bg colour
13 unknown
14 unknown
15 unknown
16 dialog title colour
17 unknown
18 menu top bg colour
19 menu top text colour
20 unknown
21 menu top highlighted text colour
22 menu background colour
23 menu active option colour
24 unknown
25 selected menu item
26 unknown
27 greyed out menu item
28 highlighted greyed out menu item
29 unknown
30 unknown
31 unknown
32 unknown
33 unknown
34 unknown
35 unknown
36 msgbox text colour
37 msgbox bgcolor
38 unknown
39 unknown
40 unknown
41 unknown
42 unknown
43 unknown
44 unknown
45 unknown
46 unknown
47 unknown
48 unknown
49 unknown
50 unknown
51 cba text colour
52 unknown
53 app icon text colour
54 app titlebar (status?) text colour
55 unknown
56 cba greyed out text colour
57 unknown
58 unknown
[extra_color_section]
0 unknown
1 unknown
2 dropshadow colour 2
3
4 drop shadow colour 4
5 drop shadow colour 3
6 drop shador colour 1
7 drop shador colour ?
8 border bottom right
9 unknown
10 unknown
11 unknown
12 unknown
13 unknown
14 unknown
15 unknown
16 unknown
17 unknown
18 unknown
19 unknown
20 unknown
21 unknown
22 unknown
23 unknown
24 calendar/calculator/file select in fmanager highlight colour
25 unknown
26 unknown
27 unknown
28 unknown
29 unknown
30 unknown
31 unknown
32 unknown
[extended_color_section]
0x101F892f unknown
0x101F809a unknown
0x101F892a unknown
0x101F892b unknown
0x101F892c unknown
0x101F8974 unknown
0x101F8094 unknown
0x101FAC6A unknown
0x101F8091 unknown
0x101F8092 unknown
0x101F8099 unknown
0x101F8093 unknown
0x101F8098 unknown
0x101F8097 unknown
0x101F809c unknown
0x101F809d unknown
0x101F809e unknown
0x101F8929 unknown
0x101F87B4 unknown
0x101F87B5 unknown
0x101F87B6 unknown
0x101F87B7 unknown
0x101F87B8 unknown
0x101F87B9 unknown
0x101F8975 unknown
0x101F8976 unknown
0x101F8095 unknown
0x101F8090 unknown
0x101F8096 unknown
0x101F8930 unknown
0x101F8931 unknown
0x101F809b unknown
0x101FAC35 unknown
0x101FAC36 unknown
0x101FAC37 unknown
0x101FAC38 unknown
0x101FAC39 unknown
0x101FAC62 unknown
0x101FAC63 unknown
0x101FAC67 unknown
0x101F87E2 unknown
0x101F87FD lhs panel clock colour
0x101F87FE unknown
0x101F87FF unknown
0x101F8800 unknown
0x101FAC5C unknown
0x101FAC5D unknown
0x101FAC5E unknown
0x101FAC5F unknown
0x101FAC60 unknown
0x101FAC61 unknown
0x101FAC68 unknown
0x101FAC69 unknown
0x101FAC70 unknown
0x101F8801 unknown
0x101F8802 unknown
0x101F8803 unknown
0x101F8804 unknown
0x101F8805 unknown
0x101F8806 unknown
0x101F8807 unknown
0x101F8808 unknown
0x101F8809 unknown
0x101F880A unknown
0x101F880B unknown
0x101F880C unknown
0x101F880D unknown
0x101F880E unknown
0x101F880F unknown
0x101F8810 unknown
0x101F8F05 unknown
[/code]

Download File here
Download the Matrix skin and templates

- Heyden Smith