Thursday, June 14, 2007

Making Google talk Chat Themes

Intro

Making of a google talk chat theme is similar to making a 4 page HTML website with a CSS file. The following assumes you are using windows XP. Please unhide hidden files and folders.

The default chat themes for google talk are located in

X:\Documents and Settings\[Profile Name; Eg: Administrator.000]\Local Settings\Application Data\Google\Google Talk\themes\system\chat

where X: is the drive windows is installed.
[Profile Name] is your user name on windows.

Custom skins that we create must come under this folder:
X:\Documents and Settings\[Profile Name; Eg: Administrator.000]\Local Settings\Application Data\Google\Google Talk\themes\user\chat


Let us start creating a new skin name "digitalpbk"
Make a folder inside the above folder named "digitalpbk"

X:\Documents and Settings\[Profile Name; Eg: Administrator.000]\Local Settings\Application Data\Google\Google Talk\themes\user\chat\digitalpbk


Make a folder inside it named Content
Make one more folder inside Content named Resources

So the total path would look something like :
X:\Documents and Settings\[Profile Name; Eg: Administrator.000]\Local Settings\Application Data\Google\Google Talk\themes\user\chat\digitalpbk\Content\Resources


Make empty files and directories so that the complete Resources directory has :

Incoming \ Content.html
Incoming \ NextContent.html
Outgoing \ Content.html
Outgoing \ NextContent.html
main.css
status.html
nextstatus.html


File Descriptions

  • Incoming \ Content.html : When you chat to someone, their first reply will use the format specified in this file.

  • Incoming \ Content.html : When you chat to someone, their subsequent replies will use the format specified in this file.

  • Outgoing \ Content.html : When you chat to someone, your first message will use the format specified in this file.

  • Outgoing \ Content.html : When you chat to someone, your subsequent messages will use the format specified in this file.

  • main.css
  • : This is the main CSS sheet in which you specify the class of styles as you do for HTML.
  • Status.html : When you chat to someone, their status will use the format specified in this file.

  • NextStatus.html : When you chat to someone, their changes in status will use the format specified in this file.



Sample


This is a sample of the Chat skin i made. You can Download the Resources zip file. Contains the chat skin.

A lil documentation :)

main.css

Main.CSS is the main cascading style sheet, let us start styling with it.

BODY { color: #fff; background-color: #000; margin:4px; }
BODY a {text-decoration:none}
BODY a:link { color: #ccf; }
BODY a:hover { color: #ccf; text-decoration:underline;}
BODY a:active { color: #cfc; }
BODY a:visited { color: #ccf; }

DIV.send1st
{
background:url('bg.jpg');color:#fff;
}

DIV.recv1st
{
background:url('bg2.jpg');color:#fff;
}


send1st is the sending message format. Just an image simple.
Same for recv1st.

Enjoy making your skins and do let me know of yours
Feel free to comment....

3 comments:

Vivek Tulsidas said...

hey arun...

i tried using ur chat skin and followed all the instructions u have given here...but it doesnt seem to be working...
when i try and change the settings for gtalk and then use 'Resources' (the folder that contains all the relevant files)...all im getting is another 'classic picture' like appearance...

Lemme know where i have gone wrong: tulsidas.vivek@gmail.com

btw...ur blog is awesome! plenty of useful info here....

Arun Prabhakar said...

hmm Something might be wrong with your folder structure.
Take an example of another skin in the folder and verify the folder structure is same for your new skin.

Anonymous said...

hi prabhakar, can we install themes with setup file instead of manually copying the file to google directory, i have seen the same on http://www.GoogleTalkThemes.com , how to do that