Jump to content

BEGINNERS HOMESCREEN RESOURCE

Guest drblow

By Guest drblow
in Smartphone Customisation - General Discussion

 Share

Recommended Posts

Guest drblow

Guest drblow

Posted
Posted

I juts thought I'd start a post that would benefit beginners to homescreen skinning. Maybe it could be one thread that could contain a whole lot of good stuff for beginners, altogether in one place. If it proves to be popular, maybe the mods could make it sticky (ooer!).

I'm posting a dead simple homescreen layout (just the most common plugins & basic colour scheme with a plain background).

There are no background images for any plugins, I left them out, & set the highlight colour to show when selected so it is easy & clear on the screen which plugins go where, & how much screen space they take up! :wink: I certainly found that a good place to start! :)

I've also added a title to each plugin in the actual xml itself, so when opened in notepad for editing, it is a bit clearer which plugin does what.

INSTRUCTIONS -

Just unzip & copy the xml & images to your home folder! (IPSMApplication DataHome)

:D

I'll attach the homescreen colour charts aswell (posted by by the legendary mcwille & machineman! - all props deserved!! :wink: ), so hopefully there'll be enough info in here for anyone to get started with skinning their phone!

Hopefully other skinners will post some good, clear & simple as possible instructions here for the benefit of all!!??

Good luck y'all! :wink:

color_scheme1.jpg

colors_final_829.jpg

beginner.home.zip

screenshot.jpg

Link to comment
Share on other sites
Guest scott2eyes

Guest scott2eyes

Posted
Posted

Excellent idea!

One thing to be wary of- I don't think the Vmail bit of the message count plugin is a standard one- at least, it doesn't work on my Orange MPx200 (although it has been messed about with a little... And it's just as likely that it's the Orange MPx that doesn't have the standard plugin!)

Link to comment
Share on other sites
Guest drblow

Guest drblow

Posted
Posted

mmm ... that seems a little strange, the msg plugin is an MS one, not Orange, so I thought it worked on all smartphones! I could be wrong tho (I think it has happened once before :) ).

Anyways - thats the idea of this thread. To make a resource in one place for any beginners, so relevant problems should also be addressed here!

Let us know if you find out any more, eh?

Link to comment
Share on other sites
Guest kelv23

Guest kelv23

Posted
Posted

Brilliant,I only posted a message yesterday here for info on how to go about making my own skins etc and there it is in all its glory!!! Time to get experimenting with whats there and see what I can do.

There really is a doctor in the house!!!! cheers!!!!!!

Link to comment
Share on other sites
Guest drblow

Guest drblow

Posted
Posted

em ... I don't know how to answer that without sounding patronising ( :lol: ), but, how did you miss those huge pictures at the top of the thread!!?? Those ARE the colour charts!! :D

Link to comment
Share on other sites
Guest scott2eyes

Guest scott2eyes

Posted
Posted

Just for those who clicked on the excellent colour reference link, but still don't understand why "#FF0000" is red...

The colours are coded in hexadecimal. That is, a numbering system that has 16 digits from 1 to F, instead of just 1 to 9 (ie; 1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,10,11 etc.) It takes a little bit of getting used to, but is really quite simple once you've got your head round it.

There are 6 digits in a hexadecimal colour code, which work in pairs and correspond to the Red, Green and Blue values (as any colour can be made up of a combination of the three primary colours.) The first two digits refer to the Red component, the second two to the Green, and last two to the Blue. And because the two digits are hexadecimal, that means there are 255 possible values (if they were in boring old decimal, you’d only have 100…) So, for example, #FF0000 would be pure red, #0000FF would be pure blue, #FFFFFF would be white, #000000 would be black.

If you find #FF0000 (for example) to be too bright for whatever you're after, then bring the code a bit closer to black. As black is #000000, just bring down the "FF" part of the code- for example, you could try dropping it to "A0", so the code would be #A00000. If it's too dark, then bring the other values up to bring it closer to white- for example, #FFA0A0 would be a light pink.

(It's worth noting that these colours don't mix like paint- this is because the colour of a paint is determined by the light it absorbs. With these colours, you're effectively mixing the actual light itself.)

If you’re after a specific colour- for example, if you're trying to make your colour scheme match a background image- but you don't want to spend hours mixing colours and are stuck with the boring Windows graphics packages to play with, then it’s no problem;

1) Open up the image which whatever colour you’re after is in with Paint.

2) Zoom in (so that you can be sure you’re going for the exact pixel you want to match the colour of), and select the “dropper” tool, and select the colour you’re after.

3) Then go into the “Colors” menu, and select “Edit Colors”, and click on “define custom colours.” The colour you’ve selected will be the one that comes up, and the Red, Green and Blue component values will be displayed on the bottom right hand side- just convert these values to a hexadecimal number and put them into your colour code.

One final colouring tip- if you want your colour scheme to be used by other people, then avoid using Red and Green on each other (eg. red text on a green background) as that is the most common problem that colourblind people (like me...) have in distinguishing from each other.

Link to comment
Share on other sites
Guest scott2eyes

Guest scott2eyes

Posted
Posted

A very useful tip I recently discovered, which would probably have saved me a few hours if I'd known about it earlier...

If you've got your XML file, you've messed about with a whole bunch of plugins and put it back on your phone- but when you try to select it, it's not on the list. It's named right, it's in the right folder and everything, but the phone is just refusing to see it. You wonder if there's too many files in the Home directory, or if the phone just doesn't like the fact that you're using Calvin and Hobbes pictures without Bill Watterson's permission... then you snap back to reality and realise that somewhere in there is a missing quotation mark/white space/backslash/something, which is why the phone isn't recognising it as an XML file- but you don't have a clue where the problem punctuation could lie...

Now, in the old days you would have had to pull the whole XML file apart and tried it without each plugin to see if that was where the problem was, which apart from taking ages is a boring task. But not anymore!

If you try to open the "bad" XML file in Internet Explorer (either on the phone through File Manager or on your PC), then it will come up with an error message pointing out what's wrong with the file. (If there's more than one problem, it will only come up with the first one.)

Hope that saves someone else from tearing their hair out for a while...

Link to comment
Share on other sites
Guest capt_janeway

Guest capt_janeway

Posted
Posted

I too am dumb, can anyone provide help as to the x,y positioning on the homescreen.

I am trying to put my plug-ins at the bottom and to the right of my pic and haven't got a clue how to do this.

I did steal a simple xml from here - can't remember who :oops: but would like to play a bit more on my own.

Link to comment
Share on other sites
Guest scott2eyes

Guest scott2eyes

Posted
Posted

Glad to help, PritenC!

:lol:

capt_janeway- the way plugins arrange themselves on the screen is simply that the first plugin goes right at the top of the screen, the second one immediately below it and so on. The x&y values are then used to position the text etc. within the plugins space (not to position the plugins themselves.)

So there's 2 straightforward ways to put the plugin at the bottom of the screen;

1) Make the first plugin very large (ie. set the height to take up most/all of the screen) and then use the x&y values to put the text at the bottom right- for example, you might want a message count plugin of height="180", then set the actual message counts at somewhere like x="160" y="120"

Or...

2) Put a big empty plugin first (eg. a Text plugin with no text displayed), set it's height to fill up most of the screen (say, about 150), then just put your other plugins below that one.

Another way to push the text over to the right of the screen would be to put something in the default section, such as halign="right" (which justifies the text along the right hand side) or set the padding-left value to a high number- say, about 120 ("padding" values effectively set the margins along the sides, top and bottom of the plugin.)

Link to comment
Share on other sites
Guest mpd98

Guest mpd98

Posted
Posted

I'm probably gonna get flamed to hell here, but I've looked all over and can't get an answer.

I've installed the skin as said, but I can't select the messaging counter. It is also not updating - i.e. when I get a message, count still shows SMS (0).

So, where everyone talks about plugins, are these physical files that need to be installed, or just pieces of xml code?

I know I'm a dumbass... :oops:

Matt.

Link to comment
Share on other sites
Guest capt_janeway

Guest capt_janeway

Posted
Posted

Hmm thanks scott - no clearer to me :roll: Infact I think it was your Thundercats theme I nicked and bastardised into a West Ham one - sorry :oops:

BTW: Can't get SS to work to show you a piccy - have a e200 - Duh got new version :roll:

ss002.JPG

ss000.JPG

Link to comment
Share on other sites
Guest scott2eyes

Guest scott2eyes

Posted
Posted
I've installed the skin as said, but I can't select the messaging counter.  It is also not updating - i.e. when I get a message, count still shows SMS (0)..
That sounds unusual, and to be honest I doubt I'll be able to figure out the problem... but what homescreen are you installing, and on what phone?

So, where everyone talks about plugins, are these physical files that need to be installed, or just pieces of xml code?

If you look at the XML code with something like Notepad, you'll see that after the colours, defaults, authors name etc. Then there are the plugins, which have a tag at the start that says , and a tag at the end saying . In between those tags is information about where the actual plugin file is, and what it should do. (For example, if all the plugin can do is tell the time and date, the XML file will ask it for the time and date, and say where on the screen to put it.)

The standard plugins that come with the phone (ie. clock, message counter, calendar etc.) are all installed already.However, if you want to install a new plugin (for example, the Alarm plugin, or the Media Player controller plugin) then you'll have to install the relevant DLL file for the XML file to refer to. And jsut to be extra complicated, orange phones have an Icon plugin that doesn't seem to be available to anyone else. ( :D if you're not with Orange, :lol: if you are!)

(Clear as mud?)

Hmm thanks scott - no clearer to me :roll:   Infact I think it was your Thundercats theme I nicked and bastardised into a West Ham one - sorry :oops:

I doubt it would have been mine- the only one I've posted so far was a very primitive Calvin and Hobbes one somewhere! (Although I've got a couple in the pipeline, which I'm planning on including with a step-by-step guide explaining how they were put together.) But every homescreen I've yet made has started out as a cannibalized version of someone elses, so I wouldn't worry about it!

Anyway, to try and make it a bit clearer- if you go to the start of this thread and download drblow's "Beginner" plugin, I'll try to walk through modifying it to put everything in the bottom right corner...

To get started, install the plugin as per drblow's instructions, then open the file "beginner.home.xml" in Notepad.

Then change the word "Beginner" at the top to whatever you want to call your homescreen- (this will be the name it appears under in the list of homescreens in the Settings menu.)

Now, let's say that all you want is an SMS counter and the icon bar at the bottom of the screen, so you need to delete the code for all the other plugins.

To do this, scroll down to where it says;

It should say that twice- the tags mean that these are just comments. The actual plugin is everything that appears between these two lines, so delete it all.

The next plugin is the Iconbar one, which we want to keep.

The one after that is the Carrier plugin, which for now we're going to do away with, so again, delete everything between the two rows saying;

(And delete those rows too- they don't do anything, as they are just comments, but they could become confusing later on.)

Then we get the Messages plugin, which again we want to keep so skip down to the next one- Profile. By now you should know how to get rid of that, and while you're at it you can delete everything below it- EXCEPT for the tag at the end of the file that says

At this point, this is what your XML file should look like;

<?xml version="1.0"?>


<home> 


   <author>DrBlow</author> 


   <contacturl>http://monosapiens.9f.com</contacturl> 


   <title lang="0x0409">My Title</title> 


   <title lang="0x0809">My Title</title> 


   <title lang="0x040c">My Title</title> 


   <title lang="0x0407">My Title</title> 


   <title lang="0x0410">My Title</title> 


   <title lang="0x0816">My Title</title> 


   <title lang="0x040a">My Title</title> 


   <title lang="0x0804">My Title</title> 


   <version>1.0</version> 


   <default font-face="nina" font-size="12" font-weight="normal" padding-left="4" padding-right="4"       bgcolor="transparent" fgcolor="COLOR_HOMETEXT" padding-top="2" b-border-color="COLOR_HOMERULE" b-border-width="0"> 


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


   </default> 


   <background bgimage="IPSMApplication DataHomesimple_background.jpg" valign="top"/>


	<scheme>


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


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


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


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


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


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


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


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


                <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="#000000"/>


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


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


                <color name="COLOR_HIGHGRADRIGHT" value="#0066FF"/>


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


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


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


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


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


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


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


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


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


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


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


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


                <color name="COLOR_alert" value="#0000FF"/>


	</scheme>






<!-- iconbar plugin with signal and battery display -->


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


	<iconbar fgcolor="COLOR_TRAYTEXT" bgcolor="COLOR_TRAYGRADLEFT"/> 


	<background bgcolor="transparent" b-border-width="0"/>


	</plugin>


<!-- iconbar plugin with signal and battery display -->






<!-- messages plugin -->


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


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


	<format state="unselected" halign="left" bgcolor="transparent" />


	<format state="selected" halign="left" bgcolor="#555555" font-weight="bold" />


	</background>


	<label y="5" x="20" w="45" h="16">


	<format state="selected" bgcolor="transparent" fgcolor="#ffffff" />


	<format state="unselected" bgcolor="transparent" fgcolor="#000000" /> 


            <text>SMS :<unreadSMS/></text> 


         </label> 


	<label y="5" x="70" w="45" h="16">


	<format state="selected" bgcolor="transparent" fgcolor="#ffffff" />


	<format state="unselected" bgcolor="transparent" fgcolor="#000000" /> 


            <text>EMail :<unreadEmail/></text> 


         </label> 


	<label y="5" x="120" w="45" h="16">


	<format state="selected" bgcolor="transparent" fgcolor="#ffffff" />


	<format state="unselected" bgcolor="transparent" fgcolor="#000000" /> 


            <text>VMail :<unreadVMail/></text> 


         </label> 


	</plugin> 


<!-- messages plugin -->






</home>
Now we can start messing with the actual plugins... The Icon bar will probably look best along the bottom of the screen, so that wants to be below the Messages plugin. So just cut and past the Iconbar plugin (ie. everything between the two lines saying "") so that it's at the bottom of the XML file, immediately above the tag. The height of the screen is 200 pixels, and the icon bar takes up 20 pixels, so we want the message counter to be 180 pixels high (to put the Iconbar right at the bottom.) The first line of the messages plugin ends with name="smscount" height="25">, so simply change the number to 180. Now the plugin is taking up the entire screen on the phone, but still putting the message count at the top. To change this, we need to change where it's drawing the message counts. The "y" value is the number of pixels down the screen it will start putting the counter, and the "x" value is how far along, so simply change y="5" to y="160" each time it appears. That puts them all in a row along the bottom, but you want them on the right hand side. To do that, I'm going to leave the Vmail counter in the same place, and put the Email counter immediately above it. So the x value wants to be the same (as it's the same distance along), but the y value wants to be less to put it above it. So in the "label" row above the Email counter, set the x value to 120 and the y value to 145 (15 pixels less than 160.) Then, to put the SMS counter immediately above the Email counter, set it's x to 120 and it's y to 130. And that's it! Just save your new XML file on your phone (in the IPSM/Application Data/Home filder) and you're off! And just in case you really can't be bothered to go through the instructions, here's what the finished XML code will look like; 
<?xml version="1.0"?>


<home> 


   <author>DrBlow</author> 


   <contacturl>http://monosapiens.9f.com</contacturl> 


   <title lang="0x0409">My Title</title> 


   <title lang="0x0809">My Title</title> 


   <title lang="0x040c">My Title</title> 


   <title lang="0x0407">My Title</title> 


   <title lang="0x0410">My Title</title> 


   <title lang="0x0816">My Title</title> 


   <title lang="0x040a">My Title</title> 


   <title lang="0x0804">My Title</title> 


   <version>1.0</version> 


   <default font-face="nina" font-size="12" font-weight="normal" padding-left="4" padding-right="4"       bgcolor="transparent" fgcolor="COLOR_HOMETEXT" padding-top="2" b-border-color="COLOR_HOMERULE" b-border-width="0"> 


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


   </default> 


   <background bgimage="IPSMApplication DataHomesimple_background.jpg" valign="top"/>


	<scheme>


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


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


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


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


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


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


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


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


                <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="#000000"/>


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


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


                <color name="COLOR_HIGHGRADRIGHT" value="#0066FF"/>


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


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


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


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


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


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


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


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


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


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


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


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


                <color name="COLOR_alert" value="#0000FF"/>


	</scheme>






<!-- iconbar plugin with signal and battery display -->


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


	<iconbar fgcolor="COLOR_TRAYTEXT" bgcolor="COLOR_TRAYGRADLEFT"/> 


	<background bgcolor="transparent" b-border-width="0"/>


	</plugin>


<!-- iconbar plugin with signal and battery display -->




<!-- messages plugin -->


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


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


	<format state="unselected" halign="left" bgcolor="transparent" />


	<format state="selected" halign="left" bgcolor="#555555" font-weight="bold" />


	</background>


	<label y="130" x="120" w="45" h="16">


	<format state="selected" bgcolor="transparent" fgcolor="#ffffff" />


	<format state="unselected" bgcolor="transparent" fgcolor="#000000" /> 


            <text>SMS :<unreadSMS/></text> 


         </label> 


	<label y="145" x="120" w="45" h="16">


	<format state="selected" bgcolor="transparent" fgcolor="#ffffff" />


	<format state="unselected" bgcolor="transparent" fgcolor="#000000" /> 


            <text>EMail :<unreadEmail/></text> 


         </label> 


	<label y="160" x="120" w="45" h="16">


	<format state="selected" bgcolor="transparent" fgcolor="#ffffff" />


	<format state="unselected" bgcolor="transparent" fgcolor="#000000" /> 


            <text>VMail :<unreadVMail/></text> 


         </label> 


	</plugin> 


<!-- messages plugin -->




</home>

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
 Share
Go to topic listing
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use.

  I accept