How to Create a New Google Talk Theme ??

Darklord

Hello Guys....

This is yet another nice tutorial of mine.. which took quite a long period to compile it.. This tutorial is for ppl who is bored with Classical google talk themes and waiting for something new and innovative...

In short, You can Create Your own Gtalk Theme... Just for example, have a look at this pic..

This tutorial consists of two independent parts.

1. How to add a background Image to your google talk chat window??

2. How to get smileys in chat windows without any external software addon??

PART 1:

The word theme, in my usage refers a chat theme. This is not for the external appearance of Google talk.

Starting with, First we need to have a copy of already existing Google talk theme. We modify and add extra features to it and then make the new theme.

Finding a Gtalk theme:

Copy and paste the following address in your My Computer Address bar.

Code:

%userprofile%\Local Settings\Application Data\Google\Google Talk\themes\system\chat

Now, I am using Classical Picture Theme for editing bcoz of its simplicity. Now, Copy the folder Classical Picture. Now, get back to grand parent directory. i.e. Themes. (use Up button twice).

Navigate to user directory. Create a folder named chat in it. Paste the folder here. Rename the folder to something else (say MyTheme)

Note: Renaming is mandatory because you can never see duplicate themes in google talk.

Now our theme folder is MyTheme. Open the folder, Navigate to Contents->Resources. Here is where we work with.

Now, Create a directory named Images Copy the Desired image which you want the background to be, into the images directory. Rename the image as back.jpg

Note: The size of the image should be properly chosen (300 X 225 is decent) . This is the image that i used. (see attachment)

The settings of the chat window are present in main.css file. Open the file in Text editor or a HTML editor that support CSS preferably.

Now, the code will look something like this

Code:

/* Ensure that our assumptions about the default browser colors are correct. */
BODY { color: #000000; background-color: #FFFFFF; }
BODY a:link { color: #0000FF; }
BODY a:hover { color: #0000FF; }
BODY a:active { color: #0000FF; }
BODY a:visited { color: #800080; }

BODY {
  margin: 6px;
}
DIV#content {
  font: 12px Arial;
}
DIV#insert {
  display: none;
}

DIV.system1st {
  margin: 4px 0px 4px 0px;
}
DIV.systemNth {
  margin: 4px 0px 4px 0px;
}

/* Two ways to do icons with these rules:
   <img class='icon' src='%userIconPath%'>
   <div class='icon'><div style='height:1px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="%userIconPath%")'></div></div>
*/

DIV.chat .icon {
}
DIV.chat DIV.msg {
  margin: 0px 0px 0px 0px;
}
DIV.chat DIV.Nth {
  margin: 5px 0px 0px 0px;
}
DIV.chat SPAN.salutation {
  font-weight: bold;
}

DIV.out {
  text-align: left;
}
DIV.out .icon {
  float: left;
  margin: 2px 5px 0px 0px;
}

DIV.in {
  text-align: left;
}
DIV.in .icon {
  float: left;
  margin: 2px 5px 0px 0px;
}

DIV.clear {
  clear: both;
  height: 1px;
  overflow: hidden;
}

DIV.break {
  height: 1px;
  margin: 3px 0px 4px 0px;
  overflow: hidden;
}

Add the background url property to the BODY class so that the code look like this

Code:

BODY 
{
  margin: 6px;
  background-image: url("images/back.jpg"); 
}

Note: You can always place the comments in css files for future reference like this

/* Background image url is given relative to the main.css file. Since, we placed image renamed to back.jpg in images folder, we give the url as images/back.jpg. */

Now, we have successfully inserted the background image. But, the problem is, the image scrolls up with the text and repeats!!

If you want the image to stick to the background completely, add the background:fixed property to the first line of the code so that the modified code looks like

Code:

BODY { color: #000000; background-color: #FFFFFF; background:fixed; }

Now, the background image is set. Let us now browse through some of the other useful settings that we can easily understand.

Change the link color:

In the following code,

Code:

BODY a:link { color: #0000FF; }
BODY a:hover { color: #0000FF; }
BODY a:visited { color: #800080; }

Link color is specified in the first line. When mouse pointer is over the link, It changes to the color specified in hover. The color of the visited link is given in third line.

Note:The color is specified by hexadecimal code. (#RRGGBB).
For each color, 00 is minimum and FF is maximum. If you are not sure of which color to use, follow this awesome link : Color codes

The other classes convey their respective meanings as follows

DIV.system1st : Division settings For first system message (like User is offline.)
DIV.systemNth : For next system messages
DIV.chat DIV.msg : For the 1st user message(which we type)
DIV.chat DIV.Nth : For the next user messages(which we type)

Change the margins of Divisions:

The margins are important for good look. You can set the text borders in all the above tags.

margin: 4px 120px 4px 0px;
/* Top Right Bottom Left */

I have set Right margin as 120 in order to prevent the text overlapping on the image.

Change the Font style and Color:

DIV.out : Settings for the text of Outgoing messages
DIV.out .icon : Settings for the icon of Outgoing messages
DIV.in : Settings for the text of incoming messages
DIV.in .icon :Settings for the icon of incoming messages

Now, If you want to change the font and color for the total theme, add the following class into your code.

Code:

* {
font:10pt Lucida Sans;
color: #800000;
}

If you want different font colors for incoming and outgoing messages, then
add the above properties independently to DIV.out and DIV.in classes. Do not include the above code now

Code:

DIV.in {
  text-align: left;
  	font: 10pt Lucida Sans;
	color: #800000;
}

DIV.out {
  text-align: left; 
  	font: 10pt Lucida Sans;
	color: #00f0ff;
}

Add Border to image Icons:

If you want to add border to the image icons, then add one line to modify DIV.out .icon & DIV.out .icon class like this,

Code:

  DIV.out .icon {
  border: 3px solid #FFF;
  float: left;
  margin: 2px 5px 0px 0px;
}

Modify Text Alignment:

If you apply the inbuilt chat theme, PingPong Picture, we observe that outgoing messages are left aligned and incoming messages are right-aligned.

This alignment can be set by modifying the align/float property of DIV.in and DIV.in.icon tags.
Make both values simultaneously to "right" i.e. the code look something like this

Code:

DIV.out {
  text-align: right;
  	font:10pt Lucida Sans;
	color: #800000;
}
DIV.out .icon {
  border: 3px solid #FFF;
  float: right;
  margin: 2px 5px 0px 0px;
}

After all the editing is done, save the css file.

Now, To Apply the theme,first close all the chat windows. Go to Settings in Gtalk Main window, navigate to Appearance, and in chat theme, Select MyTheme (or the name of the folder that you created earlier). Now, reopen the chat window to see the changes

NOTE: Whenever you edit the css file, note that the changes will not be applied until you close and re-open the chat window. Dont panic that the changes do not happen

This ends the first part of my tutorial.

PART2:

Now, we deal with how to integrate smileys into your google talk theme. We use javascript Regular expressions to replace the charecters/symbols into smileys. If you are not familiar with the regular expressions, then refer to this superb site. Link

Now, we do work with one of the 6 html files present in the theme folder and finally replace everything with almost the same code.

Open the NextContent.html file in the outgoing folder. You need to add a javascript code which uses regular expressions for finding the smiley symbols and replace them with corresponding smileys. The NextContent.html before editing looks something like this

Code:

<div class='msg Nth'><div id=message>%message%</div></div>
<div id='insert'></div>

After inserting the javascript, the new file is

Code:

<div class='msg Nth'><div id=message>%message%</div></div>
<div id='insert'></div>

<img src="images/smile.gif" width="1" height="1" style="display:none;" onload="
var smiley = document.getElementById('message').parentNode.innerHTML;

smiley = smiley.replace(/onload/g, 'onclick'); smiley = smiley.replace(/id=message/g, 'id=smiley');

smiley= smiley.replace(/>:-?\)</g, '><img src=images/1.gif style=display:inline;><');
smiley= smiley.replace(/>:\(</g, '><img src=images/2.gif style=display:inline;><');
smiley= smiley.replace(/>;\)</g, '><img src=images/3.gif style=display:inline;><');
smiley= smiley.replace(/>:-?a{0}D</g, '><img src=images/4.gif style=display:inline;><');
smiley= smiley.replace(/>\;\;\)</g, '><img src=images/5.gif style=display:inline;><');
smiley= smiley.replace(/>:-?\/</g, '><img src=images/7.gif style=display:inline;><');
smiley= smiley.replace(/>X-\(</g, '><img src=images/14.gif style=display:inline;><');
smiley= smiley.replace(/>B-\)</g, '><img src=images/16.gif style=display:inline;><');
smiley= smiley.replace(/>:\(\(</g, '><img src=images/20.gif style=display:inline;><');
smiley= smiley.replace(/>:\)\)</g, '><img src=images/21.gif style=display:inline;><');

document.getElementById('message').parentNode.innerHTML=smiley;
">

Note: Always insert the code after the insert division tag.

For simplicity, i have not included all the smiley symbols. The replace function syntax is as follows

replace(source<regular expression>, destination)

If you want to add more smileys, just write a regular expression for that smiley symbol and add a replace line to it. Add the corresponding smiley image into the Images folder.

Finally, save the file, Copy the content that you added extra to the NextContent.html file, now paste the same code in the same area in all the remaining 5 files.

Resources/Status.html
Resources/NextStatus.html
Resources/Outgoing/Content.html
Resources/Outgoing/NextContent.html (Just now added )
Resources/Incoming/Content.html
Resources/Incoming/NextContent.html

Now, again close the chat windows, re-open them and test the smileys.. If you have followed the process correctly, then you are done!! You can see smileys in your chat window.

This ends part 2 of my tutorial.
__________________________________________________ _________

I have created a theme with hundreds of smileys. I want to share that with you people and listen to comments and suggestions.

Download it from
1. here
2. attachment below

The features of the theme are

1. Can be installed with a single click. Just run the MyTheme.exe file.
2. Lots of smileys integrated.
3. All the smiley codes are scripted in a help file which can be found in Start Menu Programs\Dash\MyTheme\
4. Includes an utility to change the background of the chat window to ur desired one.
__________________________________________________ __________

P.S : Please post your comments... You can also repute the post if u like it..

**bakuryu** · 22-02-2007, 05:07 PM

wow ... great work man !!!!!!

i don't use GTalk, but looks that now i got to use it

Darklord · 22-02-2007, 05:12 PM

Thanx for the rep..
more than 70% of students in my college uses this theme..

almost all the ppl use google talk..

**Strider** · 22-02-2007, 05:48 PM

Count me too.. Excellent.. I'll share my thoughts after i give a try today..

Night_virus · 22-02-2007, 07:10 PM

Nice theme re...
I was using G Talk.. But now Yahoo! rules here..

Dark Star · 22-02-2007, 09:53 PM

Whoaa that's huge and simply awesome can't beleive it reped again u are really awesome man

.. As far as using Google talk will surely do that

P.S:- baku repped u can't believe check it again

Darklord · 22-02-2007, 10:10 PM

Quote:

Originally Posted by Renegade

Whoaa that's huge and simply awesome can't beleive it reped again u are really awesome man

.. As far as using Google talk will surely do that

P.S:- baku repped u can't believe check it again

Thankssss a lot..!! i will try to develop more enhancements for gtalk if i get time..

**bakuryu** · 22-02-2007, 10:13 PM

Quote:

P.S:- baku repped u can't believe check it again

yup repped it for the emotions part. Now it makes me easier to send smilies to those with whom i chat on GTalk. The smilies that i sent from trillian, they can't view them

softhunterdevil · 22-02-2007, 11:40 PM

Very good tutorial ... I always wanted to make one theme of G-talk.

CorpoAlert · 04-03-2007, 09:06 PM

nice tutorial dudez.. now i think our mod.. Vishal Gupta will be making themes for this too. ..

... just joking dude.. u should do it.. keep up the work guyz..

View Poll Results: Do you use Google Talk??
yes	14	73.68%
No	5	26.32%
Voters: 19. You may not vote on this poll

22-02-2007, 05:07 PM	#1
bakuryu ƒ(ψ)=Θº×φ Join Date: May 2006 Location: India Age: 23 Posts: 6,621 Thanks: 19 Thanked 645 Times in 603 Posts Rep Power: 87 OS:	Re: How to Create a New Google Talk Theme ?? wow ... great work man !!!!!! i don't use GTalk, but looks that now i got to use it __________________ Please don't click here

22-02-2007, 05:12 PM	#2
Darklord Junior Member (25+) Join Date: Feb 2007 Location: /Asia/India/Rajasthan/Bits-Pilani Posts: 54 Thanks: 1 Thanked 31 Times in 11 Posts Rep Power: 10	Re: How to Create a New Google Talk Theme ?? Thanx for the rep.. more than 70% of students in my college uses this theme.. almost all the ppl use google talk..

22-02-2007, 05:48 PM	#3
Strider Founder Join Date: Nov 2005 Location: The Last City Zion! Posts: 3,539 Thanks: 287 Thanked 345 Times in 298 Posts Rep Power: 62 OS:	Re: How to Create a New Google Talk Theme ?? Count me too.. Excellent.. I'll share my thoughts after i give a try today.. __________________ Want to ask a question? Try This! A guide on how to post a question, reply to a post etc.

22-02-2007, 07:10 PM	#4
Night_virus Elite Member (1000+) Join Date: Jul 2006 Location: Kolhapur, India Age: 18 Posts: 1,124 Thanks: 70 Thanked 47 Times in 45 Posts Rep Power: 18 OS:	Re: How to Create a New Google Talk Theme ?? Nice theme re... I was using G Talk.. But now Yahoo! rules here.. __________________ Reloaded, Reformed, Purely changed.. I'm no more Rocky_cool

22-02-2007, 09:53 PM	#5
Dark Star Banned Join Date: May 2006 Location: /dev/had0 Age: 20 Posts: 1,627 Thanks: 98 Thanked 172 Times in 146 Posts Rep Power: 0 OS:	Re: How to Create a New Google Talk Theme ?? Whoaa that's huge and simply awesome can't beleive it reped again u are really awesome man .. As far as using Google talk will surely do that P.S:- baku repped u can't believe check it again

22-02-2007, 11:40 PM	#8
softhunterdevil Regular Member (100+) Join Date: Oct 2006 Location: Salt Lake ... In City of Joy Age: 24 Posts: 227 Thanks: 14 Thanked 31 Times in 23 Posts Rep Power: 13 OS:	Re: How to Create a New Google Talk Theme ?? Very good tutorial ... I always wanted to make one theme of G-talk. __________________ Graphics Portfolio \| Music Portfolio

04-03-2007, 09:06 PM	#9
CorpoAlert Advanced Member (250+) Join Date: May 2006 Location: Tinsukia, Assam Age: 20 Posts: 352 Thanks: 23 Thanked 32 Times in 21 Posts Rep Power: 19	Re: How to Create a New Google Talk Theme ?? nice tutorial dudez.. now i think our mod.. Vishal Gupta will be making themes for this too. .. ... just joking dude.. u should do it.. keep up the work guyz.. __________________ Valentine's Day SMS Greetings

Article Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Article	Article Starter	Category	Comments	Last Post
[Download] MyTheme - Google Talk theme	Darklord	Software Releases	2	22-11-2007 03:52 PM
Google Talk 1.0.0.104:Talk the google way	Dark Star	Software Releases	3	05-01-2007 09:57 PM
Google Talk v1.0.0.95 testing release ...	deathvirus_me	Software Releases	8	17-08-2006 02:23 PM
Google Talk 1.0.0.92 - With themes, buddy icons	Strider	Software Releases	1	11-04-2006 01:33 PM
Google Talk beta 1.0.0.64	smartjean4u	Software Releases	0	30-03-2006 06:47 PM

New To Site?	Need Help?
Register to Participate Meet our Staff Refer Forum Rules Contact Us	Frequently Asked Questions Did you forget your password? Mark Forums Read

How to Create a New Google Talk Theme ??

Guides