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

[Sniper_E]

You could do as David said in the index_body.html file.

Or you could put it in the chat_body.html file. Do you see where I added a <br /> in the chat code above?

Code: Select all

   <div class="box">
   <br />
   {$CA_BLOCK_START}
   <table class="tablebg" width="100%" cellspacing="{$CA_SPACING}">

Just add another <br /> at the bottom of the page like this:

Code: Select all

      </table>
   {$CA_BLOCK_END}
   <br />
   </div>

[BurnOmatic]

ok so the space thing worked like a charm , is it possible to change the online list to the right side, like it was before ?
because with the change in file , it chaned the online list to the left , and i got used to it on the right.

sorry for being such a pain in the butt

[Sniper_E]

To switch the position of the Online List and the Posts, you have to switch the <tr>code</tr> cells around line this:

Spoiler:

chat_body.html (with online list to the right)

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" style="text-align:left; border-width: 1px 1px 0 1px; border-style: solid; border-color: #407381;" 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_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: 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">
   <br />
   {$CA_BLOCK_START}
   <table class="tablebg" width="100%" cellspacing="{$CA_SPACING}">
   {$CA_CAP_START}{SITENAME} {L_CHAT_EXPLAIN}{$CA_CAP_END}
      <tr>
         <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 align="center" width="15%" nowrap="nowrap">
         {L_ONLINE_LIST}
         </th>
         </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" style="text-align:left; border-width: 1px 1px 0 1px; border-style: solid; border-color: #407381;" 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_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>
   {$CA_BLOCK_END}
   </div>
<!-- IF S_CHAT -->
<!-- INCLUDE overall_footer.html -->
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF -->

I put your extra <br /> in this copy.

FIND

Code: Select all

         <th align="center" 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>
         </th>
      <!-- ENDIF -->


REPLACE WITH

Code: Select all

         <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>
         </th>
      <!-- ENDIF -->
         <th align="center" width="15%" nowrap="nowrap">
         {L_ONLINE_LIST}
         </th>


FIND, HIGHLIGHT and CUT

Code: Select all

         <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>


PASTE IN CUT AFTER

Code: Select all

               <!-- END chatrow -->
               </div>
            </div>
         </td>

[BurnOmatic]

lol sorry i think you miss understood me, what i meant was the actual list where the usernames are on the shoubox, originally all the names were on the right and now they are on the left, so what i wanted to change back was that , just so the names apear on the shoutbox on the right like they were originally.

[Sniper_E]

Just wanted to say that if anyone needs help customizing the AJAX Chat 2.0.0 Beta Layout I would be more than happy to help you out with this as I am very good with Photoshop CS3.

Hey Brandon, every Great MOD should have their own icon. I made this icon_mini_chat.png awhile back, but this AJAX Chat could use a better looking icon.
We should get some fresh choices up for Handyman to choose from.

@ BurnOmatic.... Oh shoot, I see what I did. I put the titles on the bottom. Hang on, I'll correct that for you real quick. Silly me.

OK BurnOmatic.... My post above is updated with the correct codes and steps to put the Online List on the right.

[BurnOmatic]

how can i change the little blue lines in between the posts the default color?

[Sniper_E]

It would be in your theme/stylesheet.css file under the .tablebg class.

The border color around your posts is the same border color around your forums.

Code: Select all

.tablebg {
   border: solid 1px #000;
   background: #313131 url(images/cell.gif) top left repeat-x;
}

You see it has a blue background color chosen and the cell.gif background image.

The blue space you see between your posts in the viewforum_body.html page is the .spacer class.

Code: Select all

.spacer {
   background: #4A6786 url(images/th.gif) top left repeat-x;
}

You could replace any of those images above and the color would change for you.
Or you could take the images out and put in whatever solid color you wanted.
But the gradiant images are nicer for a background, now matter how thin it is.

If I were you, I'd go grab a th.gif image from one of his other color choices of this acidtech style.
And I'd grab a cell.gif from one of his other color schemes and put together what you like the look of the best for your site.

Please, show us your AJAX Chat page when you get it looking the way you like it.

[BurnOmatic]

no i mean the little blue lines in the shoutbox posts if you wanna take a look here is my address

Spoiler:

www.ear-candy.org

or like in this image where the red arrow is pointing

[Sniper_E]

Look at the <table lines in the top and down in the bottom. Change the border-color: #407381; to border-color: #4687C3; or whatever color you want.

Look for this line in both places.

Code: Select all

            <table class="tablebg" style="text-align:left; border-width: 1px; border-style: solid; border-color: #407381;" cellpadding="6" cellspacing="0" width="100%">

But BurnOmatic, for your acidtech style you should change both of those table lines to this:

Code: Select all

            <table class="tablebg" cellpadding="6" cellspacing="0" width="100%">

It looks like you're going to have a nice looking chat. Let's see your finished product when you're done.

[BurnOmatic]

thanks for all your hard work sniper

and the finished product