Search This Blog

Tuesday, January 25, 2011

Creating Google Talk Themes


Google's gtalk offer you with various self defined themes like classic, bubble ,
bubble picture , orkut etc. To create your own personalised theme follow the
following steps :-
  1. Copy and paste the following address in your My Computer Address bar.
    %userprofile%\Local Settings\Application Data\Google\Google Talk\themes\system\chat
  2. Copy the classical picture theme and move back to the themes directory.
  3. Navigate to user directory.
  4. Create a folder named "chat" in it.
  5. Paste the classical picture folder in the chat folder.
  6. Rename the folder to any other name. eg. MyTheme.
  7. In the mytheme folder navigate to contents->resources.
  8. Create a folder named images.
  9. Paste the picture in the folder which you want to make your back ground.
  10. Rename the picture to "background.jpg".
  11. Resize the image to 300x225 pixels.
  12. The code would look like this
    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:

    Some code here

    */

    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;

    }
  13. Add the background url to the body class
    BODY

    {

    margin: 6px;

    background-image: url("images/background.jpg");

    }
  14. You can also change the alignment and the fronts according to your wish.
  15. To apply the theme close all chat windows.
  16. Goto settings in gtalk->appearance->chat theme.
  17. Select mytheme.
  18. Then open the chat window to see the effect.

No comments:

Post a Comment