| View previous topic :: View next topic |
| Author |
Message |
vikke
Moderator
Joined: 14 Sep 2005
Posts: 867
|
 Posted: Sun Apr 09, 2006 1:47 pm Post subject: You want to know how to make your own themes ? Read this! |
 |
|
Hello Everybody!
In this tutorial I'll show you how to make themes for the new Google Talk version 1.0.0.91.
This tutorial requires:
- You have to know (X)HTML, CSS (both)
- Google Talk version 1.0.0.91
- A skin name
Okay lets go!
All unofficial themes are saved in this folder:
| Quote: |
| C:\Documents and Settings\%user%\Local Settings\Application Data\Google\Google Talk\themes\user\chat |
If this is your first time, you have to create the last folder yourself. You shall put all your downloaded themes in the folder that you created.
Open the folder, and create a folder with the same name as the skin you are going to make and open it. Create a folder in the latest folder called "Contents". Create a folder in "Contents" called "Resources".
Create a file called main.css in the "Resources"-folder. We are going to put the CSS in that file later.
Then create a file called Status.html in the same folder as main.css. In this file we are going to put the (X)HTML-code that Google Talk will show when the chat-mate changes status. Google Talk replaces %message% with the status-change message (example Vikke: Available). Also, you have to put "<div id="insert"></div>" where you want Google Talk to add the code from the NextStatus.html (keep reading). Open up "main.css" in notepad, and write the (X)HTML-code you want Google Talk to show. Here's my code:
<div class="status">
%message%
</div>
<div id="insert"></div>
And then, create a file called "NextStatus.html".
Google Talk loads this file when it shall show two status changes without a message between, for example if you want two status changes appear in only one box.
But I wont, just copy and paste the same code.
Now, open up main.css in notepad and add a code like this:
.status {
background-color: #000000;
}
And to make <div id="insert"> to work you have to add this code too:
#insert {
display: none;
}
Save the files, open Google Talk, go to Settings, highlight Appearence, and choose your skin in the list. You might see that it's the old default theme but when someone changes status the background of the "status"-text gains black!
Now we will start with making a style for the messages you send (not the one you are recieving). Create a folder called "Incoming" in the same folder as main.css. And in that folder create two files, "Content.html" and "NextContent.html". Put your code that will be shown on your mates messages. %sender% is the sender's name, %message% is the message, %userIconPath% is the path to the senders avatar, and finally %time% is the time when the message is posted. Use this code to show it's display picture (or <img src="%userIconPath%">, but this is highly recommended):
<div style='height:1px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="%userIconPath%")'>
Here's my code:
<div class="incoming">
<div class="incomingsender">%sender%</div>
<div class="incomingmessage">%message%</div>
</div>
<div id="insert"></div>
And the CSS code:
.incoming {
background-color: #FFF
}
.incomingsender {
font-weight: bold
}
.incomingmessage {
text-decoration: underline
}
And now we've finished statuschanges and incoming messages, next Outgoing. Create a folder called "Outgoing" in the same folder as main.css, and put two files called "Content.html" and "NextContent.html",
Now, write almost the same as you did with the Incoming, but change something little, I'm going to change the font-color. Here's my code:
Content.html and NextContent.html:
<div class="outgoing">
<div class="outgoingsender">%sender%</div>
<div class="outgoingmessage">%message%</div>
</div>
<div id="insert"></div>
main.css:
.outgoing {
background-color: #FFF;
color: c0c0c0;
}
.outgoingsender {
font-weight: bold;
}
.outgoingmessage {
text-decoration: underline;
}
Finished!
Post your finished themes and show me them 
Last edited by vikke on Wed Apr 12, 2006 7:29 am; edited 4 times in total |
|
| Back to top |
|
 |
|
KapKyle
Learning
Joined: 08 Apr 2006
Posts: 20
Location: Marana AZ
|
| Posted: Sun Apr 09, 2006 5:08 pm Post subject: |
|
|
Oh wow, that's easy enough that someone like me can get it. Good to see something like this, now I probably will make a theme...
Nice tutorial! Thanks
_________________
 |
|
| Back to top |
|
|
vikke
Moderator
Joined: 14 Sep 2005
Posts: 867
|
| Posted: Sun Apr 09, 2006 6:37 pm Post subject: |
|
|
| I'm glad it helped somebody Good luck! |
|
| Back to top |
|
|
Lucky
Pro Talker
Joined: 06 Oct 2005
Posts: 480
Location: Europe
|
| Posted: Sun Apr 09, 2006 10:52 pm Post subject: |
|
|
vikke.. this also helped me better understand some stuff.
Thanks 
_________________
Lucky |
|
| Back to top |
|
|
renegade
Talk n00bie
Joined: 10 Feb 2006
Posts: 5
|
| Posted: Tue Apr 11, 2006 11:22 pm Post subject: |
|
|
I think that the location of the files are changed in the new version (1.0.0.92)
It is now: C:\Documents and Settings\[user]\Local Settings\Application Data\Google\Google Talk\themes\system\chat |
|
| Back to top |
|
|
|
|
Ph3rny
Theme Moderator
Joined: 08 Apr 2006
Posts: 151
|
| Posted: Tue Apr 11, 2006 11:29 pm Post subject: |
|
|
No that was the old one
it is /themes/user/chat
you need to create the /chat directory
_________________
My Themes Including Windows 9x, BSOD, PHP, Digg, Star Wars, My First Theme, Windows XP, Lined-Paper, and EMOTICONS |
|
| Back to top |
|
|
renegade
Talk n00bie
Joined: 10 Feb 2006
Posts: 5
|
| Posted: Wed Apr 12, 2006 4:12 am Post subject: |
|
|
| I donno, I placed the folders in the directory C:\Documents and Settings\[user]\Local Settings\Application Data\Google\Google Talk\themes\system\chat and it works fine for me |
|
| Back to top |
|
|
Salamander
Learning
Joined: 02 Apr 2006
Posts: 48
|
| Posted: Wed Apr 12, 2006 6:35 am Post subject: |
|
|
| The system folder can be erased when you update gtalk. The user folder will stay. |
|
| Back to top |
|
|
renegade
Talk n00bie
Joined: 10 Feb 2006
Posts: 5
|
| Posted: Wed Apr 12, 2006 11:34 am Post subject: |
|
|
| Ok then, I'll back up my sys folder for now. When and if that folder get erased, I'll put the files in the user folder. |
|
| Back to top |
|
|
wyatt
Talk n00bie
Joined: 12 Apr 2006
Posts: 1
|
| Posted: Wed Apr 12, 2006 8:27 pm Post subject: smiley font colors |
|
|
| does anyone know what the values are to change the "emoticon" colors? |
|
| Back to top |
|
|
|
|
Salamander
Learning
Joined: 02 Apr 2006
Posts: 48
|
| Posted: Wed Apr 12, 2006 8:41 pm Post subject: |
|
|
| try the tags emph or strong, maybe it's one of those. |
|
| Back to top |
|
|
Ph3rny
Theme Moderator
Joined: 08 Apr 2006
Posts: 151
|
| Posted: Wed Apr 12, 2006 11:06 pm Post subject: |
|
|
The emoticons cannot be styled
the span that they are being held in looks exactly like this:
| Code: |
| <span style='font-weight:bold;color:rgb(0,95,255)'>:)</span> |
I pulled this out by putting <xmp> tags around %message% and then sending a smilie
so there you have it
smilies are not stylable 
_________________
My Themes Including Windows 9x, BSOD, PHP, Digg, Star Wars, My First Theme, Windows XP, Lined-Paper, and EMOTICONS |
|
| Back to top |
|
|
invisible
Learning
Joined: 13 Apr 2006
Posts: 30
|
| Posted: Thu Apr 13, 2006 10:33 pm Post subject: |
|
|
| Ph3rny wrote: |
The emoticons cannot be styled
the span that they are being held in looks exactly like this:
| Code: |
| <span style='font-weight:bold;color:rgb(0,95,255)'>:)</span> |
I pulled this out by putting <xmp> tags around %message% and then sending a smilie
so there you have it
smilies are not stylable |
| Code: |
div.msg span {
color:#116644 !important;
} |
then in your div.chat span.salutation make sure you have...
| Code: |
div.chat span.salutation {
color:#000000 !important;
} |
I have tried to style it other ways, not too many options... images won't work because is in a span just as is... You could put a box around it... I tried rotating it using directx filters (doesn't work on spans). *shrug*
I might have a theme coming out soon, woo o_O.
_________________
Invisible |
|
| Back to top |
|
|
vikke
Moderator
Joined: 14 Sep 2005
Posts: 867
|
| Posted: Fri Apr 14, 2006 9:26 am Post subject: |
|
|
This CSS gives a smiley:
div.chat span {
color: #FFFFFF !important;
font-size: 0px !important;
width: 16px;
height: 16px;
background-image: url(images/smiley.png);
} |
|
| Back to top |
|
|
invisible
Learning
Joined: 13 Apr 2006
Posts: 30
|
| Posted: Fri Apr 14, 2006 1:03 pm Post subject: |
|
|
| vikke wrote: |
This CSS gives a smiley:
div.chat span {
color: #FFFFFF !important;
font-size: 0px !important;
width: 16px;
height: 16px;
background-image: url(images/smiley.png);
} |
I was going to do this but the above means : ( would be a : ) image... It's worthless .
_________________
Invisible |
|
| Back to top |
|
|
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
![[ Hidden ]](templates/subSilver/images/lang_english/icon_email.gif "[ Hidden ]"){kind=icon}
