InsaneJournal

Tweak says, "I declare"

Ally -- are you already gone? (wastintime) wrote in rp_tutorials,
@ 2011-01-04 16:27:00

Current mood:	accomplished
Entry tags:	layouts: media

[Other Tables] AIM Conversation Window Mock-up (Scrollable)

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!

(Post a new comment)

	hammertech 2011-01-04 11:23 pm UTC (link)
	THIS IS FANTASTIC. <3 (Reply to this) (Thread)

	wastintime 2011-01-04 11:27 pm UTC (link)
	THANK YOU! I spent a lot of time working on it today because IJ was down. (Reply to this) (Parent)

	barrel_of_pbs 2011-01-05 12:01 am UTC (link)
	Agreed. This is pretty amazing! Great work. (Reply to this) (Thread)

	wastintime 2011-01-05 04:51 am UTC (link)
	Thank you! :) (Reply to this) (Parent)

	pands 2011-01-05 01:50 am UTC (link)
	THANK YOU! ♥ (Reply to this) (Thread)

	wastintime 2011-01-05 04:51 am UTC (link)
	You're welcome! :D (Reply to this) (Parent)

	graciebird 2011-01-05 07:57 pm UTC (link)
	this is REALLY cool. awesome job! (Reply to this) (Thread)

	wastintime 2011-01-05 09:09 pm UTC (link)
	Thanks! I really had fun with it! :) (Reply to this) (Parent)

	aylaranzz 2011-01-06 12:26 am UTC (link)
	That is amazing! (Reply to this) (Thread)

	wastintime 2011-01-06 12:28 am UTC (link)
	Thank you! :D (Reply to this) (Parent)

	bri 2011-01-06 02:25 pm UTC (link)
	You did a fantastic job! (Reply to this) (Thread)

	wastintime 2011-01-06 02:25 pm UTC (link)
	Thanks. :D (Reply to this) (Parent)

	rivertam 2011-03-02 07:41 am UTC (link)
	wow. this is absolutely amazing. (Reply to this)

	chaceingcats 2012-09-17 06:28 pm UTC (link)
	Hi! I love this and it's awesome, but lately the one image has disappeared and causes the tables to get wonky. I was wondering if there was a quick fix you could suggest? (Reply to this)