txtShout example

txtShout Example

name:
email / url:
message:	[smilies]

To the right is your txtShout. If you open this page after uploading everything to your site, the txtShout should work. Below is the code you need to put it on your pages. Select it all, press Ctrl+C to copy, and Ctrl+V to paste it into your webpages.

<script language="JavaScript">
function popSmilies() {
  window.open('txtshout/smilies.php','smilies','width=180,height=400,toolbar=no,status=no,resizable=yes,scrollbars=yes');
}
function checkLength(x) {
  maxMsgLength = 300;
  if (x.value.length > maxMsgLength) {
    x.value = x.value.substring(0, maxMsgLength);
  }
}
</script>
<table border="0" cellpadding="0" cellspacing="0" align="right">
<tr><td colspan="2" align="center">
<iframe frameborder="0" name="shoutframe" src="txtshout/index.php" marginheight="2" marginwidth="2" width="160" height="200" scrolling="yes" allowtransparency="yes" style="border: #2D4063 1px solid"></iframe>
</tr><tr><td>[<a href="txtshout/index.php" target="shoutframe">refresh</a>]</td><td align="right"><small><a href="http://txtbox.co.za" target="_blank">txtShout</a></small></td></tr>
<tr><td colspan="2"><table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td>
<form name="shoutform" action="txtshout/shout.php" method="post" target="shoutframe">
name:</td><td align="right"><input type="text" name="ts_nm" size="22" maxlength="25" style="width:100px; border: #000000 1px solid; background-color: #ECF0F3;font-family: Arial, sans-serif; font-size: 8pt;"></td></tr>
<tr><td>email / url:</td><td align="right"><input type="text" name="ts_ul" size="22" maxlength="80" style="width:100px; border: #000000 1px solid; background-color: #ECF0F3;font-family: Arial, sans-serif; font-size: 8pt;"></td></tr>
<tr><td>message:</td><td align="right">[<a href="JavaScript:popSmilies()">smilies</a>]</td></tr>
<tr><td colspan="2" align="center"><textarea name="ts_mg" cols="15" rows="3" style="width:100%; border: #000000 1px solid; background-color: #ECF0F3;font-family: Arial, sans-serif; font-size: 8pt;" onKeyUp="checkLength(this)"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" name="sub" value=" shout "></form></td></tr>
</table></td></tr>
</table>

Changing Size and Position
All size attributes are set in the code snippet you pasted into your site. To change the size of the main post viewing frame, change these values:

You will probably then find that the three input textboxes don't fit well, so you can change their sizes by adjusting the width properties for each.

Changing Colours and Fonts
To customise colours and fonts, there are two places to look: shoutstyle.css, and the code snippet you pasted into your site. In shoutstyle.css you can change all the style options of the post-viewing area (which is an iframe). In the code snippet you can change the name, email and message input boxes, by editing the style attrbibute for each.