Ally «my eyes are on you yeah» (kickawesome) wrote,
@ 2011-01-04 09:47:00

Current mood:	accomplished
Entry tags:	code

[Code] AIM conversation window mock-up

Live Examples

IM - gracefulally

gracefulally x

Ally Mo

gracefulally: hey!
rewriteourstory: yo
rewriteourstory: what are you up to?
gracefulally: nothing much
gracefulally: sleeping mostly
gracefulally: lol

you?
rewriteourstory: work
rewriteourstory: it's been a loooooooong day over here. it's made me kinda cranky
gracefulally: awww
gracefulally: poor thing
gracefulally: i'm just cold

rewriteourstory: yeah

TXT

this weather sucks|

Send

Blank Example (with a shadow for the window~ effect)

IM - Name (screen name)

Name x

screen name

screen name: text
screen name: text
screen name: text with emoticon

TXT

text|

Send

Code for 2nd example

<lj-raw><table width="520px" height="395px" style="background-color:#3a4a69;-moz-border-radius:3px;-webkit-border-radius:3px;font-family:Arial;font-size:11px;-moz-box-shadow:5px 5px 5px #222222;-webkit-box-shadow:5px 5px 5px #222222;" cellspacing="0" cellpadding="0">
<tr>
<td colspan=2 valign="top" width="100%" style="padding:5px;"><div style="float:left;"><img src="http://img839.imageshack.us/img839/3751/aimicon.png"></div> <div style="float:left;color:white;"><b>IM - Name (screen name)</b></div> <div style="text-align:right;"><img src="http://img831.imageshack.us/img831/5940/menuiconu.png"></div></td>
</tr>
<tr>
<td colspan=2 valign="top" style="padding:5px;"><div style="float:left;padding:3px 5px 2px 5px;color:white;background-color:#788398;font-size:14px;margin-right:5px;height:15px;-moz-border-radius:3px;-webkit-border-radius:3px;"><b>+</b></div> <div style="float:left;padding:3px 5px 2px 5px;color:black;background-color:white;margin-right:5px;height:15px;-moz-border-radius:3px;-webkit-border-radius:3px;">    <b>Name   <span valign="center" style="color:#757575;">x</span></b></div> <div style="float:left;padding:3px 5px 2px 5px;color:white;background-color:#788398;;margin-right:5px;height:15px;-moz-border-radius:3px;-webkit-border-radius:3px;" valign="center">    screen name</div> <div style="float:left;padding:3px 5px 2px 5px;color:white;background-color:#788398;;margin-right:5px;height:15px;-moz-border-radius:3px;-webkit-border-radius:3px;" valign="center"><img src="http://img211.imageshack.us/img211/7271/awayicon.png" style="margin-top:2px;float:left;">  screen name</div></td>
</tr>
<tr>
<td><table height="325px" valign="top" style="background:-moz-linear-gradient(top,  #ffffff,  #adb4c1);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#adb4c1));padding:5px 5px 10px 5px;margin:0px 0px 15px 1px;"><tr><td valign="top"><img src="http://img412.imageshack.us/img412/3962/blankicon.png" style="border:1px #c2c2c2 solid;"><br>
<div style="background-color:#e3e3e3;padding:2px;"><img src="http://img291.imageshack.us/img291/4220/undericons.png"></div></td></tr>
<tr>
<td valign="bottom"><img src="http://img412.imageshack.us/img412/3962/blankicon.png" style="border:1px #c2c2c2 solid;"></td></tr></table></td>
<td><table valign="top" style="background:-moz-linear-gradient(top,  #ffffff,  #adb4c1);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#adb4c1));margin:0px 15px 15px 0px;padding:5px 5px 10px 0px;height:325px;-moz-border-radius:0 3px 3px 0;-webkit-border-radius:0 3px 3px 0;"><tr><td valign="top"><div style="border:1px #c2c2c2 solid;background-color:white;overflow:auto;height:230px;width:380px;padding:5px;font-size:12px;line-height:20px;-moz-border-radius:3px;-webkit-border-radius:3px;"><font color="#FF0000;"><b>screen name</b>:</font> text<br>
<font color="#0000FF"><b>screen name</b>:</font> text<br>
<font color="#FF0000"><b>screen name</b>:</font> text with emoticon <img src="http://www.hidden-smileys.com/aim-smileys/aim-smileys-and-emoticons-1.gif" style="display:inline;"><br></div></td>
</tr>
<tr>
<td valign="bottom"><div style="background:-moz-linear-gradient(top,  #ffffff,  #eaecef);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaecef));-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 10px;margin-right:2px;float:left;height:40px;" align="center"><img src="http://img35.imageshack.us/img35/104/phoneicon.png"><br><font style="color:#999999;font-size:6px;"><b>TXT</b></font></div> <div style="background-color:white;-moz-box-shadow:inset 0 0 10px #92bad3;-webkit-box-shadow:inset 0 0 10px #92bad3;height:42px;width:315px;padding:4px;margin-right:2px;float:left;"><font style="font-size:16px;color:black;">text<blink>|</blink></font> <div align="right" style="background:-moz-linear-gradient(top,  #e3f0fa,  #bec9cf);-webkit-gradient(linear, left top, left bottom, from(#e3f0fa), to(#bec9cf));color:white;padding:12px 5px;margin-right:10px;float:right;-moz-border-radius:3px;-webkit-border-radius:3px;">Send</div></div> <div style="background:-moz-linear-gradient(top,  #ffffff,  #eaecef);-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eaecef));-moz-border-radius:3px;-webkit-border-radius:3px;padding:5px 5px;float:left;height:40px;" align="center"><img src="http://img262.imageshack.us/img262/44/righticon.png"></div></td></tr></table></td>
</tr>
</table></lj-raw>

Images

Emoticons

Questions/Feedback?
Leave a comment to this post. Thanks!

scribbld is part of the horse.13 network
Design by Jimmy B.
Logo created by hitsuzen.
Scribbld System Status