Important Notice: Due to repeated WikiSPAM attacks it was nessesary to change the access policy! Only registered users can now edit.

From UIQ3 open-source software

Contents 1 Hints for editing Themes 1.1 Dokumentation 1.2 Tools 1.3 Export 1.4 Scripted Creation 1.5 Image Types 1.6 Theme Speed 2 Theme Items 2.1 StatusBar 2.1.1 FC Background 2.1.2 Background 2.2 SoftKeys: 2.2.1 Horizontal Backgrounds 2.2.2 Vertical Backgrounds 2.3 HorizontalScrollBar 2.3.1 Shafts 2.3.2 Thumbs 2.3.3 Arrows 2.4 VerticalScrollBar 2.4.1 Shafts 2.4.2 Thumbs 2.4.3 Arrows 2.5 TitleBar 2.5.1 TextClear 2.5.2 TextPressed 2.5.3 ContextTextClear 2.5.4 Drop Down Cue 2.5.5 Category Folder 2.5.6 Back Button 2.6 Button 2.6.1 Backgrounds 2.7 CheckBox 2.7.1 Backgrounds 2.8 OptionButton 2.8.1 Backgrounds 2.9 MenuPane 2.9.1 Adornments 2.10 ListBox 2.10.1 Checkbox 2.11 Dialog 2.11.1 Dialog Back Button 2.12 Calendar 2.12.1 TextClear 2.12.2 DateNotCurrentMonthClear 2.12.3 DateTodayClear 2.12.4 HighlightTextClear 2.12.5 TextDimmed

The UTZ-files are just normal ZIP-files, you unpack and change as you like.

Hints for editing Themes

Dokumentation

Name	Description
UIQ 3 themes specification and creation guide	This Dokument contains a device independent description of all patches. Not described is the actual size of the elements. Note that not all patches described are actually used by all phones.
Developers' Guidelines - Themes	Appendix 8 contains the description for Sony Ericsson phones. Note that the description is buggy - some sizes are wrong and not all supported patches are mentioned.

Tools

Name	Description
Themes Creator	The Sony Erisson Themes Creator allows you to create themes for all UIQ3 phones from Sony Erisson. However it is based on the buggy documentation mentioned above.
GIMP - The GNU Image Manipulation Program	Apart from the text colors everything else in UIQ3 themes is defined in term of little images. Even if you only want to set a background colour you need to create a image just containting that one colour. Therefore an image manipulatiation tool is even more important then the Theme Creator.
The Open Screen Capture	Since both - the Developers' Guidelines and Themes Creator - are buggy the only way to find out how large a patch realy is is measuring it by creating a screen capture.
7-Zip	Since the Theme Creator is rather buggy it is by far better to create the themes by hand using a zip tool. 7-Zip is truly free (source code and money wise) and has scriptable commandline interface.
Cream, GVim	One can edit the Theme.xml file using Notepad - Both Cream and GVim are truly free (source code and money wise) and have basic xml support build in (which can be extended by plugins as well - but Theme.xml is not that complex as this is realy needed).
Open Object Rexx	The Rexx interpreter is needed for scripted creation of themes.
Z-Shell	Shell used for creation of themes on Linux systems. Any decent Linux distribution should include a version of Z-Shell.

Export

You should start by unziping the file into an empty directory as the Themes Creator only has an import but no export function. You might also consider the creation of a backup copy before you start off.

Scripted Creation

Scripted creation of Themes is an alternative to the buggy Themes Creator or manual creation using a Zip-Tool. With scripted creation you can create optimised versions of your theme for all Phones available.

Scripted creation is done using Object-Rexx, which is available for both Windows and Linux, has an easy to understand syntax and it's installation is not to painfull - Rexx easily runs of an USB stick.

Name	Description
Create_File_List.rexx	This Object-Rexx Script will read your Theme.xml file to find out which files in the current directory are referenced and with that information will create two files: P990_List  for P990 style phones M600_W950_File_List  for M600 style phones (which includes W960i, W960i and P1i) This way only patches referenced and needed for the Phone are actualy added to the theme.
Create_Theme.rexx	This Object-Rexx Script will use the P990_List and M600_W950_File_List to create four seperate themes for the four different types of Sony Ericsson phones. As parameters it takes the name and version of the theme. The script will try to use 7-Zip to create the theme and if that fails will fall back to simple zip.
make.cmd	This Calls Create_File_List.rexx and Create_Theme.rexx with the appropiate parameters to create the Aqua theme on an MS-Windows system.
make.zsh	This Z-Shell script calls Create_File_List.rexx and Create_Theme.rexx with the appropiate parameters to create the Aqua theme on an Linux system.

The described scripts has quite a few advantages over the classic way to create themes:

• Hand written xml files allow for more patches then Theme creator does,
• Needs only one xml file for the different phones.
• Includes only files actually mentioned in the xml file.
• Includes only files actually needed by the phone.
• Creates sepereate themes for the P990i, W950i, M600i, P1i.
• Themes are generaly smaller - at least when 7-Zip is used.
• Fully automated: change the patch, run the script, done.
• Also works on Windows

Image Types

You can use several different formats to store your graphics in. But for realy stunning effects you need transparency and only PNG (Portable Network Graphics) supports transparency nativly. With all other image formats you need to store the tranparency effects in a seperate file - which won't be good for performace.

One exeption from that rule: the screen saver needs to be GIF (Graphics Interchange Format) - the only format to support animations.

Scalable Vector Graphics - which would have had both - transparency and animation (on top of perfect scalablebily) - was promised but never delivered.

Theme Speed

There are reports that Themes affect phone speed. The general observation is that more complete themes which are optimzed for a single device and only use PNG (Portable Network Graphics) images with alpha channel tend to perform better .

The reason may be that with a more complete theme the theme engine won't need to look up patches from the default theme or device resources. Both of which are used as fall back for missing patches and especialy the default theme as been reported to be slow.

Theme Items

StatusBar

<skin id="StatusBar">
</skin>

FC Background

It is important that you set the image's drawProperties to drawMode="Stretch" leftMargin="0" rightMargin="0" topMargin="0" bottomMargin="0".

Don't use any other drawMode, don't use any other margins! I tried and it does not work - any other setting will crash the flip closed statusbar handler application (once you close the flip).

If that happens you need to reboot the phone. Important: Change the theme back to the default theme before reboot! Why? The statusbar handler is an autostart program which will hold up the boot process when crashing. You'll be snookered then!

Single Bitmap

	X	Y
Bitmap Total	240	19

Demos

Aqua990	E17

<skin id="StatusBar">
  <patch id="FCBackground" file="StatusBar-FCBackground.png">
    <drawProperties 
      drawMode="Stretch" 
      leftMargin="0" 
      rightMargin="0" 
      topMargin="0" 
      bottomMargin="0"/>
  </patch>
</skin>

Background

It is important that you set the image's drawProperties to drawMode="Stretch" leftMargin="0" rightMargin="0" topMargin="0" bottomMargin="0".

It's even worse then the one above: Any other drawMode will creas the flip open statusbar handler application. And now you are double snookered: without flip open statusbar handler application running you won't be able to get to the "change theme" dialog any more. And since the statusbar handler application is an autostart application that means: Do not reboot, do MASTER RESET instead. That is: if you can reach the master reset dialog.

But I did not know that, rebooted the phone in good faith and it did not start again. Reflashing the phone is the only way to get it going again.

Single Bitmap

	X	Y
Bitmap Total	240	19

Demos

Aqua990	E17

I also reported the problem to SE: Phone won't boot after theme installation. but to now avail.

SoftKeys:

Horizontal Backgrounds

The picture should consist of 4 Rows which contain top to down:

1. Flip Closed, Button 1 Pressed
2. Flip Closed, button 2 Pressed
3. Flip Closed, Button 3 Pressed
4. Flip Close

The size is (240x112 over all, 80x26px per button).

Multi Bitmap

	X	Y
Single Element	80	28
Element Count	3	4
Bitmap Total	240	112

Demos

Aqua990	E17

Vertical Backgrounds

Same as Horizontal only turned by 90° and a bit wider (112x256px over all, ... per button).

Demos

Aqua990

HorizontalScrollBar

Shafts

The static Part of the Scrollbar. There are three shafts inside, from top down:

1. Normal
2. Diabled/Dimmed
3. Page Up/Down click

Note that in flip open mode the first and last 14x14 pixel will be overlayed with the arrows. This means one might have to choose between perfect look for flip open or flip close.

Multi Bitmap

	X	Y
Single Element	222	14
Element Count	1	3
Bitmap Total	222	42

Demos

Aqua990

Thumbs

There are three thumbs inside, from top down:

The moving Part of the Scrollbar.

1. Nomal.
2. Disabled/Dimmed
3. Thump clicked.

Multi Bitmap

	X	Y
Single Element	29	14
Element Count	1	3
Bitmap Total	29	42

Demos

Aqua990

Arrows

6 Rows of 3 Arrows - but on the P990i I have yet only seen the first two rows. In Detail they are:

1. Character Left
   1. Nomal
   2. Disabled
   3. Clicked
2. Character Right
   1. Nomal
   2. Disabled
   3. Clicked
3. Page Left
   1. Nomal
   2. Disabled
   3. Clicked
4. Page Right
   1. Nomal
   2. Disabled
   3. Clicked
5. Begin
   1. Nomal
   2. Disabled
   3. Clicked
6. End
   1. Nomal
   2. Disabled
   3. Clicked

Multi Bitmap

	X	Y
Single Element	14	14
Element Count	2	6
Bitmap Total	28	126

Demos

Aqua990

VerticalScrollBar

Shafts

The static Part of the Scrollbar. There are three shafts inside, from left to right:

1. Normal
2. Don't know yet.
3. Page Up/Down click

Multi Bitmap

	X	Y
Single Element	14	222
Element Count	3	1
Bitmap Total	42	222

Demos

Aqua990

Thumbs

The moving Part of the Scrollbar. There are three thumbs inside, from left to right:

1. Nomal.
2. Don't know yet.
3. Thump clicked.

Multi Bitmap

	X	Y
Single Element	14	14
Element Count	3	1
Bitmap Total	42	29

Demos

Aqua990	E17

Arrows

6 Rows of 3 Arrows - but on the P990i I have yet only seen the first two rows. In Detail they are:

1. Line Up
   1. Nomal
   2. Disabled
   3. Clicked
2. Line Down
   1. Nomal
   2. Disabled
   3. Clicked
3. Page Up
   1. Nomal
   2. Disabled
   3. Clicked
4. Page Down
   1. Nomal
   2. Disabled
   3. Clicked
5. Begin
   1. Nomal
   2. Disabled
   3. Clicked
6. End
   1. Nomal
   2. Disabled
   3. Clicked

Demos

Aqua990	E17

TitleBar

<skin id="StatusBar">
</skin>

TextClear

Font normaly used for the title bar.

<skin id="StatusBar">
  <skinText 
    id="TextClear"
    style="Normal" 
    textColor="#808080"
</skin>

TextPressed

Font used for the title bar when bar is pressed.

<skin id="StatusBar">
  <skinText 
    id="TextPressed"
    style="Outline" 
    textColor="#c60000" 
    outlineColor="#ffffff"/>
</skin>

ContextTextClear

<skin id="StatusBar">
  <skinText 
    id="ContextTextClear"
    style="Outline" 
    textColor="#c60000" 
    outlineColor="#ffffff"/>
</skin>

Drop Down Cue

Two Buttons, used to open the drop down menu, one above the other, from top down:

1. Normal
2. Pressed

Multi Bitmap

	X	Y
Single Element	20	20
Element Count	1	2
Bitmap Total	20	40

Demos

Aqua990

Category Folder

Two Buttons, used to open the folder drop down menu, one above the other, from top down:

1. Normal
2. Pressed

Multi Bitmap

	X	Y
Single Element	23	20
Element Count	1	2
Bitmap Total	23	40

Demos

Aqua990

The folder buttons are only used on P990i style devices which have a flip.

Back Button

Used on an applications to go back / close.

1. Idle
2. Pressed

Multi Bitmap

	X	Y
Single Element	43	24
Element Count	2	1
Bitmap Total	86	24

Demos

Aqua990

The back buttons are only used on M600i / W950i / P1i style devices which have no flip.

Button

Backgrounds

8 buttons one above the other, from top down:

1. Normal
2. Pressed
3. Disabled
4. Set Normal
5. Set Pressed
6. Set Disabled
7. Default Normal
8. Default Pressed

Multi Bitmap

	X	Y
Single Element	78	24
Element Count	1	8
Bitmap Total	78	192

Demos

Aqua990

CheckBox

Backgrounds

9 buttons of 20*20 pixel in a 3*3 square

1. Checked
   1. Normal
   2. Disabled
   3. Clicked
2. Unchecked
   1. Normal
   2. Disabled
   3. Clicked
3. Mixed
   1. Normal
   2. Disabled
   3. Clicked

Demos

Aqua990

OptionButton

Backgrounds

6 buttons of 20*20 pixel in a 3*2 square

1. Checked
   1. Normal
   2. Disabled
   3. Clicked
2. Unchecked
   1. Normal
   2. Disabled
   3. Clicked

Demos

Aqua990	E17

MenuPane

Adornments

I wonder why this one is needed at all. Most of it's content is already part of the two above. It's two rows of 6 buttons each 20*20 pixel.

1. Option buttons
   1. Normal, Unselected
   2. Normal, Selected
   3. Clicked, Unselected
   4. Clicked, Selected
   5. Disabled, Unselected
   6. Disabled, Selected
2. Checkboxes and Arrows
   1. Normal, Selected
   2. Disabled, Selected
   3. Normal, Unselected
   4. Disabled, Unselected
   5. Right
   6. Left

Demos

Aqua990	E17

ListBox

Checkbox

1. softkey normal checked
2. softkey normal unchecked
3. softkey dimmed checked
4. softkey dimmed unchecked
5. penstyle normal checked
6. penstyle normal unchecked
7. penstyle dimmed checked
8. penstyle dimmed unchecked

Multi Bitmap

	X	Y
Single Element	18	18
Element Count	8	1
Bitmap Total	144	18

Demos

Aqua990

Dialog

Dialog Back Button

Used on a dialog to go back / close.

1. Idle
2. Pressed

Multi Bitmap

	X	Y
Single Element	20	21
Element Count	2	1
Bitmap Total	40	21

Demos

Aqua990

The back buttons are only used on M600i / W950i / P1i style devices which have no flip.

Calendar

<skin id="Calendar">
</skin>

TextClear

Normal text.

<skin id="Calendar">
  <skinText 
    id="TextClear"
    style="Normal" 
    textColor="#808080"
</skin>

DateNotCurrentMonthClear

Text used for displayed dates that are not in the selected month.

<skin id="Calendar">
  <skinText 
    id="DateNotCurrentMonthClear"
    style="Normal" 
    textColor="#808080"
</skin>

DateTodayClear

Text used to display today's date.

<skin id="Calendar">
  <skinText 
    id="TextClear"
    style="Normal" 
    textColor="#ff0000"
</skin>

HighlightTextClear

Highlighted text.

<skin id="Calendar">
  <skinText 
    id="HighlightTextClear"
    style="Normal" 
    textColor="090909"
</skin>

TextDimmed

Dimmed text.

<skin id="Calendar">
  <skinText 
    id="TextDimmed"
    style="Normal" 
    textColor="#c0c0c0"
</skin>