How to Create skin and theme in A1200 on Windows

[eakrin]

Skin and Theme in A1200 compare with E680i/A780 (for former E680/i/A780 users)

in Motorola A1200 (Ming), software version is newer than E680i and A780. theme structure and Theme Installation procedure was changed. First meaning of theme in E680i and A780, is split into skin and theme. skin is contain icon, skin, and color configulation. Theme is contain wallpaper and power-on and off screen. but icon file structure and skin file sturcture is the same as E680/i/A780. so we can use old tool to create iconres.ezx and skin file for A1200.



What is A1200's skin (for newbie in Motorola Ezx phones)

skin is components on screen that we see or tap on it. such as button, status bar, dialog, menu, check box, icons. skin components is splited into icons, skin, and colors.

ICON is mean all images that display on screen by drawing in the same size as in icon file.

SKIN is mean all images that display on screen by complex method like stretch, mask, resize.

COLOR is mean color defination for component that doesn't use picture to draw. like fonts, background, highlights.

all icon components are packed in iconres.ezx file with icon data header and all skin components are in one PNG image file and packed in to .skn extension file. I created a tool to extracting and packing icons and skin call IconPackager and SkinPackager. in M$ Windows you need to install Perl Interpreter before you can make its work.

Skin structure for install with Skin Installer
skin Installer is a Mpkg program that use to install and change new skin in A1200. because A1200 cannot install theme by itself. so we need to create skin that can use with Skin Installer. skin in A1200 should have 3-4 file like this

1. skin configulation file in .pskn extension.
2. icon file in iconres.ezx.
3. skin file in .skn extension.
4. skin logo image file.

see detail about Skin Installer AND Theme Installer here

if you can not telnet into A1200 to get default skin and theme. use this lin script to copy them to your MMC. get A1200skin.lin in attachments below. everything 'll be in skins folder in MMC.

1. Skin configulation file (*.pskn)
skin configulation file is normal text file that contain configulation of skin components. skin configulation file contain three section Theme config table, Theme Color Palette Table, and Theme Multi Lang Name. this is a default A1200 skin, Maldives Blue.

[THEME_CONFIG_TABLE]
ThemeName = Maldives Blue
ThemeColorPaletteIndex = 1
ThemeSkinFile = /usr/data_resource/skin/default1/HAINAN_01.skn
ThemeLogoIcon = /usr/data_resource/skin/default1/HAINAN_01.jpg
ThemeIconDir = /usr/data_resource/skin/default1/
BlendingColor = 255 255 255
BlendingPercentage=40

[THEME_COLOR_PALETTE_TABLE]


[THEME_MULTI_LANG_NAME]
en-us = Maldives Blue
zh-cn = ไบš็‰นๅ…ฐๅคง็ปฟ
zh-hk = ไบž็‰น่˜ญๅคง็ถ

in theme config table its has a skin components defination. like name, color, icons file, skin file.

ThemeName is use to define name of skin (don't confuse about the word skin and theme. Motorola change concept of theme to skin and theme but didn't change configulation file)

ThemeName = Your Theme Name

ThemeColorPaletteIndex is use to define color palette of skin components. color palette is a set of predifined RGB color for skin in colorpalette.cfg file. there are 3 default palettes in colorpalette.cfg. If color palette is 0 (zero) It's mean no color palette defined. skin will use colors from theme color palette table section.

ThemeColorPaletteIndex = 0

ThemeSkinFile is a filename of skinfile (.skn extension file). skin that install by skin installer should have only file name in ThemeSkinFile like this

ThemeSkinFile = YourNewSkin.skn

ThemeIconDir is a folder path that icon file (iconres.ezx) is in. skin that install by skin installer should have only file name in ThemeIconDir like this

ThemeIconDir = iconres.ezx

ThemeLogoIcon is a screenshot of theme that use by color scheme setting. but in A1200 color scheme setting is only read themes in /usr/data_resource/theme folder. so theme logo icon is useless for us. but it should be like this

ThemeLogoIcon = themelogo.jpg (can be png or gif image)

BlendingColor is a RGB color that use to blending with the wallpaper.

BlendingPercentage is a percentage of color that use to blending with the wallpaper.

in theme color palette table, It 's use to define skin color when ThemeColorPaletteIndex is 0. theme color palette table should have all lines like this or have no line when use color from colorpalette.cfg by specific theme color palette index.

[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

this pictures display color of each components of skin.



in theme multi lang name section is use to define theme name in another languages. this section is useless for us. so define name only in en-us language.

so your skin configulation file (*.pskn) should be like this

[THEME_CONFIG_TABLE]
ThemeName = Your Theme Name
ThemeColorPaletteIndex = 0
ThemeSkinFile = YourNewSkin.skn
ThemeLogoIcon = ThemeLogo.jpg
ThemeIconDir = iconres.ezx
BlendingColor = 255 255 255
BlendingPercentage=40

[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

[THEME_MULTI_LANG_NAME]
en-us = Your theme Name

skin configulation file is a Unix text file. the difference between windows text file and unix text file is a new line character. windows text file use 2 characters at the end of line but unix text file use only 1. Skin and Theme Installer cannot handle windows text file. so becareful when editing skin configulation file use only unix text editor line editplus.

2. Icon file (Iconres.ezx)

all icons of skin are packed in iconres.ezx file. we can extract and packed its by IconPackager and SkinPackager. Both of them are perl script and can run by Active Perl. Active perl can be download here and IconPackager and SkinPackager are here.

after everything completed. put unpackIconRes.pl is the same folder as iconres.ezx and double click on it. unpackIconRes.pl 'll execute by active perl and create a folder name "icons" that contain all icons.



icons can devided in many groups by prefix in its filename. important icon group like GNB, CST, Home, should be changed when create new skin. some groups are use by application like Bluetooth, Calculator, Call, Calender, Camera, Email, Fm radio, FMMS (file manager), RPlayer (real player), Sync, Task, WorldTime. and some group are use with skin like Dialog (status dialog icon), SBar (status bar icon like signal, battery), General, and Cut Screen (general and cutscreen is a skin components that is in icon file such as button, combobox), CLI (icons display when flip closed)

- iconres.ezx is use by merged it with default icon file in /usr/data_resource/icon/iconres.ezx. so we create only icons that need change in your skin other icons 'll used from default iconres.ezx file by phone automatically.

- do not change icon's size when edit icon. because when icon's size is wrong phone will stretch it.

- do not change icon's name. because phone pick icon by name.

- original icon file format is GIF that can have only 256 colors. this can make edge of icon cracked when save icon from another file format. but PNG Image can be use in iconres.ezx but It's size is 1 time bigger than GIF image.

- new feature of A1200 is animated icon. in Home_XXX_ani icon set, and GNB_Acti icons 'll display animated when got focus. but we can use only normal GIF image or create a full GIF animate icon.

after completely create new icons for skin. put packIconRes.pl in the same folder as "icons" folder and double click on its to execute. new iconres.ezx file 'll created in file name newiconres.ezx in the same folder as packIconRes.pl. rename it into iconres.ezx.

3. Skin file (*.skn)

all skin components are in one png image and packed into .skn file. and same as icons we can extract skin image by SkinPackager. SkinPackager can download here



put unpackSkin.pl is the same folder as .skn file. rename its to motoskin.skn and double click on unpackSkin.pl. unpackSkin.pl 'll execute by active perl and create a folder name "skins" that contain skin image in PNG format.

skin components can devided in many groups by prefix in its filename.

- becareful when edit skin image about component size and position.

after completely create new skin component image. put packSkin.pl in the same folder as "skins" folder and double click on its to execute. new iconres.ezx file 'll created in file name newiconres.ezx in the same folder as packIconRes.pl. rename it into iconres.ezx.

4. Skin logo image file (*.jpg, *.png)

Logo image is a image that use to show your skin to user before install it. It should be a screenshot. It use only for user to see skin or theme before installation. and for skin creator do not forgot in put your name, skin name, and skin version in this image.

[A1200 logo]

Distribute your skin file

after finished all theme files. put all skin files in the same folder and compress them. (compress folder for easy installation)

and for someone who cannot telnet to A1200 to get default skin theme and icon. use getA1200skin.lin to copy them into your MMC.

[roly01]

the link for the icon packager dosent work

[BoH]

Will this manual fit to E6? I'm not sure

[eakrin]

pls read a rewrite article at http://www.motorolafans.com/forums/s...ead.php?t=5703