zachriel on DeviantArthttps://www.deviantart.com/zachriel/art/Google-Talk-journal-skin-149461536zachriel

Deviation Actions

zachriel's avatar

Google Talk journal skin

By
Published:
3.7K Views

Description

Google Talk journal skin


:pointr: Live preview :pointl:


For information of how to use the HTML for this skin, please continue reading. For a changelog, scroll to the bottom of this description.


:bulletblue::bulletblue: Username line - "breaker"
To make a blue or read line, use the .breaker class together with either .blue or .red as shown below. Include one 32x32 pixels image between the div tags, together with a word or sentence that will be written on the background color. Default avatar colors available are listed at the bottom of the preview image. If you know how, it would be much appreciated if you hosted as many images as possible on your own host.
<div class="breaker blue"><img src="http://img.photobucket.com/albums/v369/zachriel/da/layout/gtalk/avatar_blue.png" />Blue user</div>



:bulletred::bulletred: Google Talk-styled smilies
To make a little blue smiley in the Google Talk style, input the code as below. Make sure you put <b></b> somewhere inside the smiley to make sure dA doesn't make an emoticon of it. The code looks complicated, but if you study it carefully you will see what it does.
<div class="smiley">:<b></b>D</div>



:bulletblue::bulletblue: "Status" text
You can make text appear as Google Talk status messages, by wrapping them in the .status class. See the code below.
<div class="status">Status message here.</div>



:bulletred::bulletred: Journal icon
The journal icon comes in five flavors - online (green), busy (red), idle (yellow), offline (gray), and talk (white). To change it, look for this part in the CSS and change the bold part to the icon type you want.
.gr-top {
  background: url(http://img.photobucket.com/albums/v369/zachriel/da/layout/gtalk/top_talk.png) no-repeat;
  min-height: 54px;
  border: 0;
}



This skin was made using screenshots from the official Google Talk chat client, using the Serene Pictures appearance. I take no credit for the design, I just chopped it up in pieces and wrote dA CSS for it.



Changelog
January 12th, 2010 - Added margins above and below the entire journal to make sure individual journals don't look like one very long one on somebody's journal page.
© 2010 - 2024 zachriel
Comments13
Join the community to add your comment. Already a deviant? Log In
Burn-Teh-Wolfeh's avatar
I can't change the journal icon... It disappears the entire top when I change the code at all..