|
| Author | Message / Information |
| Kaiser_Sosae This message was updated on 8/20/2004 12:54:12 AM by Kaiser_Sosae | ShoutBox Tutorial posted on: 7/27/2003 9:35:35 PM First things first. Im no longer elite here, as i won't pay for it, and i dnt have a society here anymore, as i have my own phpnuke site, www.thebigempty.net. But Deadgirl asked me to fix this up, for all you chatarea folk. Ok... I originall wrote this for activetopic, and i also wrote a way to have a script add smilies. That no longer is needed. Step 1: Go to My shoutbox. This is where you'll get your free remotely hosted shoutbox. Sign up and your ready to go. Step 2: From my shoutbox find the HTML code, should be given somewhere to make the shoutbox appear. Copy that code. There are 2 ways you can put up your shoutbox, i will explain both. less difficult than using tables, but will appear different on different resolutions. And on window resizing. This goes in the Header Section Step 1 Go to cuztomize your society. Choose to place the "Who's Online" box on the left. This will Move the society over to the left. and give you space for the shoutbox on the left hand side. Step 2: Create a layer. To create a layer you do the following. <div id="Layer1" style="position:absolute; left:6px; top:????px; width:209px; height:????px; z-index:1; overflow: auto;"> SHOUTBOX CODE </div> ???? These are up to you, play around with different numbers until you get the shoutbox looking right. Adjust the Top measurement until you get the shoutbox to appear under the "Who's Online" Box give it room, as the who's online box gets bigger depending on how many ppl are on your site. Then adjust the Height to how long the shoutbox appears before having to scroll. SHOUTBOX CODE This is the code you copied My Shoutbox. Thats Done!! ------------------------------------------------- This way is slightly harder, but is much more efficient as tables resize with different resolutions and window resizing, while layers don't. Again this goes in the Header section. Step 1: Create a table that has one row, with 2 columns underneath it. The code for this is: Part A: <table width="100%" height="612" border="0"> <tr> <td height="376" colspan="2"> Here goes what ever you want to appear above the forums, and shoutbox. You can use any html, java etc.</td> </tr> Part B: Place your shoutbox Code on another web page (hosted by angelfire, or something free, try find a bannerless and host without any pop-ups. The use iframes to put it up. The code should look like this: <tr> <td width="23%" height="230"> <iframe src="URL WHERE SHOUTBOX IS" name="frame" left="0" width="230" height="1150" frameborder="0"> SHOUTBOX CODE </iframe> </td> Part C: <td width="77%"> Sooo you should have the code looking like this: <table width="100%" height="612" border="0"> <tr> <td height="376" colspan="2"> Here goes what ever you want to appear above the forums, and shoutbox. You can use any html, java etc you want.</td> </tr> <tr> <td width="23%" height="230"> <iframe src="URL WHERE SHOUTBOX IS" name="frame" left="0" width="230" height="1150" frameborder="0"> SHOUTBOX CODE </iframe> </td> <td width="77%"> Step 2 Simply close the table in the Footer by placing this code in it: </td> </tr> </table> There you have it!! If you not too sure about tables, i suggest you use the Layer method. THIS ONLY APPLIED TO ACTIVETOPIC....BUT I'LL LEAVE UP FOR FUCKS SAKE. View example here Set it right, Set it off Step 1: Go to active topic, go into your control panel and choose "Themes". Look for the code: <form method="post" action="http://www.activetopic.com/engine.post.generate"> Change this to: <form method="post" action="http://www.activetopic.com/engine.post.generate" name="Shoutbox> Step 1: Place this code in your header section of your chatarea account: <script type="text/javascript"><!-- function addsmilie(which) { val = document.Shoutbox.message.value; document.Shoutbox.message.value = val + which; } --></script> Step 2: <div id="Layer2" style="position:absolute; left:6px; top:????px; width:209px; height:????px; z-index:1; overflow: auto;"> Smiley Codes </div> Smiley Codes Here you can out as many Smilies as you want. I suggest the main ones, as to keep it not cluttered. The code looks like this: <a href="javascript:addsmilie(' ;) ')"><img src="http://activetopic.com/images/icon_wink.gif"></a> ;) This is the code for the simley "http://activetopic.com/images/icon_wink.gif" This is url of the smiley I suggest Placing it above your shoutbox, or underneath it. Getting rid of the borders around the smilies <style type="text/css"> <!-- img { border: 0; } --> </style> Thats that!! Step 1: Add this into the head section of your page: <script type="text/javascript"><!-- function addsmilie(which) { val = document.Shoutbox.message.value; document.Shoutbox.message.value = val + which; } --></script> Also to get rid of the borders around the smileys place this code in under it. <style type="text/css"> <!-- img { border: 0; } --> </style> Step 2: Add in your smilies. i suggest making it just above your shoutbox, using a table, however you don't need table. And can just use the <br/> (break) code to make a new line. <a href="javascript:addsmilie(' ;) ')"><img src="http://activetopic.com/images/icon_wink.gif"></a> ;) This is the code for the simley "http://activetopic.com/images/icon_wink.gif" This is url of the smiley There you go, thats the smiley box for the table shoutbox. Making a pop-up smiley List Only for Table Shoutbox's To view an example, again go to Here Create a link and the property target="_new" before closing the link tag. This will make a new window open. Step 1: Create a new page and place your smilies on the page. Then place this code in the header: <script type="text/javascript"> <!-- function insertEmoticon(which) { val = window.opener.document.Shoutbox.message.value; window.opener.document.Shoutbox.message.value = val + which; } --> </script> NB: Make sure that you have named your shoutbox at active topic Shoutbox. This is explained right up the top. Thats it!!!!! ------------------------------------------------- Any questions on changing the Shoutbox's look, should be asked at my shoutbox in their help forums. ALSO PLEASE DON'T PM ME OR EMAIL ME ASKING ME TO DO IT FOR U. I WILL LAUGH AT YOUR PM, AND EMAILS....DON'T WASTE YOUR OWN TIME, SO U DON'T WASTE MINE. IF YOU NEED HELP...THEN ASK SOMEONE ELSE...OR LEARN HTML AND JAVASCRIPT, IF U RUN A FORUM, THE BASICS MIGHT COME IN HANDY TO KNOW...JUST A LITTLE TIP Love Me |
|
|