[Windows Mobile Themes] janneman22:
Tutorial Skinning SleepSense

Application: SleepSense​

What do you need?

The only thing you need is an image-editor to edit the images

A xml editor to change the colors of the menu, borders, chart or other controls Step by step:

the original theme files

Step by step

Download the original default folder

Open the files in this folder in your image editor

Remake the images

Save the images (of course)

Edit theme.xml to change the colors of the menu, borders, chart or other controls

Create a new Theme folder: [Your theme name] Theme

Copy the edited images to your device in the folder [SleepSense installation dir]\Themes\ [Your theme name]Theme

Go to the alarm and select you own theme.

List of images in the \Themes\ folder

Bkg_Clock.jpg

Background of the sleep screen

Bkg_Default.jpg

Background of the menu

Bkg_Item1.png

The first item in the list

Bkg_Item2.png

The second/other item(s) of the list

Bkg_ItemS.png

The selected item of the list

Bkg_TxtClock.jpg

Background of the box with info in sleep screen

Bkg_TxtMain.jpg

Background of the info box

Img_Chart.png

The background of the sleep chart, the chart is projected over it.

Icon_xxxx.png

Several icons for in the menu or other

Bkg_Slide.jpg

Don’t touch it

Icon_Dummy.png

Don’t touch it

To make it compatible with the 200*480/320 screen resolution add _240x400 or _240x320 after the image name

Edit theme.xml

You can edit the xml to change the colors of the fonts, borders etc.

You can change a lot using the XML, but it’s pretty hard to understand (for a noob)

Forecolor is the color of font, Backcolor the achtergrond, other colors are gradients to the backcolor

<ImageFile1>XXXXXXXXX.png</ImageFile1>

contains the imagefile that is used that control

…="Icon_XXXXX"><ImageFile1>Icon_XXXX.png</ImageFile1>…
…="Bkg_Default"><ImageFile1>Bkg_Default.jpg</ImageFile1>…

<BackColor>XXXXXX</BackColor>

The background color of the control

… "Img_Chart"><BackColor>D3D3D3</BackColor>…
…="LeftBox_Chart"><BackColor>102C52</BackColor>…

<BorderColor>000000</BorderColor>

Color of the border

..lor><BorderColor>000000</BorderColor><Font>T…
…olor><BorderColor>000000</BorderColor><F…

<Font>[Font], [Size], [Formatting]</Font>

Font of the control

[Font] Font name

[Size] Size of the font

[Formatting] The formatting of the font (bold etc.)

…lor><Font>Tahoma, 5, Bold</Font>…
…r><Font>Tahoma, 8, Regular</Font><Fore…

<ForeColor>XXXXXX</ForeColor >

…nt><ForeColor>D3D3D3</ForeColor><Opac…
…nt><ForeColor>808080</ForeColor></Con…

These sections represent the topbuttons, main surrounding panel of the home menu, panel with for example the instructions, Clock colors, date colors, etc.

In the Beta these values can change. Best thing to do is to change is color to white FFFFFF, save the file and start SleepSense

<Opacity>XXX</Opacity>

Definite the opacity of the control, From 255 to 0, which is transparent

…r><Opacity>125</Opacity><Ba…
…Color><Opacity>80</Opacity><Ba…

Note: all colors must be in HTML color codes (like FFFFFF or 708090)

How to release your theme officially​

If you want to publish you personal theme send it to sleepsense.themes@gmail.com in a zip file. We will check your theme and give, where necessary, advice and update this topic with your theme

Any way of advertising through a theme is forbidden.

When your theme is checked by the SleepSense team, we will add it to this topic.

While choosing a new theme in SleepSense the user will have the option to choose from these themes in this topic too. The selected theme is downloaded, unzipped into the Themes folder and ready for use.

Why?

We decided to check themes to improve the quality of the themes. It has also benefits for the developer:

*He will get useful advices

*His theme will be showed in the theme showcase of this thread

*His theme will be included with SleepSense

What must I send?

The theme folder with the images

At least 3 screenshot

(Optional) a cab installer

​