Tutorial: Creating XML homescreens

[Guest w411y]

Final of X factor is on tonight so though I'd do something constructive. This is basically what goes through my head when making an xml and I hope it encourages other people to produce and share their homescreens with us. So here goes...

Example of Homescreen making

Firstly Ill show you how to make this homescreen....

Its a simple little homescreen but I just want to show the just of compiling an xml file.

>>Beginning

Firstly, you must have an idea of what the outcome is going to look like and what plugins your going to include. So I sat there and thought to myself "I'm going to create a homescreen with a nice cartoony Santa at the bottom surrounded by snow and maybe implement a tree and presents. Ill keep this homescreen neat n simple so Ill only use the Messaging plugin, Profile plugin and Date/Time/Carrier plugin."

>>Plugins

Before I continue Ill briefly explain what a plugin is. To me, a plugin is basically a layer in the screen that when scrolled down/up onto the layer using the joystick, you can click and open it up(scrolling onto the Messaging plugin and clicking it will open up Messaging).

Some layers (eg// Date/Time/Carier plugin) cannot be selected and when scrolling through the plugins using the joystick you will skip this layer(ie... if from top to bottom you have the Message plugin, the Date/Time/Carrier plugin and then at the bottom the Profile plugin and you press down on your joystick when on the Message plugin, it will not go down and select the Date/Time/carrier plugin but skip it and select the profile plugin.)

Heres an image to understand the plugin layers in the skin were going to create...

Each plugin is specific to what it can display (eg// the Profile plugin will display what profile you are currently using. The Date/Time/Carrier plugin can display the current date and time and the network you are on.)

>>Creating Background

I tend to create the image (using photoshop) before the xml so I can fit the words onto the background image but others may create the xml and then create an image that fits around the words. Anyway heres the background image I created for this homescreen....

Oh by the way, the background image will be 240x295pixels (as 25 pixels get taken up by the soft keys)

>>Starting the XML

Every XML begins with...

<?xml version="1.0"?>

<home>

The version if its firstly created will be 1.0 .. if you update the homescreen then you can change it to 1.1 or whatever. Once we have added all the colour scheme and xml codes we will close the xml with Next we add the Author, Contact, Title and Version...

<author>w411y</author>

	<contacturl>[email protected]</contacturl>

	<title>w411y-X-mas</title>

	<version>1.0</version>

Inside the author tag will be your name(obviously) The contact URL can be a site or email address so that people can get hold of you with any feedback etc The title is what wil be displayed when you selecting the homescreen on your phone in Start-> Settings-> Homescreen Why is the version there again? Well I couldn't tell you is my simple answer! Anywho we then add the default settings...

<default target-width="240" target-height="320" font-face="nina" font-size="19" font-weight="bold" padding-left="5" padding-right="5" bgcolor="transparent" fgcolor="COLOR_HOMETEXT" padding-top="3" b-border-color="COLOR_HOMERULE" b-border-width="1">

	<format state="selected" fgcolor="FFFFFF"/>

	</default>

These are the default settings for evything in your homescreen. So for example, in the Messaging Plugin, if you do not say what size font to use it will be 19. Then we say what background image to use...

<background bgimage="Xmas.jpg" valign="top"/>

If the background image is in the same folder as the XML then theres no need to specify its pathfile. But if for example the XML is in storage/application data/home and the background image is in a folder called xmas in the home folder then your code becomes...

<background bgimage="Storage\Apllication Data\Home\xmas\Xmas.jpg" valign="top"/>

valign stands for vertical alignment. So the image is pushed to the top of the screen and as our background image is 240x295pixels it will fill the screen. >>Colour Scheme We then introduce a colour scheme. Well I'm simply going to show you an example of a colour scheme and show you what each stands for.

        <scheme>

<color name="COLOR_WINDOW" value="#FFFFFF" />

<color name="COLOR_WINDOWTEXT" value="#000000" />

<color name="COLOR_STATIC" value="#FFFFFF" />

<color name="COLOR_STATICTEXT" value="#000000" />

<color name="COLOR_HIGHLIGHT" value="#e80000" />

<color name="COLOR_HIGHLIGHTTEXT" value="#FFFFFF" />

<color name="COLOR_TEXTSELECT" value="#FFFFFF" />

<color name="COLOR_MENU" value="#FFFFFF" />

<color name="COLOR_MENUTEXT" value="#000000" />

<color name="COLOR_GRAYTEXT" value="#CCCCCC" />

<color name="COLOR_GRADLEFT" value="#FFFFFF" />

<color name="COLOR_GRADRIGHT" value="#FFFFFF" />

<color name="COLOR_INTGRADLEFT" value="#FFFFFF" />

<color name="COLOR_INTGRADRIGHT" value="#FFFFFF" />

<color name="COLOR_TRAYGRADLEFT" value="#e80000" />

<color name="COLOR_TRAYGRADRIGHT" value="#e80000" />

<color name="COLOR_HIGHGRADLEFT" value="#e80000" />

<color name="COLOR_HIGHGRADRIGHT" value="#e80000" />

<color name="COLOR_TRAYTEXT" value="#000000" />

<color name="COLOR_WINDOWFRAME" value="#000000" />

<color name="COLOR_BTNFACE" value="#e80000" />

<color name="COLOR_BTNTEXT" value="#000000" />

<color name="COLOR_SCROLLBAR" value="#e80000" />

<color name="COLOR_HOMETEXT" value="#000000" />

<color name="COLOR_HOMEHIGHLIGHT" value="#e80000" />

<color name="COLOR_HOMEHIGHLIGHTTEXT" value="#000000" />

<color name="COLOR_HOMERULE" value="#C54E0C" />

<color name="COLOR_alertWINDOW" value="#FFFFFF" />

<color name="COLOR_alertTITLE" value="#444444" />

<color name="COLOR_alertRULE" value="#000000" />

</scheme>

The colours are Hex colours. If you have Adobe Photoshop then the code for any colour can easily be found out. If not then there are plenty of sites that can help you. Just make a Google for Hex colour codes. Anywho, heres what each stands for... COLOR_WINDOW Background color for all application windows and controls, including the transparent portions of the scroll bar stripes. COLOR_WINDOWTEXT Text color for list views, controls, and labels. Does not set menu text color, soft key text color, or button text color. COLOR_STATIC Background color for static controls, such as labels. Also sets the background color for message boxes. COLOR_STATICTEXT Text color for static controls such as labels. COLOR_HIGHLIGHT Color of selection for list views, controls, menus, and soft key buttons. COLOR_HIGHLIGHTTEXT Color of text when an item has selection, such as a list view element or a control, and highlighted soft keys. COLOR_MENU Background color for menus. COLOR_MENUTEXT Text color for menu items. COLOR_GRAYTEXT Color for disabled text, such as disabled menu items and soft key buttons. COLOR_GRADLEFT Starting color value for the background gradient. COLOR_GRADRIGHT Ending color value for the background gradient. COLOR_INTGRADLEFT Starting color value for the secondary background gradient. COLOR_INTGRADRIGHT Ending color value for the secondary background gradient. COLOR_HIGHGRADLEFT Gradient highlights are not supported. COLOR_HIGHGRADLEFT and COLOR_HIGHGRADRIGHT must be set to the same value. COLOR_HIGHGRADRIGHT Gradient highlights are not supported. COLOR_HIGHGRADLEFT and COLOR_HIGHGRADRIGHT must be set to the same value. COLOR_TRAYGRADLEFT Starting color value for the title bar gradient. COLOR_TRAYGRADRIGHT Ending color value for the title bar gradient. COLOR_TRAYTEXT Color for the title bar text. COLOR_WINDOWFRAME Color of the dividing line between the main window and the soft key region, and the bounding rectangle around the scroll bar thumb. COLOR_BTNFACE Unselected background color for the soft key region. COLOR_BTNTEXT Unselected text color for the soft key region, navigation glyph and scroll bar thumb. COLOR_SCROLLBAR Color of the stripes on the scroll bar. COLOR_alertTITLE Color of the title text in an alert. COLOR_alertWINDOW Background color for alerts. COLOR_alertRULE Color of the dividing lines on the Home screen. COLOR_HOMERULE Color of unselected text on the Home screen. COLOR_HOMEHIGHLIGHTTEXT Color of selected text on the Home screen. COLOR_HOMEHIGHLIGHT Background color of a selected plug-in on the Home screen. I do not like creating a new scheme for each of my screens so I use the one shown above and just change the red #e80000 to the colour of my new homescreen. >>Adding whats displayed Now we begin adding whats going to be displayed. I start my homescreens with the Iconbar. Why? Because Im used to seeings it there and it displays the essentials like battery, signal strength, bluetooth, gprs etc etc... So heres the code ...

        

<!-- Iconbar -->


<plugin clsid="{837FC251-FE69-43ad-84E0-EBCEDEBA0884}" name="Iconbar" height="0">

         <background b-border-width="0">

         </background>

	<iconbar bgcolor="transparent" fgcolor="#ffffff" y="0" x="0"/>

	</plugin>

Every plugin has its own clsid. I cant really explain what this is because I basically dont know !! But I think its just a way the phone identifies the plugin. The height is usually how much pixels in height the plugin/layer is but in the iconbars case it takes up 25 by default so setting it to 0 basically means 25. The bgcolor is transparent so we can see the image behind the plugin. If for example it was #000000 then the background of that plugin would be black fgcolor being #ffffff means that the things displayed (signal meter, battery meter etc) will be white. Plugins use x and y co-ordinates to place labels but this plugin is a pants one to explain how they work. Onto the Message Plug-in....

        <!-- SMS/MMS/Email Plugin -->


	<plugin clsid="{2F930BF0-6FE9-4a53-9E17-88E9247BAB48}" name="SMScount" height="65">

	<background b-border-width="0">

	</background>

	<label y="20" x="50" halign="left" bgcolor="transparent" fgcolor="#ffffff" font-size="18">

	<format state="unselected" font-weight="normal" />

	<format state="selected" font-weight="bold" />

	<text>SMS: <unreadSMS />  MMS: <unreadMMS /></text>

	</label>

         </plugin>

Before I continue, anything between <!-- and --> does not get read and is used to help keep the xml tidy so you can see where everything is. Again you can see the plugin clsid and its name. You also see the height as 65. This is how tall the layer is in pixels (remembering the QVGA is 320pixels in height) Anything to do with this plugin (ie SMS count MMS count etc) can only be dislayed within these 65 pixels. the y co-ordinate (20) is how many pixels down from the top of the plugin that the text is displayed. If for example the y co-ord was 70 (which is bigger than the plugin height of 65) then the text would not be seen. The x co-ord is how many pixels from the left side of the screen the text is displayed. halign stands for horizontal alignment. fgcolor is the colour that the text is and font size is pretty obvious. If you do not put in the font size, then it will be the size of the default font size you put in the default settings at the start of the xml. The formatstate tags basically make the text bold when you scroll onto the layer so you know what your clicking on. You could also try changing the font colour when you scroll onto it or even the font size. Possibly a different background. You can then add your own prefix (I chose SMS: and MMS:) and then the and will display any new messages you have. Now the profile plugin ...

        <!-- Profile Plugin -->


	<plugin clsid="{95976968-45D5-40c9-9779-2B859B1C2FEC}" name="Profile" height="70" >

         <background b-border-width="0">

	</background>

	<label x="50" y="5" halign="left" bgcolor="transparent" fgcolor="#ffffff" font-size="18">

	<format state="unselected"  font-weight="normal" />

	<format state="selected" font-weight="bold"/>

	<text>Profile: <profile/></text>

	</label>

	</plugin>

Same principles apply to this as the Messaging plugin Now the date, time and the carrier....

        <!-- Date/Time/Carrier Plugin -->


         <plugin file="sysplug.dll" clsid="{E09043DF-510E-4841-B652-388316977A7A}" height="90">

         <background b-border-width="0">

	</background>

	<clock>

         <time font-weight="bold" font-size="30" bgtext="transparent" halign="left" fgcolor="#e80000" mode="24" y="35" x="135" />

  <date font-weight="normal" fgcolor="#e80000" font-size="17" valign="top" halign="left" mode="long" y="70" x="135" />

	</clock>

	</plugin>

Nothing much new here except the mode on the date and time For the time you can choose 12 and 24 for 12 hour and 24 hour obviously. For the date you can select short or long which will be dd/mm/yyyy or 17th June 2004. And we end the xml with... dum dum dum...

</home>

And thats it! Now when your saving make sure your not saving it as a text file. So change text document(*.txt) to All Files in the dropdown and name your homescreen *.home.xml . In this example it is w411y - Xmas.home.xml .

Then copy the xml and the background image into the following folder on your phone ...

Storage\Application Data\Home

Press Start -> Settings -> Homescreen and chose your screen (ensurign the colour scheme and background image is set to default)

And thats it !! Please correct any stupid comments I've made and feel free to add any tips tricks and info. I was hoping to start a thread where people can ask and find the answers to problems theyre having in making their own homescreens or editing homescreens.

Well good luck, hope I helped a lil

[Guest shadamehr]

Not my preferred way, I am waiting for Ruttensoft, but this tutorial is EXCELLENT mate well done.

Can I just mention though that the screen size has it based on 240x320 screens.

But the font identifier of Nina means older WM2003SE phones.

For WM5.0 phones, the defualt font is Segoe Condensed or something similar.

Well done for doing it though mate!!!

[Guest w411y]

Cheers :)

[Guest Berggren]

Cheers :D

<{POST_SNAPBACK}>

Thank you so much for the excellent guide! And thanks to your guide, i've just

created my very first homescreen ever.. :)

Kinda simple, but i added the calender thingy to it.

As soon as i've tried it out and checked for errors, i'll drop it in the DL section.

Anyway, this is Mandy!

/ Pash

[Guest w411y]

Very glad to hear it :D

And thats a great looking homescreen! Being your first aswell is awesome

One thing I can see from the screenshot is that its not displaying the MMS's. I think youve forgotten ?

Keep it up mate, Cheers :)

[Guest psybill]

I was ready to ask for a tutorial like this, and here it is. great post pal!!

I am not sure that I can do it, but I'll try. :oops:

I used to have many plugins in my 2003se device(mru,sms,email,mms, oxios todo list, fizz traveller, allday event,profiles) and the only way for me was the routensoft software. now I have a qtek 8310 and I can't find a home screen with all these goodies!!

thanks

[Guest w411y]

Thanks :D

I was hoping it would encourage people to create their own homescreens to see what other people come up with and seems to be working. Berggren has just made an awesome first screen

Give it a shot and anything your struggling on then don't hesitate to ask :)

[Guest MiG:uK]

im in the process of creating a QVGA theme maker so stay tuned. :)

[Guest Berggren]

Very glad to hear it  :D

And thats a great looking homescreen! Being your first aswell is awesome

One thing I can see from the screenshot is that its not displaying the MMS's. I think youve forgotten ?

Keep it up mate, Cheers  :)

<{POST_SNAPBACK}>

Thanks! ;)

No, i used the exact same code as you:

SMS: MMS:

I get that in all my homescreens i try, don't know why?

Could you also please tell me if there's a possibility to maximize the text for

the calendar appointments. So there's a max number of letters, to fit the screen

area better.. If i use longer text it will leave the box and on to the face.

Thanks again!

[Guest w411y]

If you add a width to the plugin of 120

so where the height is, try putting width="120"

Let me know if that works?

[Guest Berggren]

If you add a width to the plugin of 120

so where the height is, try putting width="120"

Let me know if that works?

<{POST_SNAPBACK}>

Yes!! Setting width to it worked.. Thanks!

[Guest Jamma14]

Nice tutorial w4lly mate! Great way for people to get into homescreen creating. :)

[Guest w411y]

Yes!! Setting width to it worked.. Thanks!

<{POST_SNAPBACK}>

Great stuff :)

Nice tutorial w4lly mate! Great way for people to get into homescreen creating. :D

<{POST_SNAPBACK}>

Thanks fella 8)

[Guest Gavin]

I've given up waiting for ruttensoft.... :roll:

....so this tutorial is just what the doctor ordered - well played.

[Guest w411y]

I've given up waiting for ruttensoft.... :roll:

....so this tutorial is just what the doctor ordered - well played.

<{POST_SNAPBACK}>

Thanks :D

Dont forget to post the outcome and you know where to come if you experience any more troubles :)

Good Luck

[Guest MrIndependent]

Hey, I'll be ordering an o2 XDA phone this week. I'm all about making themes, already did that with my last phone (SE K700i). Well but this is a load different and to make it even more difficult I'm a MAC owner ;-)

Anyway, I tried the tutorial and everything went okay so far but how do I add other Plugins? I mean, I do need this clsid, so how do I get it when I add a new plugin to my homescreen?

Plus, can I edit the other menus so it becomes a "whole" theme?

Loads of questions, sorry, I'm really new to this whole thing and I'm really only relying on xml, since I got a MAC....

[Guest w411y]

Hey, I'll be ordering an o2 XDA phone this week. I'm all about making themes, already did that with my last phone (SE K700i). Well but this is a load different and to make it even more difficult I'm a MAC owner ;-)

Anyway, I tried the tutorial and everything went okay so far but how do I add other Plugins? I mean, I do need this clsid, so how do I get it when I add a new plugin to my homescreen?

Plus, can I edit the other menus so it becomes a "whole" theme?

Loads of questions, sorry, I'm really new to this whole thing and I'm really only relying on xml, since I got a MAC....

<{POST_SNAPBACK}>

Dont be sorry this is the place for help!

First off, I have not yet seen a list of plugins but the best way to go about it is download other peoples themes and open their XML's. This will help you understand more and you can find more plugins. Some plugins are not standard with the phone and must be downloaded (eg// Facade from SBSH , Smart Monitor)

With regards to other screens, here is one example ... w411y-HomerSimpson

You can also put a theme on windows media player (which I plan on updating this Homer screen asap as I have made the skin. In the update I am also going to add a background to the Start Meny (ie/ when you press start)

Id first master creating just the homescreen as thats the most complicated part. Other screens require Registry Tweaks. You can apply the tweaks manually using a Registry Editor, or you can compile a .cab installer which does the tweaks. When you need more help on extra screens just gizza shout ;)

HTH, Wal

[Guest MrIndependent]

Okay, next question *grins*

I made a homescreen in photoshop, wrote the xml but I haven't got a phone to check out if this whole thing works, so how can I see?

[Guest w411y]

Unforunately there isnt a way. And this does become a nuisence say if your making a homescreen and you need a ffew little changes, then you have to edit the xml, copy and paste to your device and then change the homescreen twice!

Attatch it in your next post, Ill test it out for you and show you a screenshot. Make sure it opens in Internet Explorer before posting it. If it doesnt then there is something wrong with the XML and it will highlight the issue for you.

Edited December 26, 2005 by w411y

[Guest MrIndependent]

Okay that would be it... without the missed calls JPEG...

Thank you so much!

Jolie.home.xml

[Guest w411y]

Something strange gone on ...

The homescreen wouldnt load so I opened it up in Notepad but wherever enter has been pressed (ie, new line) then ther is a symbol (a rectangle)

I understand your running on Mac? What did you use to compile the XML?

[Guest MrIndependent]

Yeah, right, running on MAC

I used a editor for webpages... WebDesign it is called... strange

[Guest w411y]

Does Mac come with a basic Notepad?

[Guest MrIndependent]

Not really, but let me try something...

Here it is.... maybe this'll work

jolie2.home.xml

Edited December 26, 2005 by MrIndependent

[Guest w411y]

Afraid thats the same ;) :?:

Things is the problem may not be to do with symbols representing the Enter key being pressed. Ill search this forum and other places to find out how/if anyone has made a theme running on Mac. If I do not find the answer I will start a new thread in this forum.

In the mean time, I will delete all symbols and repress the enter key. Well see what happens from there.