Create / Download Customized Themes for Gtalk

In the beginning Gtalk suffered lot of criticism from the people. But as time progressed Google started adding one feature after the other. Now today Gtalk stands among one of the best Instant Messaging programs. Gtalk even introduced themes which comes integrated in the latest versions. Apart from the original themes, How to create a customized theme for Gtalk ? If you want to Download Prebuild Professional Themes goto last line of this post.

Before you get started to make a theme, you need to have

• Latest version of Gtalk.
• Knowledge of XHTML and CSS ( Don't worry read on... ).

All customized themes will be saved in the folder :

C:\Documents and Settings\%user%\Local Settings\Application Data\Google\Google Talk\themes\user\chat

So create this folder yourself. You even have to extract the themes you download also into this folder, if you plan to download themes from Internet.

In this folder, create a New folder with the name of the skin that you are going to make and open it. Create a folder in the latest folder called "Contents". Create a folder in "Contents" called "Resources".

Now create a file called main.css in the Resources folder. We will edit the file later by adding the required CSS .Next create a file called Status.html in the same Resources folder . In this file we are going to put the XHTML code that Google Talk will show when the other user changes status. Google Talk replaces %message% with the status change message (E.g Subhash: Available). Also, you have to put "<div id="insert"></div>" where you want Google Talk to add the code from the NextStatus.html

Open up main.css in notepad, and write the XHTML code you want Google Talk to show.

Sample Code :

<div class="status">

%message%

</div>

<div id="insert"></div>

Next create a file called NextStatus.html. Google Talk loads this file when it has to show two status changes without a message between.

Now, open up main.css in notepad and add a code like this:

.status {

background-color: #000000;

}

And to make <div id="insert"> work you have to add this code too:

#insert {

display: none;

}

Save the files. Open Google Talk, go to Settings, highlight Appearance, and choose your skin in the list. You might see that it's the same old theme but when someone changes status the background of the "status" text gains black.

Now we will start with making a style for the messages you send (not the one you are receiving).

Create a folder called "Incoming" in the same folder " Resources " . And in that folder create two files, "Content.html" and "NextContent.html". Put your code that will be shown on other readers messages. %sender% is the sender's name, %message% is the message, %userIconPath% is the path to the senders avatar, and finally %time% is the time when the message is posted. Use this code to show it's display picture (or <img src="%userIconPath%"> [highly recommended ] ):

<div style='height:1px;filter:progid:DXImageTransform.

Microsoft.AlphaImageLoader(src="%userIconPath%")'>

Sample code:

<div class="incoming">

<div class="incomingsender">%sender%</div>

<div class="incomingmessage">%message%</div>

</div>

<div id="insert"></div>

And the CSS code:

.incoming {

background-color: #FFF

}

.incomingsender {

font-weight: bold

}

.incomingmessage {

text-decoration: underline

}

And now we've finished status changes and incoming messages, next Outgoing. Create a folder called "Outgoing" in the same folder as main.css, and put two files called "Content.html" and "NextContent.html".

Now, write almost the same as you did with the Incoming, but change something like the font color .

Sample code:

Content.html and NextContent.html:

<div class="outgoing">

<div class="outgoingsender">%sender%</div>

<div class="outgoingmessage">%message%</div>

</div>

<div id="insert"></div>

main.css:

.outgoing {

background-color: #FFF;

color: c0c0c0;

}

.outgoingsender {

font-weight: bold;

}

.outgoingmessage {

text-decoration: underline;

}

That's it and you are done dude.....

What the hell is all this? You find this 2 much geeky...

Download GTheme (PreBuild Themes with Smiley and Customizable Background)