Development of EZX Themes

[vishrut_n_shah]

[Tutorial] Creating a skin

hello friends

first of all i would like to give thanks to all developers and especially to Maverick from mobilejunkies.net

here is the complete solution for development of theme for EZX user,.....




Finally here it is (read the ending lines of the tutorial first please, since some screenshots need to be added etc):

What you need:
1. A default skin to parse and edit into a new skin. (You may use any other modified skin too, like I am using iPhone Revisted for explanation)
2. Notepad++ (normal notepad cannot save in Unix file format)
3. Active Perl
4. Icon and Skin Packager (Atteched with this thread)

To create a skin, you basically have to edit three things
1. Skin config file, that is *.pskn
2. Icons file, that is Iconres.ezx
3. Skin file, that is *.skn

Lets see how to edit them in order
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------

Skin Config File (.pksn)
This file can be seen as divided into three tables; THEME_CONFIG_TABLE, THEME_COLOUR_PALETTE_TABLE AND THEME_MULTI_LANG_NAME

Here's the .pskn file of iPhone Revisted by Shadow_cruiser

[THEME_CONFIG_TABLE] 
BlendingColor = 0 0 0 
BlendingPercentage = 100 
ThemeColorPaletteIndex = 2 
ThemeCurrentUse = /ezx_user/download/appwrite/setup/themes/iPhone/iPhone.pskn 
ThemeIconDir = /ezx_user/download/appwrite/setup/themes/iPhone/ 
ThemeLogoIcon = 
ThemeName = iPhone 
ThemeSkinFile = /ezx_user/download/appwrite/setup/themes/iPhone/iPhone.skn 
ThemeTextSize = 1

Lets see what they mean:
BlendingColor = R G B
The numbers 0 0 0 means Red = 0, Green = 0 and Blue = 0. The colours are defined everywhere in hex. To see what 0 0 0 combines into, run Paint. Click on Colours > Edit Colours. Then click on Define Custom Colour. Now put 0 0 0 in the boxes there. The result will come to black.

BlendingPercentage = x (where x is a percentage)
BlendingPercentage defines the percentage of the "BlendingColor" which should be blended with your wallpaper

ThemeColorPaletteIndex = x (where x is a number)
If this is set as 0, it means no predefined color palette shall be used. Instead the phone will use the color palette you define in THEME_COLOUR_PALETTE_TABLE
If this is set as 1 or 2, as shown above, the skin will use a predefined colour palette (from colorpalette.cfg). You don't need to fill out the THEME_COLOUR_PALETTE_TABLE in this case.

The following three lines are actually used to tell the phone how to display the skin in the skins menu of your phone:
ThemeCurrentUse = /ezx_user/download/appwrite/setup/themes/xxxxx/xxxxx.pskn
ThemeIconDir = /ezx_user/download/appwrite/setup/themes/xxxxx/
ThemeLogoIcon = /usr/data_resource/skin/default1/xxxxx.jpg (this is basically useful for us, but set it up like this anyway)
(where xxxxx is the name of your skin, WITHOUT spaces)

ThemeName = xxxxx (where xxxxx is the name of your skin)
This simply holds the name of your skin. Notice how it has been used in iPhoneRevisted

ThemeSkinFile = /ezx_user/download/appwrite/setup/themes/xxxxx/xxxxx.skn (where xxxxx is the name of your skin)
This holds the path to where the .skn file (see below for details on .skn file) will be

Now coming to THEME_COLOUR_PALETTE_TABLE.
It will, as said before, only be used when ThemeColorPaletteIndex = 0

Although iPhone Revisted doesn't use a THEME_COLOUR_TABLE (although its included in the .pskn file, its not used since ThemeColorPaletteIndex = 2) , if it did, it would look something like this:

[THEME_COLOR_PALETTE_TABLE] 
ThemeBackground = 255 255 255 
ThemeBase = 255 255 255 
ThemeForeground = 0 0 0 
ThemeText = 0 0 0 
ThemeButton = 28 111 122 
ThemeButtonText = 0 0 0 
ThemeHighlight = 186 200 248 
ThemeBrightText = 0 0 0 
ThemeHighlightedText = 0 0 0 
ThemeDisabledText = 90 90 90 
ThemeAMBottomHighlight = 186 200 248 
ThemeAMBottomHighlightText = 0 0 0

As you can see all the colours are again in hex (R G B)
Since it would be pretty difficult to explain in words what each line controls, it would be easier to display through a picture***(some which have not been shown in the picture are pretty straightforward and should be understandable by themeselves, or if not, through some experimentation)

Refer the image named as information.gif

Now coming to final part of .pskn file: [THEME_MULTI_LANG_NAME]. iPhone Revisted's is like this:

[THEME_MULTI_LANG_NAME] 
en-us = iPhone 
zh-cn = iPhone 
zh-hk = iPhone

The basic template for this section is:
[THEME_MULTI_LANG_NAME]
en-us = Your theme name in english
zh-cn = Your theme name in Chinese (optional line, can be removed)
zh-hk = Your theme name in HK (whichever language that is, again option line and can be removed)

Now something important. As with most other file types in our phones, the .pskn file is a UNIX file type. So you must use

Notepad++ or any other application which lets you save file in UNIX file type.

End of .pskn explanation
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------

.skn file (Skin file)
Some images of a skin are in the .skn file. For example, Check boxes, radio boxes, scroll arrows etc.

Unpacking, updating and packing of .skn file takes place in the same manner as iconres.ezx with slight alterations (see below). You just need to use SkinPackager which is executed using ActivePerl.

To unpack the images, put unpackSkin.pl in the same folder as the .skn file of your base or default skin (in my case iPhone Revisted). Then rename the .skn file of your skin to motoskin.skn. Now double click on unpackskin.pl to execute it. A new folder by the name of "skins" will be created with the skin image. To edit it, you just have to replace the components of the skin image with the ones you want.

Here are somethings you should keep in mind:
1. The skin image is in PNG format.
2. When putting in new components, you must not increase the size of a component or change its place. Since the phone picks the image from certain predefined places in the skin image
3. Do not change the name of the skin image.

Once you have edited the components of the skin image as you desire, pack it.
To pack it, put packSkin.pl in the same folder as the updated "skins" folder and double click on packSkin.pl to execute it. A new file will be created by the name of newmotoskin.skn, rename it to the same name as the .pskn file before installing or publishing (e.g. iPhone.skn when .pskn file is named iPhone.pskn)

End of .skn explanation
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------

Iconres.ezx (Icon dump)
Iconres.ezx is something like .dat files in Motorola P2k phones, in the sense that it contains all the icons of a skin.

To unpack or extract the icons from Iconres.ezx, you will need Active Perl (Install in your pc) and Icon Packager
Put unpackIconRes.pl in the same folder as the Iconres.ezx of your base or default theme that you are using. Double click on unpackiconres.pl to extract the icons out of iconres.ezx. A new folder by the name of 'icons' will be created containing all the extracted icons.

Basically to put in icons, you have to replace the icons in 'icons' folder with the one you want.

You can see that icons start with different prefixes in their names. Icons with following prefixes are recommended to be changed if you want to make a worthwhile attempt at making a skin:
1. Home_ (main menu icons)
2. GNB_
3. CST_
4. Dialog_ (icons in various messages, eg error message)
5. Sbar_ (this would change what we call statusbar icons in p2k motorolas, contained in DRM)

There are various other categories relating to real player, calendar etc. After applying the skin you are using as the base or default skin, you can obviously view exactly what icon is for what, so you can easily put in a replacement icon. More icons replaced usually lead to a better skin package

Refer the image named as iconer.gif

Here is somethings you should keep in mind while changing those icons:
1. Its not necessary to replace or put in ALL the icons, but only those which you want to be replaced in comparison to your original skin. Since your iconres.ezx is merged with the one in /usr/data_resource/icon/ before applies your skin, all other icons which have not been put in will be loaded from the default iconres.ezx

2. The original type of images is GIF. For any animated icons you might want to put in, you must obviously replace them with animated GIFs. You may replace others with PNG images, since PNG allows more colours to be put in (leading to higher image quality, but also a higher size of the skin)

3. You are not to change the size (in terms of area) of any icon, the phone wont display it properly

4. And obviously you are only to replace icons. In other words you should not change the names of the icons, since the phone shows the icons in its interface by the name it already knows (the original names)

Once you are done, pack the icons by putting packIconRes.pl in the same folder as "icons" folder. Then double click on packIconRes.pl to create an updated newiconres.ezx based on the updated Icons folder. Before installing or publishing the skin, make sure you rename newiconres.ezx to iconres.ezx

End of iconres.ezx explanation
--------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------

After you have completed all modifications, just put .pskn, .skn and iconres.ezx file in one folder, create an archive and then publish it. You may include splash screens if you want.
Thanks to eakrin's tutorial, I have learnt many things from it.

Try Try but Don't Cry

[l0veysingh]

HEY dude i think this procedure is GIVEN by EAKRIN lot of time before.............



correct if i m wrong............

[vishrut_n_shah]

Ya you r absolutly right...............but for begginners it is reminder...........

[l0veysingh]

but i think NEW MEMBERS always look at STIKIES first

and there is a sticky present by EAKRIN


so i tkink there is no need to make similar thread again for that



sorry if i write something wrong..

[Konig]

Its no problem. everybody puts a different perspective of writing the same thing. I know maverick very well, and he's done a great job of putting it together in easy to understand English

[l0veysingh]

okkk KONIG

[ady_thakur]

I prefer ezxcodec to edit the skins....
Its very much easy to use than this one......