Tutorial: Create a google talk chat theme with desired background image and smileys.

Discussion in 'Tutorials' started by sridatta, Nov 8, 2006.

?

Do you use Google Talk?

  1. Yes

    19 vote(s)
    86.4%
  2. No

    3 vote(s)
    13.6%
Thread Status:
Not open for further replies.
  1. sridatta

    sridatta An Esoteric Geek

    Joined:
    Mar 28, 2006
    Messages:
    283
    Likes Received:
    15
    Trophy Points:
    0
    Location:
    Bangalore
    Tutorial: Create your own Gtalk Theme !!!

    Guys,

    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 google talk theme... have a look at this gtalk window..!!

    [​IMG]

    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 for myself with hundreds of smileys. I want to share that with you people and listen to comments and suggestions.

    Download it from here

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

    PS: This is my first tutorial. Apologies for any mistakes made. Please post your comments. Please suggest some improvements that can be made.

     
    Last edited by a moderator: Oct 25, 2007
  2. piyush gupta

    piyush gupta New Member

    Joined:
    Sep 8, 2005
    Messages:
    1,284
    Likes Received:
    2
    Trophy Points:
    0
    Location:
    never land
    definately give it a try
     
  3. blueshift

    blueshift Wise Old Crow

    Joined:
    Apr 17, 2005
    Messages:
    1,227
    Likes Received:
    17
    Trophy Points:
    0
    Location:
    Inside the Pixel
    Thanks sridatta.
     
  4. OP
    OP
    sridatta

    sridatta An Esoteric Geek

    Joined:
    Mar 28, 2006
    Messages:
    283
    Likes Received:
    15
    Trophy Points:
    0
    Location:
    Bangalore
    you are welcome
     
  5. saurav singh

    saurav singh New Member

    Joined:
    Sep 2, 2006
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Re: Tutorial: Create a google talk chat theme with desired background image and smile

    thx sridatta neways ..
    bt i did d same chngs u mentioned in 1st exrcse of 1st part ...bt it didnt render ny chng 4 me ......
    wots wrng???????
     
  6. OP
    OP
    sridatta

    sridatta An Esoteric Geek

    Joined:
    Mar 28, 2006
    Messages:
    283
    Likes Received:
    15
    Trophy Points:
    0
    Location:
    Bangalore
    1. The changes will not be applied until you close all your opened chat windows and re-open them.
    2. Be sure u have selected the right theme (The one you have modified) in settings-> Appearance
    3. The image path may be incorrect. suppose if u give background image path as /images/back.jpg , then the file should be present in the folder named images in the folder in which your main.css file is present. (i.e. Resources folder)

    Once recheck all these things.. Suppose if you are unable to figure out the problem, just install the theme by downloading 4m the link, and then check out whats wrong... :)
     
  7. OP
    OP
    sridatta

    sridatta An Esoteric Geek

    Joined:
    Mar 28, 2006
    Messages:
    283
    Likes Received:
    15
    Trophy Points:
    0
    Location:
    Bangalore
    Guyz.. is no body interested in google talk?? Or the tut is OHT?? ( Over Head Transmission )
    I have compiled this thread sitting for more than 5 hrs... not even 5 ppl responded.. :(
    Please post your comments...
     
  8. Tech Geek

    Tech Geek Wise Old Owl

    Joined:
    Sep 21, 2006
    Messages:
    1,602
    Likes Received:
    18
    Trophy Points:
    0
    Location:
    Cyber Hell
    Thanks
    i will try it out today night
     
  9. indraneel

    indraneel New Member

    Joined:
    Oct 22, 2007
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    hi sri,
    thanx a lot your tutorial was very very userful to me in creating my own custom themes! but the problem is i want to share my designed themes with my friends and even after providing online support through chat they were not able to install the themes properly...

    CAN U PLZ HELP ME IN CONVERTING MY THEME TO .EXE FILE OR ANY SELF EXTRACTING FILE, which once clicked will automatically copy the file to the specified directory!:?
     
  10. azzu

    azzu AJJU

    Joined:
    Aug 5, 2006
    Messages:
    2,454
    Likes Received:
    3
    Trophy Points:
    0
    Location:
    hYdErAbAd
    try Anything .EXE converter
    sridatta after seeing Gorgeous Ileana
    i think ur from ANDHRA
     
  11. indraneel

    indraneel New Member

    Joined:
    Oct 22, 2007
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    hi azzu/sri
    instead of making an .exe file (as normally users are suspicious abt .exe file) can we make it into SFX/Zip. if so any softwares which supports %user profile%, i mean which will auto extract based on windows username?
     
  12. salilrane

    salilrane .........Access Denied!!!

    Joined:
    Dec 1, 2005
    Messages:
    168
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    Mumbai
    Re: Tutorial: Create a google talk chat theme with desired background image and smile

    does the opposite persons see the emoticons ????

    i think he may see only words


    plzzz gurus clear my dbouts .........
     
  13. phreak0ut

    phreak0ut The Thread Killer >:)

    Joined:
    Apr 2, 2006
    Messages:
    1,181
    Likes Received:
    6
    Trophy Points:
    0
    Location:
    Bangalore
    @sridatta: EXCELLENT tutorial.
    @salilrane: I had the same thing in mind. Thanks for posting. We have seen that the other person sees only text of the emoticons in case we are using something like Smiley Central.
     
  14. ilugd

    ilugd Beware of the innocent

    Joined:
    Dec 25, 2005
    Messages:
    1,009
    Likes Received:
    3
    Trophy Points:
    0
    he needs to have the same theme installed, i guess, but sridatta, really, really nice work.
     
  15. salilrane

    salilrane .........Access Denied!!!

    Joined:
    Dec 1, 2005
    Messages:
    168
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    Mumbai
    Re: Tutorial: Create a google talk chat theme with desired background image and smile


    i have confirmed that opp person sees only words ..

    i thnk sridatta has done excellent and forward that to google i guess :)

    i think google people must really think of geting some more creativity in GTalk
     
  16. Kiran.dks

    Kiran.dks New Member

    Joined:
    Apr 3, 2006
    Messages:
    2,494
    Likes Received:
    91
    Trophy Points:
    0
    Location:
    Pune, India
    Re: Tutorial: Create a google talk chat theme with desired background image and smile

    Good one Sridatta! :)

    And how did you read my mind? It's cool integrating Ileana into my Google talk. :p She is hot.

    And if you are a big fan of her, do watch "Pokiri" Telugu movie. You will never forget!
     
    Last edited: Oct 24, 2007
  17. ax3

    ax3 Cool as a CUCUMBAR ! ! !

    Joined:
    Dec 14, 2003
    Messages:
    5,388
    Likes Received:
    5
    Trophy Points:
    38
    Re: Tutorial: Create a google talk chat theme with desired background image and smile

    awesome ....... i have changed it ....... thanx a lot .........
     
  18. evewin89

    evewin89 New Member

    Joined:
    Sep 9, 2007
    Messages:
    375
    Likes Received:
    0
    Trophy Points:
    0
    Re: Tutorial: Create a google talk chat theme with desired background image and smile

    i'll try,hop it'll work...:)
     
  19. Gigacore

    Gigacore Dreamweaver

    Joined:
    Aug 3, 2006
    Messages:
    3,883
    Likes Received:
    1
    Trophy Points:
    38
    Location:
    Bangalore
    nice, thankx for sharing with us . . . .
     
  20. almighty

    almighty New Member

    Joined:
    Jun 21, 2007
    Messages:
    526
    Likes Received:
    0
    Trophy Points:
    0
    Location:
    Up west
    Hey sridatta
    I am using it since a yr
    i got it from some other forum... of course thats made by u only

    Thanks !!!
     
Thread Status:
Not open for further replies.

Share This Page