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....