Re: [Add-on] AJAX Chat 2.0.0 Beta Styles

[strahd1970 Paul]

Sniper_E...

Here is the chat_body.html file:

Spoiler:

Code: Select all

<!-- IF S_GET_CHAT -->
   <!-- IF S_READ or S_ADD -->
               <!-- BEGIN chatrow -->
                  <div id="p{chatrow.MESSAGE_ID}" class="post bg{chatrow.CLASS}">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <div class="postbody">
                           <!-- IF U_ACP or U_MCP -->
                              <ul class="profile-icons">
                                 <li class="delete-icon">
                                    <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a>
                                 </li>
                              </ul>
                           <!-- ENDIF -->
                           <div class="content">{chatrow.MESSAGE}</div>
                        </div>
                        <dl class="postprofile" id="profile{postrow.POST_ID}">
                           <dt>{chatrow.USERNAME_FULL}<br />{chatrow.TIME}</dt>

                        </dl>
                        <span class="corners-bottom"><span></span></span>
                     </div>
                  </div>
               <!-- END chatrow -->
      <!-- IF S_WHOISONLINE -->---
               <h4>{L_ONLINE_LIST}:</h4>
            <!-- BEGIN whoisrow -->
                  <div>
                     <div class="inner">
                        <div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
                     </div>
                  </div>
               <!-- END whoisrow -->
         ---{LAST_TIME}---{DELAY}---{LAST_POST}
      <!-- ENDIF -->
   <!-- ENDIF -->
<!-- ELSE -->
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_header.html -->
   <!-- ENDIF -->
   <script type="text/javascript">
   // <![CDATA[
         var form_name = 'postform';
         var text_name = 'message';
      // ]]>
   <!--
   var fieldname = 'chat';
   var last_time = 0;
   var xmlHttp = http_object();
   var last_id = {LAST_ID};
   var type = 'receive';
   var post_time = {TIME};
   var read_interval = 15000;
   var interval = setInterval('handle_send("read", last_id);', read_interval);

   function handle_send(mode, f)
   {
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
      {
         indicator_switch('on');
         type = 'receive';
         param = 'mode=' + mode;   
         param += '&last_id=' + last_id;
         param += '&last_time=' + last_time;         
         param += '&last_post=' + post_time;         
         param += '&read_interval=' + read_interval;         
   
         if (mode == 'add' && document.postform.message.value != '')
         {
            type = 'send';
            for(var i = 0; i < f.elements.length; i++)
            {
               elem = f.elements[i];
               param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
            }
            document.postform.message.value = '';
         }
         else if (mode == 'delete')
         {
            type = 'delete';
            param += '&chat_id=' + f;
         }
         xmlHttp.open("POST", '{FILENAME}', true);
         xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xmlHttp.onreadystatechange = handle_return;
         xmlHttp.send(param);
      }
   }
   
   function handle_return()
   {
      if (xmlHttp.readyState == 4)
      {
         if (type != 'delete')
         {
            results = xmlHttp.responseText.split('---');
            if (results[1])
            {
               if (last_id == 0)
               {
                  document.getElementById(fieldname).innerHTML = results[0];
               }
               else
               {
                  document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
               }
               last_id = results[1];
               if (results[2])
               {
                  document.getElementById('whois_online').innerHTML = results[2];
                  last_time = results[3];
                  if (results[4] != read_interval * 1000)
                  {
                     window.clearInterval(interval);
                     read_interval = results[4] * 1000;
                     interval = setInterval('handle_send("read", last_id);', read_interval);
                     document.getElementById('update_seconds').innerHTML = results[4];
                  }
                  post_time = results[5];
               }
            }
         }
         indicator_switch('off');
      }
   }
   
   function delete_post(chatid)
   {
      document.getElementById('p' + chatid).style.display = 'none';
      handle_send('delete', chatid);
   }
   
   function indicator_switch(mode)
   {
      if(document.getElementById("act_indicator"))
      {
         var img = document.getElementById("act_indicator");   
         if(img.style.visibility == "hidden" && mode == 'on')
         {
            img.style.visibility = "visible";
         }
         else if (mode == 'off')
         {
            img.style.visibility = "hidden"
         }   
      }
   }
   
   function http_object()
   {
      if (window.XMLHttpRequest)
      {
         return new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {
         return new ActiveXObject("Microsoft.XMLHTTP");
      }
      else
      {
         document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
      }
   }
   function addText(instext)
   {
          var mess = document.getElementById('message');
        //IE support
              if (document.selection)
      {
                    mess.focus();
                     sel = document.selection.createRange();
                     sel.text = instext;
                     document.message.focus();
              }
      //MOZILLA/NETSCAPE support
      else if (mess.selectionStart || mess.selectionStart == "0")
      {
         var startPos = mess.selectionStart;
         var endPos = mess.selectionEnd;
         var chaine = mess.value;
                     mess.value = chaine.substring(0, startPos) + instext + chaine.substring(endPos, chaine.length);
                     mess.selectionStart = startPos + instext.length;
                     mess.selectionEnd = endPos + instext.length;
                     mess.focus();
      }
      else
      {
         mess.value += instext;
                     mess.focus();
      }
   }
   -->
   </script>
   <style type="text/css">
   <!--
      #act_indicator {
         visibility:hidden;
      }
      .shouts {
         width: 85%;
         height:200px;
         overflow:auto;
         float:left;
      }
      #chat {
         width: 100%;
         text-align:left;
      }   
      #chat * {
         margin:0px;
         padding:0px;
         min-height:0px;
      
         
      }
      .postprofile {
         min-height: 5px !important;
      }
      .chatform {
         width: 90%;
         text-align:center;
      }
      .onlinelist {
         width: 14.5%;
         overflow:auto;
         height:200px;
      }
      .users {
         width: 90%;
         text-align: left;
         text-indent: 5px;
         margin-left:auto;
         margin-right:auto;
      }
      .user {
         width: 95%;
         font-size: 1.1em;
         font-family:Verdana, Arial, Helvetica, sans-serif;
         line-height: 1.4em;
      }
      #act_indicator {
         visibility: hidden;
      }
      .chatinput {width: 80% !important;}
      .online_img {
         vertical-align:right;
      }
   -->
   </style>
   <!-- IF S_USER_LOGGED_IN -->
      <div class="forabg">
         <div class="inner">
            <span class="corners-top"><span></span></span>
            <div class="chatform" align="center">   
<!-- INCLUDE posting_buttons.html -->

<!-- IF S_SMILIES_ALLOWED and .smiley -->               
               <!-- BEGIN smiley -->
                  <a href="#" onclick="insert_text('{smiley.A_SMILEY_CODE}', true); return false;"><img src="{smiley.SMILEY_IMG}" width="{smiley.SMILEY_WIDTH}" height="{smiley.SMILEY_HEIGHT}" alt="{smiley.SMILEY_CODE}" title="{smiley.SMILEY_DESC}" /></a>
               <!-- END smiley -->
            <!-- ENDIF -->               
                                                 
               <form name="postform" id="postform" method="post" action="javascript:void(0);" onsubmit="handle_send('add', this)" autocomplete="off">
                  <strong style="color: white;">{L_MESSAGE}:<!--*Feel free to join the chat.*--></strong> <input type="text" tabindex="1" name="message" id="message" class="inputbox chatinput" />
                  <input type="submit" class="button1" value="{L_SUBMIT}" name="submit" tabindex="6" accesskey="s"/><br />
                         </div>
            <span class="corners-bottom"><span></span></span>
         </div>
      </div>
        </form>
   <!-- ENDIF -->
   <div class="forabg" align="left">
      <div class="inner">
         <span class="corners-top"><span></span></span>
         <div class="shouts">
            <div id="chat">
               <!-- BEGIN chatrow -->
                  <div id="Div1" class="post bg{chatrow.CLASS}">
                     <div class="inner"><span class="corners-top"><span></span></span>
                        <div class="postbody">
                           <!-- IF U_ACP or U_MCP -->
                              <ul class="profile-icons">
                                 <li class="delete-icon">
                                    <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><span>{L_DELETE_POST}</span></a>
                                 </li>
                              </ul>
                           <!-- ENDIF -->
                           <div class="content">{chatrow.MESSAGE}</div>
                        </div>
                        <dl class="postprofile" id="Dl1">
                           <dt>{chatrow.USERNAME_FULL}<br />{chatrow.TIME}</dt>

                        </dl>
                        <span class="corners-bottom"><span></span></span>
                     </div>
                  </div>
                <!-- END chatrow -->
            </div>
         </div>
            <div class="users" id="whois_online">
               <h4>{L_ONLINE_LIST}:</h4>
               <!-- BEGIN whoisrow -->
                  <div>
                     <div class="inner">
                        <div class="user"><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
                     </div>
                  </div>
               <!-- END whoisrow -->
             </div>
         <span class="corners-bottom"><span></span></span>
      </div>
   </div>
   <br />
   
   <div class="forabg" align="center">
      <div class="inner">
         <span class="corners-top"><span></span></span>
         <div class="post">
            <div id="author">{L_DETAILS}
               <img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" />
               <strong>â?¢ {L_UPDATES} <span id="update_seconds">{DELAY}</span> {L_UNIT}</strong>
            </div>
         </div>
         <span class="corners-bottom"><span></span></span>
      </div>
   </div>
   
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_footer.html -->
   <!-- ENDIF -->
<!-- ENDIF -->



and here is the index_body.html file:

Spoiler:

Code: Select all

<!-- INCLUDE overall_header.html -->

<p class="{S_CONTENT_FLOW_END}<!-- IF S_USER_LOGGED_IN --> rightside<!-- ENDIF -->"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ELSE -->{CURRENT_TIME}<!-- ENDIF --></p>
<!-- IF U_MCP --><p>{CURRENT_TIME} <br />[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</p><!-- ELSEIF S_USER_LOGGED_IN --><p>{CURRENT_TIME}</p><!-- ENDIF -->

<!-- IF S_DISPLAY_SEARCH or (S_USER_LOGGED_IN and not S_IS_BOT) -->
<ul class="linklist">
   <!-- IF S_DISPLAY_SEARCH -->
      <li><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a><!-- IF S_USER_LOGGED_IN --> &bull; <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><!-- ENDIF --> &bull; <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></li>
   <!-- ENDIF -->
   <!-- IF not S_IS_BOT and U_MARK_FORUMS --><li class="rightside"><a href="{U_MARK_FORUMS}" accesskey="m">{L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->
</ul>
<!-- ENDIF -->

<!-- INCLUDE forumlist_body.html -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
   <form method="post" action="{S_LOGIN_ACTION}" class="headerspace">
   {S_FORM_TOKEN}
   <h3><a href="{U_LOGIN_LOGOUT}">{L_LOGIN_LOGOUT}</a>&nbsp; &bull; &nbsp;<a href="{U_REGISTER}">{L_REGISTER}</a></h3>
      <fieldset class="quick-login">
         <label for="username">{L_USERNAME}:</label>&nbsp;<input type="text" name="username" id="username" size="10" class="inputbox" title="{L_USERNAME}" /> 
         <label for="password">{L_PASSWORD}:</label>&nbsp;<input type="password" name="password" id="password" size="10" class="inputbox" title="{L_PASSWORD}" />
         <!-- IF S_AUTOLOGIN_ENABLED -->
            | <label for="autologin">{L_LOG_ME_IN} <input type="checkbox" name="autologin" id="autologin" /></label>
         <!-- ENDIF -->
         <input type="submit" name="login" value="{L_LOGIN}" class="button2" />
      </fieldset>
   </form>
<!-- ENDIF -->

    <br />
       <div class="forabg">
          <div class="inner">
          <div class="inner"><span class="corners-top"><span></span></span>
           <ul class="topiclist">
             <li class="header">
                <dl class="icon">
                   <dt>STAT BOX</dt>
                   <dd class="topics">&nbsp;</dd>
                   <dd class="posts">&nbsp;</dd>
                   <dd class="lastpost"><span>&nbsp;</span></dd>
                </dl>
             </li>
             </ul>
           <ul class="stats forums">
             <!-- IF S_USER_LOGGED_IN -->
             <!-- INCLUDE chat_body.html -->
             <!-- ENDIF -->
             <!-- IF S_DISPLAY_ONLINE_LIST -->
             <li class="srow">
             <dl class="icon" style="background-image: url(./styles/problack/imageset/whos_online.gif); background-repeat: no-repeat;">
                <dt>   
                   <p class="mstats"><a href="{U_VIEWONLINE}" class="forumtitle">{L_WHO_IS_ONLINE}</a><br />{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> <br />{LOGGED_IN_USER_LIST}
                   <!-- IF LEGEND --><br /><em>{L_LEGEND}: {LEGEND}</em><!-- ENDIF --></p>
                </dt>
             </dl>
             </li>
             <!-- ENDIF -->
             <li class="srow">
             <dl class="icon" style="background-image: url(./styles/problack/imageset/bday.gif); background-repeat: no-repeat;">
                <dt>   
                   <p class="mstats"><a href="index.php" class="forumtitle">{L_BIRTHDAYS}</a><br /><!-- IF BIRTHDAY_LIST -->{L_CONGRATULATIONS}: <strong>{BIRTHDAY_LIST}</strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF --></p>
                </dt>
             </dl>
             </li>
             <li class="srow">
             <dl class="icon" style="background-image: url(./styles/problack/imageset/stats.gif); background-repeat: no-repeat;">
                <dt>   
                   <a href="index.php" class="forumtitle">{L_STATISTICS}</a><br />
                   <p class="mstats">{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}</p>
                </dt>
             </dl>
             </li>
           </ul>
          <span class="corners-bottom"><span></span></span></div>
          </div>
       </div>
    <br />
<!-- INCLUDE overall_footer.html -->

I put it back to original for the time being and this is what it looks like:

[Sniper_E]

Take this part out of your index_body.html file.

Code: Select all

             <!-- IF S_USER_LOGGED_IN -->
             <!-- INCLUDE chat_body.html -->
             <!-- ENDIF -->

And move it up under the <!-- INCLUDE forumlist_body.html --> like this:

Code: Select all

<!-- INCLUDE forumlist_body.html -->

<!-- IF S_USER_LOGGED_IN -->
<!-- INCLUDE chat_body.html -->
<!-- ENDIF -->

<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->

That will put your chat above the STAT BOX where it goes.
And you are missing the category of the chat page. You might want to put that back in there.
Put that back in there and then show your chat_body.html without all that smilie and bbcode stuff in it. You showed your old one.
Let's get your chat page tight and then you can play with adding that other stuff.

[strahd1970 Paul]

Sniper_E... I'll make the changes when I get back home and let you know how it went!!

Thanks for all your help!

[ezzzy]

@ strahd1970.... You needed the <br /> in after the last </div> in your chat_body.html file. Look here for an example: viewtopic.php?p=77165#p77165

And I see that you have your chat in the Statistics section. The chat should stand alone above that section.
Show your index_body.html codes and we can get that section right for you. You might want to show your chat_body.html file also.

I can show you how that needs to be written but I'm not going to find out why the update minutes are not showing.
You know you had to change the ./chat.php file to get those smilies and bbcodes in there. Something there could be causing that problem.
That is NOT my thing. I'd say put the original ./chat.php file back and see if it shows. I'll deal with your layout but not the MODs you add to it.



For ezzzy.... My PhotoShop want open his icon_post_delete.gif image. Is that because it was created with PhotoShop C3?
Maybe someone else can edit this and make it half the size and save it as icon_chat_delete.gif for the chat.

NVM, I got it.... It was a .png image saved as a .gif.... that's why I couldn't open it I guess.
Here is a icon_chat_delete.png you can use for your chat.

Okay Sniper_E

I got the small buttons to work and everything on the chat is

Thanks again for all your help!!!
EzzZY

[Sniper_E]

Good Deal EzzZY!

I like the look of the Chat the best in your X-Treme style. This is what mine's looking like:

That's just a nice looking Chat!

Spoiler:

Final draft. chat_body.html

Code: Select all

<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_GET_CHAT -->
   <!-- IF S_READ or S_ADD -->
      <!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}">
            <hr style="background: #10315E;" />
            <table class="tablebg" style="margin: 4px;" cellspacing="0" width="100%">
            <tr class="<!-- IF chatrow.CLASS is even -->row2<!-- ELSEIF chatrow.CLASS is odd -->row1<!-- ENDIF -->">
               <td width="100%" align="left"><!-- IF U_ACP or U_MCP --> <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><img src="{T_IMAGESET_LANG_PATH}/icon_chat_delete.png" alt="" /></a> <!-- ENDIF --> <b style="font-size: 1.1em;">{chatrow.USERNAME_FULL}</b> « {chatrow.TIME} » &nbsp; <span class="postbody">{chatrow.MESSAGE}</span> </td>
            </tr>
            </table>
         </div>
      <!-- END chatrow -->--!--{LAST_ID}
      <!-- IF S_WHOISONLINE -->--!--
         <!-- BEGIN whoisrow -->
            <div><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> <b style="font-size: 1.1em;">{whoisrow.USERNAME_FULL}</b></div>
         <!-- END whoisrow -->--!--{LAST_TIME}--!--{DELAY}--!--{LAST_POST}
      <!-- ENDIF -->
   <!-- ENDIF -->
<!-- ELSE -->
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_header.html -->
   <!-- ENDIF -->
   <script type="text/javascript">
   <!--
   var fieldname = 'chat';
   var last_time = 0;
   var xmlHttp = http_object();
   var last_id = {LAST_ID};
   var type = 'receive';
   var post_time = {TIME};
   var read_interval = 45000;
   var interval = setInterval('handle_send("read", last_id);', read_interval);

   function handle_send(mode, f)
   {
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
      {
         indicator_switch('on');
         type = 'receive';
         param = 'mode=' + mode;
         param += '&last_id=' + last_id;
         param += '&last_time=' + last_time;
         param += '&last_post=' + post_time;
         param += '&read_interval=' + read_interval;

         if (mode == 'add' && document.text.message.value != '')
         {
            type = 'send';
            for(var i = 0; i < f.elements.length; i++)
            {
               elem = f.elements[i];
               param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
            }
            document.text.message.value = '';
         }
         else if (mode == 'delete')
         {
            type = 'delete';
            param += '&chat_id=' + f;
         }
         xmlHttp.open("POST", '{FILENAME}', true);
         xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xmlHttp.onreadystatechange = handle_return;
         xmlHttp.send(param);
      }
   }

   function handle_return()
   {
      if (xmlHttp.readyState == 4)
      {
         if (type != 'delete')
         {
            results = xmlHttp.responseText.split('--!--');
            if (results[1])
            {
               if (last_id == 0)
               {
                  document.getElementById(fieldname).innerHTML = results[0];
               }
               else
               {
                  document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
               }
               last_id = results[1];

               if (results[2])
               {
                  document.getElementById('whois_online').innerHTML = results[2];
                  last_time = results[3];
                  if (results[4] != read_interval * 3000)
                  {
                     window.clearInterval(interval);
                     read_interval = results[4] * 3000;
                     interval = setInterval('handle_send("read", last_id);', read_interval);
                     document.getElementById('update_seconds').innerHTML = results[4];
                  }
                  post_time = results[5];
               }
            }
         }
         indicator_switch('off');
      }
   }

   function delete_post(chatid)
   {
      document.getElementById('p' + chatid).style.display = 'none';
      handle_send('delete', chatid);
   }

   function indicator_switch(mode)
   {
      if(document.getElementById("act_indicator"))
      {
         var img = document.getElementById("act_indicator");
         if(img.style.visibility == "hidden" && mode == 'on')
         {
            img.style.visibility = "visible";
         }
         else if (mode == 'off')
         {
            img.style.visibility = "hidden"
         }
      }
   }

   function http_object()
   {
      if (window.XMLHttpRequest)
      {
         return new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {
         return new ActiveXObject("Microsoft.XMLHTTP");
      }
      else
      {
         document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
      }
   }
   -->
   </script>
   <style type="text/css">
   <!--
      .box
      {
         width: 100%;
         margin-left: auto;
         margin-right: auto;
      }
      .shouts {
         width: 100%;
         height:300px;
         overflow:auto;
      }
      #chat {
         width: 99%;
         text-align:left;
      }
      #message {
         width: 70%;
      }
      #whois_online{
         vertical-align:text-top;
         text-align:left;
      }
      .online_img {
         vertical-align:middle;
      }
      #act_indicator {
         visibility:hidden;
      }
   -->
   </style>
   <div class="box">
<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">
   <tr>
<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">

      <td><img src="{T_THEME_PATH}/images/box_01.png" width="41" height="48" alt=""></td>

      <td background="{T_THEME_PATH}/images/box_02.png" width="50%" height="48"></td>

      <td background="{T_THEME_PATH}/images/cu.png" width="450" height="48"><h4 align="center">{L_CHAT_EXPLAIN}</h4></td>

      <td background="{T_THEME_PATH}/images/box_02.png" width="50%" height="48"></td>

      <td><img src="{T_THEME_PATH}/images/box_04.png" width="41" height="48" alt=""></td>
</table>
</tr>

<tr>
<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">

      <td background="{T_THEME_PATH}/images/box_08.png" width="41" height="100%"></td>
<td>
      <table class="tablebg" cellspacing="1" width="100%">
      <tr>
         <th width="15%" nowrap="nowrap">
         {L_ONLINE_LIST}
         </th>
         <th align="center" width="100%">
      <!-- IF S_USER_LOGGED_IN -->
         <form name="text" id="text" method="post" action="javascript:void(0);" onSubmit="handle_send('add', this)" autocomplete="off">{L_MESSAGE}:
         <input type="text" tabindex="1" name="message" id="message" class="inputbox" size="28" />
         <input class="btnmain" type="submit" name="submit" value="{L_SUBMIT}" />
         </form>
      <!-- ENDIF -->
         </th>
      </tr>
      <tr>
         <td class="row1" width="15%" nowrap="nowrap">
            <div class="shouts">
               <div id="whois_online">
               <!-- BEGIN whoisrow -->
                  <div>
                     <img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> <b style="font-size: 1.1em;">{whoisrow.USERNAME_FULL}</b>
                  </div>
               <!-- END whoisrow -->
               </div>
            </div>
         </td>
         <td class="row3" style="text-align:left;" height="220">
            <div class="shouts">
               <div id="chat">
               <!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}">
            <hr style="background: #10315E;" />
            <table class="tablebg" style="margin: 4px;" cellspacing="0" width="100%">
                  <!-- IF chatrow.CLASS is even --><tr class="row2"><!-- ELSE --><tr class="row1"><!-- ENDIF -->
                        <td align="left">
                     <!-- IF U_ACP or U_MCP -->
                        <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><img src="{T_IMAGESET_LANG_PATH}/icon_chat_delete.png" /></a>
                     <!-- ENDIF -->
                        <b style="font-size: 1.1em;">{chatrow.USERNAME_FULL}</b> « {chatrow.TIME} » &nbsp; <span class="postbody">{chatrow.MESSAGE}</span>
                        </td>
                     </tr>
                     </table>
                     <hr style="background: #10315E;" />
                  </div>
               <!-- END chatrow -->
               </div>
            </div>
         </td>
      </tr>
      </table>
</td>
      <td background="{T_THEME_PATH}/images/box_09.png" width="41" height="100%"></td>
</table>
   </tr>
   <tr>
<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">

      <td><img src="{T_THEME_PATH}/images/box_10.png" width="41" height="46" alt=""></td>
      <td background="{T_THEME_PATH}/images/box_11.png" width="100%" height="46"><div style="float: left;">&nbsp;<img src="{T_THEME_PATH}/images/icon_mini_chat.png"> <a href="http://startrekguide.com/community/viewtopic.php?p=16364#p16364"><strong>AJAX Chat</strong></a>&nbsp;&copy; 2007 <strong style="color: #7B95B2;">StarTrek</strong><strong style="color: #D98303;">Guide</strong></div><div style="float: right;"><img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" />&nbsp;&nbsp;<strong>{L_UPDATES} <span id="update_seconds"> {DELAY} </span> {L_UNIT}</strong> &nbsp;&nbsp;</div></td>
      <td><img src="{T_THEME_PATH}/images/box_13.png" width="41" height="46" alt=""></td>
</table>
   </div>
<!-- IF S_CHAT -->
<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF -->

You can choose the Color of the lines between the chat, User size and Margin around the text with this draft.

Let's see your final draft.

[ezzzy]

Okay I think we got the same looking Chat "Sniper_E"



here is my final draft you created

Spoiler:

<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_GET_CHAT -->
<!-- IF S_READ or S_ADD -->
<!-- BEGIN chatrow -->
<div id="p{chatrow.MESSAGE_ID}">
<table class="tablebg" style="text-align:left; border-width: 1px 1px 0 1px; border-style: solid; border-color: #00417F;" cellpadding="6" cellspacing="0" width="100%">
<tr class="<!-- IF chatrow.CLASS is even -->row2<!-- ELSEIF chatrow.CLASS is odd -->row1<!-- ENDIF -->">
<td width="100%" align="left"><!-- IF U_ACP or U_MCP --> <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><img src="{T_IMAGESET_LANG_PATH}/icon_chat_delete.gif" /></a> <!-- ENDIF --> <b>{chatrow.USERNAME_FULL}</b> « {chatrow.TIME} » &nbsp; <span class="postbody">{chatrow.MESSAGE}</span> </td>
</tr>
</table>
</div>
<!-- END chatrow -->--!--{LAST_ID}
<!-- IF S_WHOISONLINE -->--!--
<!-- BEGIN whoisrow -->
<div><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
<!-- END whoisrow -->--!--{LAST_TIME}--!--{DELAY}--!--{LAST_POST}
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ELSE -->
<!-- IF S_CHAT -->
<!-- INCLUDE overall_header.html -->
<!-- ENDIF -->
<script type="text/javascript">
<!--
var fieldname = 'chat';
var last_time = 0;
var xmlHttp = http_object();
var last_id = {LAST_ID};
var type = 'receive';
var post_time = {TIME};
var read_interval = 15000;
var interval = setInterval('handle_send("read", last_id);', read_interval);

function handle_send(mode, f)
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
indicator_switch('on');
type = 'receive';
param = 'mode=' + mode;
param += '&last_id=' + last_id;
param += '&last_time=' + last_time;
param += '&last_post=' + post_time;
param += '&read_interval=' + read_interval;

if (mode == 'add' && document.text.message.value != '')
{
type = 'send';
for(var i = 0; i < f.elements.length; i++)
{
elem = f.elements[i];
param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
}
document.text.message.value = '';
}
else if (mode == 'delete')
{
type = 'delete';
param += '&chat_id=' + f;
}
xmlHttp.open("POST", '{FILENAME}', true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = handle_return;
xmlHttp.send(param);
}
}

function handle_return()
{
if (xmlHttp.readyState == 4)
{
if (type != 'delete')
{
results = xmlHttp.responseText.split('--!--');
if (results[1])
{
if (last_id == 0)
{
document.getElementById(fieldname).innerHTML = results[0];
}
else
{
document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
}
last_id = results[1];

if (results[2])
{
document.getElementById('whois_online').innerHTML = results[2];
last_time = results[3];
if (results[4] != read_interval * 1000)
{
window.clearInterval(interval);
read_interval = results[4] * 1000;
interval = setInterval('handle_send("read", last_id);', read_interval);
document.getElementById('update_seconds').innerHTML = results[4];
}
post_time = results[5];
}
}
}
indicator_switch('off');
}
}

function delete_post(chatid)
{
document.getElementById('p' + chatid).style.display = 'none';
handle_send('delete', chatid);
}

function indicator_switch(mode)
{
if(document.getElementById("act_indicator"))
{
var img = document.getElementById("act_indicator");
if(img.style.visibility == "hidden" && mode == 'on')
{
img.style.visibility = "visible";
}
else if (mode == 'off')
{
img.style.visibility = "hidden"
}
}
}

function http_object()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object. Consider upgrading your browser.';
}
}
-->
</script>
<style type="text/css">
<!--
.box
{
width: 100%;
margin-left: auto;
margin-right: auto;
}
.shouts {
width: 100%;
height:300px;
overflow:auto;
}
#chat {
width: 100%;
text-align:left;
}
#message {
width: 65%;
}
#whois_online{
vertical-align:text-top;
text-align:left;
}
.online_img {
vertical-align:middle;
}
#act_indicator {
visibility:hidden;
}
-->
</style>
<div class="box">
<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">

<td><img src="{T_THEME_PATH}/images/box_01.png" width="41" height="48" alt=""></td>

<td background="{T_THEME_PATH}/images/box_02.png" width="50%" height="48"></td>

<td background="{T_THEME_PATH}/images/cu.png" width="450" height="48"><h4 align="center">{L_CHAT_EXPLAIN}</h4></td>

<td background="{T_THEME_PATH}/images/box_02.png" width="50%" height="48"></td>

<td><img src="{T_THEME_PATH}/images/box_04.png" width="41" height="48" alt=""></td>
</table>
</tr>

<tr>
<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">

<td background="{T_THEME_PATH}/images/box_08.png" width="41" height="100%"></td>
<td>
<table class="tablebg" cellspacing="1" width="100%">
<tr>
<th width="15%" nowrap="nowrap">
{L_ONLINE_LIST}
</th>
<th align="center" width="100%">
<!-- IF S_USER_LOGGED_IN -->
<form name="text" id="text" method="post" action="javascript:void(0);" onSubmit="handle_send('add', this)" autocomplete="off">{L_MESSAGE}:
<input type="text" tabindex="1" name="message" id="message" class="inputbox" size="28" />
<input class="btnmain" type="submit" name="submit" value="{L_SUBMIT}" />
</form>
<!-- ENDIF -->
</th>
</tr>
<tr>
<td class="row1" width="15%" nowrap="nowrap">
<div class="shouts">
<div id="whois_online">
<!-- BEGIN whoisrow -->
<div>
<img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}
</div>
<!-- END whoisrow -->
</div>
</div>
</td>
<td class="row3" style="text-align:left;" height="220">
<div class="shouts">
<div id="chat">
<!-- BEGIN chatrow -->
<div id="p{chatrow.MESSAGE_ID}">
<table class="tablebg" style="text-align:left; border-width: 1px 1px 0 1px; border-style: solid; border-color: #00417F;" cellpadding="6" cellspacing="0" width="100%">
<!-- IF chatrow.CLASS is even --><tr class="row2"><!-- ELSE --><tr class="row1"><!-- ENDIF -->
<td align="left">
<!-- IF U_ACP or U_MCP -->
<a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><img src="{T_IMAGESET_LANG_PATH}/icon_chat_delete.gif" /></a>
<!-- ENDIF -->
<b>{chatrow.USERNAME_FULL}</b> « {chatrow.TIME} » &nbsp; <span class="postbody">{chatrow.MESSAGE}</span>
</td>
</tr>
</table>
</div>
<!-- END chatrow -->
</div>
</div>
</td>
</tr>
</table>
</td>
<td background="{T_THEME_PATH}/images/box_09.png" width="41" height="100%"></td>
</table>
</tr>
<tr>
<table id="bx" width="100%" border="0" cellpadding="0" cellspacing="0">

<td><img src="{T_THEME_PATH}/images/box_10.png" width="41" height="46" alt=""></td>
<td background="{T_THEME_PATH}/images/box_11.png" width="100%" height="46"><div style="float: left;">&nbsp;<strong>AJAX Chat</strong></a>&nbsp;&copy; 2007 <strong style="color: #7B95B2;">StarTrek</strong><strong style="color: #D98303;">Guide</strong></div><div style="float: right;"><img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" />&nbsp;&nbsp;<strong>{L_UPDATES} <span id="update_seconds"> {DELAY} </span> {L_UNIT}</strong> &nbsp;&nbsp;</div></td>
<td><img src="{T_THEME_PATH}/images/box_13.png" width="41" height="46" alt=""></td>
</table>
</div>
<!-- IF S_CHAT -->
<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF -->

Later for now
EzZZY

[strahd1970 Paul]

Sniper_E.. That worked to get the Ajx Chat out of the Stat Box!! I truly appreciate your help on this!

Two big for you!

[spaceace]

here's my chat box. it's a subsilver2 based style:

[Sniper_E]

That looks pretty tight Spacecase! Did you hand pick what bbcode and smilie went in? It looks like it, it looks good!
I'd love for you to share with me how you wrote those in. I may copy you.

@ strahd1970.... That's great! Do you have your Chat layout looking tight also?

[Sniper_E]

Here is another chat layout in the 3myl_parchemin style. I like this one too.

Spoiler:

Code: Select all

<!-- IF S_USER_LOGGED_IN -->
<!-- IF S_GET_CHAT -->
   <!-- IF S_READ or S_ADD -->
      <!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}">
            <table class="tablebg" cellspacing="1" width="100%">
            <tr>
               <td class="<!-- IF chatrow.CLASS is even -->row2<!-- ELSEIF chatrow.CLASS is odd -->row1<!-- ENDIF -->" width="100%" align="left"><!-- IF U_ACP or U_MCP --> <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><img src="{T_IMAGESET_LANG_PATH}/icon_post_delete.gif" /></a> <!-- ENDIF --> <b class="postauthor">{chatrow.USERNAME_FULL}</b> « {chatrow.TIME} » &nbsp; <span class="postbody">{chatrow.MESSAGE}</span> </td>
            </tr>
            </table>
         </div>
      <!-- END chatrow -->--!--{LAST_ID}
      <!-- IF S_WHOISONLINE -->--!--
         <!-- BEGIN whoisrow -->
            <div><img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}</div>
         <!-- END whoisrow -->--!--{LAST_TIME}--!--{DELAY}--!--{LAST_POST}
      <!-- ENDIF -->
   <!-- ENDIF -->
<!-- ELSE -->
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_header.html -->
   <!-- ENDIF -->
   <script type="text/javascript">
   <!--
   var fieldname = 'chat';
   var last_time = 0;
   var xmlHttp = http_object();
   var last_id = {LAST_ID};
   var type = 'receive';
   var post_time = {TIME};
   var read_interval = 15000;
   var interval = setInterval('handle_send("read", last_id);', read_interval);

   function handle_send(mode, f)
   {
      if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
      {
         indicator_switch('on');
         type = 'receive';
         param = 'mode=' + mode;
         param += '&last_id=' + last_id;
         param += '&last_time=' + last_time;
         param += '&last_post=' + post_time;
         param += '&read_interval=' + read_interval;

         if (mode == 'add' && document.text.message.value != '')
         {
            type = 'send';
            for(var i = 0; i < f.elements.length; i++)
            {
               elem = f.elements[i];
               param += '&' + elem.name + '=' + encodeURIComponent(elem.value);
            }
            document.text.message.value = '';
         }
         else if (mode == 'delete')
         {
            type = 'delete';
            param += '&chat_id=' + f;
         }
         xmlHttp.open("POST", '{FILENAME}', true);
         xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
         xmlHttp.onreadystatechange = handle_return;
         xmlHttp.send(param);
      }
   }

   function handle_return()
   {
      if (xmlHttp.readyState == 4)
      {
         if (type != 'delete')
         {
            results = xmlHttp.responseText.split('--!--');
            if (results[1])
            {
               if (last_id == 0)
               {
                  document.getElementById(fieldname).innerHTML = results[0];
               }
               else
               {
                  document.getElementById(fieldname).innerHTML = results[0] + document.getElementById(fieldname).innerHTML;
               }
               last_id = results[1];

               if (results[2])
               {
                  document.getElementById('whois_online').innerHTML = results[2];
                  last_time = results[3];
                  if (results[4] != read_interval * 1000)
                  {
                     window.clearInterval(interval);
                     read_interval = results[4] * 1000;
                     interval = setInterval('handle_send("read", last_id);', read_interval);
                     document.getElementById('update_seconds').innerHTML = results[4];
                  }
                  post_time = results[5];
               }
            }
         }
         indicator_switch('off');
      }
   }

   function delete_post(chatid)
   {
      document.getElementById('p' + chatid).style.display = 'none';
      handle_send('delete', chatid);
   }

   function indicator_switch(mode)
   {
      if(document.getElementById("act_indicator"))
      {
         var img = document.getElementById("act_indicator");
         if(img.style.visibility == "hidden" && mode == 'on')
         {
            img.style.visibility = "visible";
         }
         else if (mode == 'off')
         {
            img.style.visibility = "hidden"
         }
      }
   }

   function http_object()
   {
      if (window.XMLHttpRequest)
      {
         return new XMLHttpRequest();
      }
      else if(window.ActiveXObject)
      {
         return new ActiveXObject("Microsoft.XMLHTTP");
      }
      else
      {
         document.getElementById('p_status').innerHTML = 'Status: Cound not create XmlHttpRequest Object.  Consider upgrading your browser.';
      }
   }
   -->
   </script>
   <style type="text/css">
   <!--
      .box
      {
         width: 100%;
         margin-left: auto;
         margin-right: auto;
      }
      .shouts {
         width: 100%;
         height:300px;
         overflow:auto;
      }
      #chat {
         width: 99%;
         text-align:left;
      }
      #message {
         width: 65%;
      }
      #whois_online{
         vertical-align:text-top;
         text-align:left;
      }
      .online_img {
         vertical-align:middle;
      }
      #act_indicator {
         visibility:hidden;
      }
   -->
   </style>
   <div class="box">
      <br />
      <table class="tablebg" cellspacing="1" width="100%">
      <tr>
         <td class="cat" width="100%" height="28" nowrap="nowrap">
         <h4>{SITENAME} {L_CHAT_EXPLAIN}</h4>
         </td>
      </tr>
      </table>
      <table class="tablebg" cellspacing="1" width="100%">
      <tr>
         <th align="center" width="85%">
      <!-- IF S_USER_LOGGED_IN -->
         <form name="text" id="text" method="post" action="javascript:void(0);" onSubmit="handle_send('add', this)" autocomplete="off">{L_MESSAGE}:
         <input type="text" tabindex="1" name="message" id="message" class="inputbox" size="28" />
         <input class="btnmain" type="submit" name="submit" value="{L_SUBMIT}" />
         </form>
      <!-- ENDIF -->
         </th>
         <th align="center" width="15%" nowrap="nowrap">
         {L_ONLINE_LIST}
         </th>
      </tr>
      <tr>
         <td class="row3" style="text-align:left;" height="220">
            <div class="shouts">
               <div id="chat">
               <!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}">
            <table class="tablebg" cellspacing="1" width="100%">
                  
                     <tr>
                        <td class="<!-- IF chatrow.CLASS is even -->row2<!-- ELSE -->row1<!-- ENDIF -->" align="left">
                     <!-- IF U_ACP or U_MCP -->
                        <a href="javascript:void({chatrow.MESSAGE_ID})" title="{L_DELETE_POST}" onClick="delete_post('{chatrow.MESSAGE_ID}')"><img src="{T_IMAGESET_LANG_PATH}/icon_post_delete.gif" /></a>
                     <!-- ENDIF -->
                        <b class="postauthor">{chatrow.USERNAME_FULL}</b> « {chatrow.TIME} » &nbsp; <span class="postbody">{chatrow.MESSAGE}</span>
                        </td>
                     </tr>
                     </table>
                  </div>
               <!-- END chatrow -->
               </div>
            </div>
         </td>
         <td class="row1" width="15%" nowrap="nowrap">
            <div class="shouts">
               <div id="whois_online">
               <!-- BEGIN whoisrow -->
                  <div>
                     <img src="{T_IMAGESET_PATH}/{whoisrow.USER_STATUS}.png" class="online_img" /> {whoisrow.USERNAME_FULL}
                  </div>
               <!-- END whoisrow -->
               </div>
            </div>
         </td>
      </tr>
      <tr>
         <td class="cat" colspan="2" width="100%" height="28">
         <div style="float: left;">&nbsp;<img src="{T_THEME_PATH}/images/icon_mini_chat.png"> <a href="http://startrekguide.com/community/viewtopic.php?p=16364#p16364"><strong>AJAX Chat</strong></a>&nbsp;&copy; 2007 <strong style="color: #7B95B2;">StarTrek</strong><strong style="color: #D98303;">Guide</strong></div><div style="float: right;"><img src="{T_IMAGESET_PATH}/act_indicator.gif" id="act_indicator" />&nbsp;&nbsp;<strong>{L_UPDATES} <span id="update_seconds"> {DELAY} </span> {L_UNIT}</strong> &nbsp;&nbsp;</div>
         </td>
      </tr>
      </table>
   </div>
<!-- IF S_CHAT -->
<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF -->