How to create Theme for A780/E680i on Windows (Complete)

eakrin · #1 02-23-2006

Chapter 1 : What is a Theme in A780/E680i?

Requirement
1. File archiver utility that can packing/unpacking TAR and GZIP format. I use 7-zip. 7-Zip is free software distributed under the GNU LGPL. Look for detail and download 7-zip at www.7-zip.org
2. .mtf theme file for testing.

What is a Theme for A780/E680i? Theme is a package file of icon, button, scrollbar, menubar, statusbar, color, poweron/off animation. Theme file was create by tar and gzip and change extension from .tar.gz to .mtf. On Windows we can packing/unpacking TAR and GZIP format by 7-zip utility.

How to Extract Themes.
1. open mtf file with 7-zip until you found 2 folders ezxlocal and diska.
2. extract ezxlocal and diska folders.

After extract mtf file. Let see what is inside it.
1. Theme config file (Themename.dhm) is a normal text file that contain theme color palette and theme file path. Theme config files located at
/ezxlocal/download/appwrite/setup

2. iconres.ezx is a binary file that contain all icons in theme. the original iconres.ezx contain about 1900 icons (2.5MB).and locate at /usr/language/icon
but in theme that we want to created use only 200-300 icons and file size should not bigger than 1.0MB

3. skin file (.skn) is a binary file that contain PNG image that use for basic component in display like Button, Scrollbar, Checkbox, Radiobox, Menubar, Statusbar, and etc.

4. Power on/off animation is a GIF animate file that display after phone is on and before phone is off.

5. Ringtone for call altert or message alert.

** Power on/off animation and Ringtone are optional.

At this point you should see what was inside the mtf theme file. In the next chapter I 'll tell how to edit each component.

eakrin · #2 02-23-2006

Chapter 2 : Theme configulation files (*.dhm)

Requirement
1. Text editor like wordpad.
2. Knowledge about Linux or Unix file system.
3. Knowledge about RGB color system.

After we extract mtf file let see the first theme component to edit. Theme configulation file is a normal text file that contain theme color palette and theme file path. Use text editor like wordpad to edit it. Theme config files use .dhm extension and located at

/ezxlocal/download/appwrite/setup and

This is A780_01.dhm file from a brand new A780 phone.

[THEME_CONFIG_TABLE]
ThemeColorPaletteIndex = 1
ThemeGeneralAlertFile = /usr/language/ringtone/Notification_4.mid
ThemeIconDir = /usr/language/theme/default1/
ThemeLogoIcon = /usr/language/theme/default1/A780_01.jpg
ThemeMsgAlertFile = /usr/language/ringtone/Polyphonic_Alert_5.mid
ThemeName = Maldives Blue
ThemePowerDownImage = /usr/language/animation/Moto2.gif
ThemePowerUpImage = /usr/language/animation/Moto1.gif
ThemeSkinFile = /usr/language/theme/default1/A780_01.skn
ThemeSoundFileLine1 = /usr/language/ringtone/Glacier.mid
ThemeSoundFileLine2 = /usr/language/ringtone/Acoustica.mid
ThemeTextSize = 0
ThemeWallpaperFile = /diska/MyImages/Cheer-Heartbeat.PNG

[THEME_COLOR_PALETTE_TABLE]
ThemeBackground = 243 240 230
ThemeBase = 243 240 230
ThemeBrightText = 0 0 0
ThemeButton = 143 169 181
ThemeButtonText = 0 0 0
ThemeForeground = 0 0 0
ThemeHighlight = 183 198 240
ThemeHighlightedText = 0 0 128
ThemeText = 0 0 0

[THEME_MULTI_LANG_NAME]
en-us = Maldives Blue
zh-cn = ้ฉฌๅฐ”ไปฃๅคซๅ…ฐ
zh-hk = ้ฆฌ็พไปฃๅคซ่—

Theme configulation file contain 3 sections Config table, Color palette table, and Multi lang name

1. [THEME_CONFIG_TABLE] this section is use for define files and folders of theme components.

* ThemeName = Maldives Blue * Theme name is name of theme in english and can have space inside name.

* ThemeIconDir = /usr/language/theme/default1/ * ThemeIconDir is name of folder that contain iconres.ezx file.

* ThemeSkinFile = /usr/language/theme/default1/A780_01.skn * ThemeSkinFile is filename with folder path of skin file.

* ThemeLogoIcon = /usr/language/theme/default1/A780_01.jpg * ThemeLogoIcon is 320x240 Image filename and folder path that use in Setting -> Color scheme.

* ThemePowerDownImage = /usr/language/animation/Moto2.gif and ThemePowerUpImage = /usr/language/animation/Moto1.gif * ThemePowerDownImage and ThemePowerUpImage is 320x240 GIF Animate file that display when the phone is open and close.

* ThemeColorPaletteIndex = 1 * I don't know how to use ColorpaletteIndex but 3 default color palettes was
define in /usr/language/theme/colorpalette.cfg . so I set ThemeColorPaletteIndex to 0.

* ThemeWallpaperFile * Theme Wallpaperfile is use to define wallpaper. On A780/E680i wallpaper cannot be change by theme. Wallpaper can be change in Setting -> Wallpaper.

* ThemeGeneralAlertFile, ThemeMsgAlertFile,ThemeSoundFileLine1, ThemeSoundFileLine2 * all of this is use to define ringtone file of theme.

2. [THEME_COLOR_PALETTE_TABLE] this section is use for define colors of display component that doesn't use image such as font, highlight, background, etc. Color can be define in RGB system (Red Green Blue, start from 0 to 255 in each color).

* ThemeBackground * is color of display background and window background.
* ThemeForeground * is color of normal font.
* ThemeButton * is found only at title bar above some J2ME MIDlet.
* ThemeButtontext * is color of font on button, menubar, and statusbar.
* ThemeHighlight * is color of highlight.
* ThemeHighlightedText * is color of font when highlighted.

* ThemeBase ,ThemeText, ThemeBrightText * was not found where they was used. Please tell me if you found where is it.

3. [THEME_MULTI_LANG_NAME] this section is not nessesary. It's use for define theme name in another language.

PS. To define folder of theme components you should careful for
1. How to delete your theme? Theme_Uninstaller.lin can delete file in
/ezxlocal/download/appwrite/setup/Themename.dhm และ
/ezxlocal/download/theme/Themename.dhm (for old packing theme) และ
/ezxlocal/download/theme/icon/Themename.dhm/* (all file in this folder)
and now Theme Manager 1.6 can delete all file in ThemeIconDir.

2. Does your theme can use in USB storage mode? when you plug your usb cable in usb storage mode Phone memory (diska) and MMC memory (/mmc/mmca1) will changed to USB Flash drive and cann't be access by phone. Then if some part of your theme was on Phone memory or MMC memory It can't be access by phone. And phone will be hang because it cannot access those files.

3. Is there have an available space for Install theme file? To avoid phone hang when plug cable in storage we should install theme file in to ezxlocal memory. Because ezxlocal memory was not changed into USB flashdrive but ezxlocal size is only 5MB and have available size about 2-3MB upon your amount of contact, sms,mms, and email. If ezxlocal is nearly full phone will alert "Memory full" and then phone cannot run any application.

From the 3 cautions we should use folder of theme component like this for ezxlocal installed theme

/ezxlocal/download/appwrite/setup/ for Themename.dhm
/ezxlocal/download/theme/icon/Themename.dhm/ for iconres.ezx
/ezxlocal/download/theme/icon/Themename.dhm/ for skin file (*.skn)
/ezxlocal/download/theme/icon/themename.dhm/ for LogoIcon file

and to decrease space used in ezxlocal we move the rest of file in theme to diska like

/diska/MyThemes/Themename.dhm/ for wallpaper and poweron/off GIF

Because PowerOn/Off Animate and ThemeLogoIcon Image will never used when phone in USB storage mode.

After edit Theme configulation file. the next chapter we 'll edit icon and skin.

eakrin · #3 02-23-2006

Chapter 3 : Edit icons and skin images.

Requirement
1. Perl Interpreter "ActivePerl" at www.activestate.com (in Languages -> ActivePerl)
2. Perl script IconPackager for extract icon images and
Perl script SkinPackager for extract skin images. download here Icon & Skin Packager
3. Image editor like Photoshop.

iconres.ezx is a file that contain all GIF images for use in theme. iconres.ezx was create by icon data (name, size,amount) plus icon images in GIF format. To edit iconres.ezx I use IconPackager to extract it to GIF images. And Repacking them back to iconres.ezx after edit icons. (Iconrestool can use to edit iconres.ezx too. but it limit about 1000 icons in iconres.ezx. E680i orginal iconres.ezx contain 1000 icons. and A780 original iconres.ezx contain 1300 icons.)

How to extract icons from iconres.ezx by IconPackager.
1. Install Active Perl.
2. get the iconres.ezx by extract it from mtf file or copy from original iconres.ezx at /usr/language/icon.
3. copy unpackIconRes.pl and packIconres.pl in to the same folder as iconres.ezx file.
4. click on unpackIconRes.pl and Command prompt will display amount of icons in iconres.ezx file.
5. go into new created folder "icons". there have icon images, header file, and note.txt file.

Now you can edit, and remove icons in icons folder. First change an important icon like Top 5 Button (GNB menu, Addressbook, Message, and Call Pad), Application icon, command icon at Buttombar (Menu, exit, back), or Status icon (Signal, GPRS, real, Baterry indicator) on Top Statusbar. And remove unchanged icon to maintain size of iconres.ezx because phone will use icon from original iconres.ezx instead if icon was not found in theme's iconres.ezx. Becareful about icon filename and icon size. Icon filename is use in icon data table for access icon from phone. Do not change icon filename. And if icon's size was change phone will resize your icon to original size.

How to packing icon into iconres.ezx by IconPackager.
1. click on packIconres.pl Command prompt will display amount of icons in iconres.ezx file.
2. all icon in icons folder will packed into newiconres.ezx file in the same folder as packIconres.pl.

Skin-file is a file that contain image of basic display components such as button, statusbar, buttombar, checkbox, radiobox, dialog border, etc. Skinfile was created in the same metohed like iconres.ezx. so I use SkinPackager to extract skin-image from skin-file. The different from iconres.ezx is all skin component was in 1 PNG image.

How to extract skin-image (*.PNG) from skin-file (*.skn) by SkinPackager.
1. Install Active Perl.
2. get the skin-file (*.skn) by extract it from mtf file or copy from original iconres.ezx at /usr/language/theme/default1
3. rename skin-file to motoskin.skn.
4. copy unpackSkin.pl and packSkin.pl in to the same folder as skin-file.
5. click on unpackSkin.pl and Command prompt will display amount of images in skin-file file.
6. go into new created folder "skins". there have skin-image in PNG format, header file, and note.txt file.

List of skin component on left side from top -left to bottom-right

General_Arrow_Up 20x23
General_Arrow_Up_A 20x23
General_Arrow_Down 20x23
General_Arrow_Down_A 20x23
General_Arrow_Left 20x23
General_Arrow_Left_A 20x23
General_Arrow_Right 20x23
General_Arrow_Right_A 20x23
General_Stretch_Button_S 25x25
General_Stretch_Button_S_A 25x25
Stretch_ProgressBar_Background 30x25
Stretch_ProgressBar_Fillamount 12x21
Stretch_ProgressBar_Fillamount_D 12x21
Stretch_ProgressBar_Background_Small 32x13
Stretch_ProgressBar_Fillamount_Small 17x5
General_Radio_Button_Unselected_A 18x18
General_Radio_Button_Unselected 18x18
General_Radio_Button_Selected_A 18x18
General_Radio_Button_Selected 18x18
General_Check_Box_Unselected_A 20x20
General_Check_Box_Unselected 20x20
General_Select_Box_Selected_A 20x20
General_Select_Box_Selected 20x20
Stretch_ComboBox_Button 20x25
Stretch_ComboBox_Button_A 20x25
Stretch_ComboBox_Button_D 10x25
Stretch_ImageBorder_Topleft 20x25
Stretch_ImageBorder_Bottomright 20x25
Stretch_ComboBox_Border 26x25
Stretch_ScrollbarV_Arrow_Down 20x21
Stretch_ScrollbarV_Arrow_Down_A 20x21
Stretch_ScrollbarV_Arrow_Down_D 20x21
Stretch_ScrollbarV_Background 20x20
Stretch_ScrollbarV_Arrow_Up 20x21
Stretch_ScrollbarV_Arrow_Up_A 20x21
Stretch_ScrollbarV_Arrow_Up_D 20x21
Stretch_ScrollbarV_Foreground 20x20
Stretch_ScrollbarH_Arrow_Down 21x20
Stretch_ScrollbarH_Arrow_Down_A 21x20
Stretch_ScrollbarH_Arrow_Down_D 21x20
Stretch_ScrollbarH_Background 17x20
Stretch_ScrollbarH_Arrow_Down 21x20
Stretch_ScrollbarH_Arrow_Down_A 21x20
Stretch_ScrollbarH_Arrow_Down_D 21x20
Stretch_ScrollbarH_Background 17x20
Stretch_ScrollbarH_Arrow_Up 21x20
Stretch_ScrollbarH_Arrow_Up_A 21x20
Stretch_ScrollbarH_Arrow_Up_D 21x20
Stretch_ScrollbarH_Foreground 17x20

List of skin component on right side from top -left to bottom-right

Sbar_Background 20x26
Cut_Screen_TitleBackground 20x26
Stretch_Menu_RightAngle_1 10x10
Stretch_Menu_RightAngle_2 10x10
Stretch_Menu_RightAngle_3 10x10
Stretch_Menu_RightAngle_4 10x10
Stretch_Menu_TopBorder 10x3
Stretch_Menu_LeftBorder 3x10
Cut_Menu_Seperator 9x2
Stretch_Menu_RightBorder 3x10
Stretch_Menu_BottomBorder 10x3
Stretch_Highlight_TextBackground 10x10
Stretch_Menu_Background 10x10
Call_Keypad_KeyBk 57x35
Call_Keypad_KeyBk_A 57x35
Stretch_Dialog_RightAngle_1 10x10
Stretch_Dialog_RightAngle_2 10x10
Stretch_Dialog_RightAngle_4 10x10
Stretch_Dialog_RightAngle_3 10x10
Stretch_Dialog_TitleBackground 20x26
Stretch_Dialog_LeftBorder 2x10
Stretch_Dialog_TopBorder 20x4
Stretch_Dialog_BottomBorder 20x2
Stretch_Dialog_RightBorder 2x10
Stretch_Dialog_CST 20x34
Stretch_Dialog_CST_D 20x34
Stretch_Dialog_CST_A 20x34
Stretch_CST_A 20x35
Stretch_CST 20x35
Stretch_CST_D 20x35

Skin component was group by name of component, prefix and suffix. such as Arrow, Prograssbar, Radio_Button, Check_Box and Select_Box, ComboBox, Scrollbar, SBar (Top statusbar), Menu (Bottom Left menu), Call_KeyPad_KeyBk, Dialog, CST (Button). And all component have prefiex or suffix like this

General_* = image was use in original size.
Stretch_* = image was stretch before use.
*_A = Active image of components.
*_D = Disable image of components.

And becareful about skin component position that you should guess where 's it. Exacty It was in header of file. but i can't map skin header record to skin image because of some index was difference.

How to packing skin image (*.png) into skin-file (*.skn) by SkinPackager.
1. click on packSkin.pl Command prompt will display amount of image in newmotoskin.skn file.
2. newmotoskin.skn was created at the same folder as packSkin.pl.

After this you can packing/unpacking icon and skin of all themes. Now you can packing it in to Theme for testing. See you in next chapter.

eakrin · #4 02-23-2006

Chapter 4 : How to create theme file (*.mtf)

Requirement
1. File archiver utility that can packing/unpacking tar and gzip format. (7-zip)

Another component of theme such as theme logo, and PowerOn/Off animate file was easy to create it. Theme logo can be create by capture of your theme after you installed it and repacking it into theme file. PowerOn/Off files are simple mate file. becareful for you animate file size.

After we edited all theme components. Now we try to packing it back to mtf file by 7-zip. from chapter 2 the location for each theme component should be

/ezxlocal/download/appwrite/setup/ for Themename.dhm
/ezxlocal/download/theme/icon/Themename.dhm for iconres.ezx
/ezxlocal/download/theme/icon/Themename.dhm for skinfile (*.skn)
/ezxlocal/download/theme/icon/Themename.dhm
and another file in
/diska/MyThemes/Themename.dhm/ for another files

Before you packing theme file you should check filename and path of each component in Theme configulation file (*.dhm)

TO create theme file (*.mtf) with 7-zip is

1. Open 7-zip and select diska and ezxlocal folders. and click on menu "Add to Archive".

2. Rename your archive filename to your theme's name with tar extension.
3. Select Tar format for first time.

4. Select file from 3. and click on "Add to archive" again.
5. This time select GZip format.

6. Now you get your theme in .tar.gz extension. Just rename it in 7-zip to .mtf extension.

Now you have a theme file. Test it by install into your phone. If your phone got somthing wrong like no skin doesnot displayed or icon does not changed. Try to check theme config table section in theme configulation file (*.dhm). and don't forgot to change to another before you restart phone. You should delete you testing's after change to another theme and restart phone. because some icon does not change after theme was changed. It'll changed after restart phone. (you can't delete iconres.ezx of the last used theme.)

This is all I known about Motorola EZX Theme. Let have fun from create your themes.

domagoj · #5 02-23-2006

what can you you say to a guy like this,
u rock man, this has been of great help to me.

again THANKS!!!

Administrator · #6 02-25-2006

Thanks for the tutorial!

sylvain · #7 03-02-2006

@aekrin
"....And remove unchanged icon to maintain size of iconres.ezx because phone will use icon from original iconres.ezx instead if icon was not found in theme's iconres.ezx. Becareful about icon filename and icon size. Icon filename is use in icon data table for access icon from phone. Do not change icon filename. And if icon's size was change phone will resize your icon to original size.....
What do u mean by this way?

eakrin · #8 03-02-2006

1. you can "remove unchanged icon to maintain size " by delete unchanged icon in icons folder before packing it back to iconres.ezx

2. "if icon's size was change phone will resize your icon to original size....." is mean each icon have it size on screen. If you replace them with difference size icon when theme is used phone will stretch your icon.

sylvain · #9 03-03-2006

@earkrin
thanks more clear now

eakrin · #10 03-06-2006

change theme folder to

Ezxlocal theme

/ezxlocal/download/appwrite/setup/ for theme configulation file (*.dhm)
/ezxlocal/download/theme/icon/Themename.dhm for iconres.ezx, skinfile, and logoicon file.
/diska/MyThemes/Themename.dhm/ for wallpaper and power on/off GIF.

and SD/MMC themes

/ezxlocal/download/appwrite/setup/ for theme configulation file (*.dhm)
/diska/MyThemes/Themename.dhm/ for all files.