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

[Sniper_E]

AJAX Chat 2.0.0 Beta Style Layout Help

The AJAX Chat is STG's most popular MOD and we want it to look the best on your page as possible.
Any questions on accomplishing your style layout preferences on your site will be supported here.
We have many style authors on site that can help you with all your questions.

Who's first?

And while you're here, please show us how cool your AJAX Chat page looks on your site.

This is one X-Treme looking AJAX Chat Center page. I like the look of this subsilver2 type chat!

[BurnOmatic]

ok i seen this shoutbox on another site, and the top of the chat corners look like the rest of the forum, ie..



how come on mine , they look squared and not roundish like this other example?


i would love it if i could do that with mine , and also how do i put that space between the forum and the shoutbox so they are spaced a little ?


thanks guys, love the shoutbox

[Sniper_E]

That looks like a subsilver2 type style.
It looks like your '~Ear-Candy~ Chat' is setting in your <th>~Ear-Candy~ Chat</th> cell.
That line needs to be written the way your '~*Management News*~' line is written.

[BurnOmatic]

and which file would that be in so i can look for it and change it and what do i need to do to change it like the other one ?

[Sniper_E]

This is a style layout issue.
You need to look in your forumlist_body.html file to see how those line in the section '~*Management News*~' is in.
Then go into the chat_body.html file and write it the same way as your other one is written.
If you look at the code from the top of your forumlist_body.html file around this area: (subsilver2 version)

Code: Select all

<table class="tablebg" cellspacing="1" width="100%">
<tr>
   <td class="cat" colspan="5" align="{S_CONTENT_FLOW_END}"><!-- IF not S_IS_BOT and U_MARK_FORUMS --><a class="nav" href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a><!-- ENDIF -->&nbsp;</td>
</tr>
<tr>
   <th colspan="2">&nbsp;{L_FORUM}&nbsp;</th>
   <th width="50">&nbsp;{L_TOPICS}&nbsp;</th>
   <th width="50">&nbsp;{L_POSTS}&nbsp;</th>
   <th>&nbsp;{L_LAST_POST}&nbsp;</th>
</tr>
<!-- BEGIN forumrow -->

The fist section inside the first set of <tr>code</tr> of your codes will have to written in the chat_body.html file to match.
If you have problems post your code here and I'll show you how.

[BurnOmatic]

these are the codes from my acidtech style folder ie... /public_html/styles/acidtechphpbb3/template/
please let me know if i picked the wrong ones

forumlist_body.html

Spoiler:

Code: Select all

<!-- DEFINE $CA_FORUMLIST = '1' -->
<!-- BEGIN forumrow -->
   <!-- IF (forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW) or forumrow.S_NO_CAT -->
      </table>
      {$CA_BLOCK_END}
      <br />
   <!-- ENDIF -->

   <!-- IF forumrow.S_IS_CAT or forumrow.S_FIRST_ROW or forumrow.S_NO_CAT -->
       {$CA_BLOCK_START}
      <table class="tablebg" cellspacing="{$CA_SPACING}" width="100%">
      {$CA_CAP_START}<!-- IF forumrow.S_IS_CAT --><h4><a href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a></h4><!-- ELSE -->{L_FORUM}<!-- ENDIF -->{$CA_CAP_END}
      <tr>
         <th colspan="2">&nbsp;{L_FORUM}&nbsp;</th>
         <th width="50">&nbsp;{L_TOPICS}&nbsp;</th>
         <th width="50">&nbsp;{L_POSTS}&nbsp;</th>
         <th width="175">&nbsp;{L_LAST_POST}&nbsp;</th>
      </tr>
   <!-- ENDIF -->
   
   <!-- IF not forumrow.S_IS_CAT -->
      <!-- IF forumrow.S_IS_LINK -->
         <tr>
            <td class="row1" width="31" align="center">{forumrow.FORUM_FOLDER_IMG}</td>
            <td class="row1">
               <!-- IF forumrow.FORUM_IMAGE -->
                  <table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td align="middle" style="padding-{S_CONTENT_FLOW_END}: 5px;">{forumrow.FORUM_IMAGE}</td><td width="100%" valign="middle">
               <!-- ENDIF -->
               <a class="forumlink" href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a>
               <p class="forumdesc">{forumrow.FORUM_DESC}</p>
               <!-- IF forumrow.FORUM_IMAGE --></td></tr></table><!-- ENDIF -->
            </td>
            <!-- IF forumrow.CLICKS -->
               <td class="row2" colspan="3" align="center"><span class="genmed">{L_REDIRECTS}: {forumrow.CLICKS}</span></td>
            <!-- ELSE -->
               <td class="row2" colspan="3" align="center">&nbsp;</td>
            <!-- ENDIF -->
         </tr>
      <!-- ELSE -->
      <tr>
         <td class="row1" width="31" align="center">{forumrow.FORUM_FOLDER_IMG}</td>
         <td class="row1">
            <!-- IF forumrow.FORUM_IMAGE -->
               <table border="0" cellspacing="0" cellpadding="0" width="100%"><tr><td align="middle" style="padding-{S_CONTENT_FLOW_END}: 5px;">{forumrow.FORUM_IMAGE}</td><td width="100%" valign="middle">
            <!-- ENDIF -->
            <a class="forumlink<!-- IF forumrow.S_UNREAD_FORUM --> link-new<!-- ENDIF -->" href="{forumrow.U_VIEWFORUM}">{forumrow.FORUM_NAME}</a>
            <p class="forumdesc">{forumrow.FORUM_DESC}</p>
            <!-- IF forumrow.MODERATORS -->
               <p class="forumdesc"><strong>{forumrow.L_MODERATOR_STR}:</strong> {forumrow.MODERATORS}</p>
            <!-- ENDIF -->
            <!-- IF forumrow.SUBFORUMS and forumrow.S_LIST_SUBFORUMS -->
               <p class="forumdesc"><strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</p>
            <!-- ENDIF -->
            <!-- IF forumrow.FORUM_IMAGE --></td></tr></table><!-- ENDIF -->
         </td>
         <td class="row2" align="center"><p class="topicdetails">{forumrow.TOPICS}</p></td>
         <td class="row2" align="center"><p class="topicdetails">{forumrow.POSTS}</p></td>
         <td class="row2" align="center" nowrap="nowrap">
            <!-- IF forumrow.LAST_POST_TIME -->
               <p class="topicdetails">{forumrow.LAST_POST_TIME}</p>
               <p class="topicdetails">{forumrow.LAST_POSTER_FULL}
                  <a href="{forumrow.U_LAST_POST}">{LAST_POST_IMG}</a>
               </p>
            <!-- ELSE -->
               <p class="topicdetails">{L_NO_POSTS}</p>
            <!-- ENDIF -->
         </td>
      </tr>
      <!-- ENDIF -->
   <!-- ENDIF -->
   <!-- IF forumrow.S_LAST_ROW -->
      <!-- IF not S_IS_BOT and U_MARK_FORUMS -->
      <tr>
         <td colspan="5" class="cat" align="center">
            <a href="{U_MARK_FORUMS}">{L_MARK_FORUMS_READ}</a>
         </td>
      </tr>
      <!-- ENDIF -->
      </table>
      {$CA_BLOCK_END}
   <!-- ENDIF -->
<!-- BEGINELSE -->
<table class="tablebg" cellspacing="{$CA_SPACING}" width="100%">
{$CA_CAP_START}{L_MESSAGE}{$CA_CAP_END}
<tr>
   <td class="row1" colspan="5" align="center" style="padding: 25px 5px;"><p class="gensmall">{L_NO_FORUMS}</p></td>
</tr>
</table>
<!-- END forumrow -->

chat_body.html

Spoiler:

Code: Select all

<!-- IF S_GET_CHAT -->
   <!-- IF S_READ or S_ADD -->
      <!-- BEGIN chatrow -->
         <div id="p{chatrow.MESSAGE_ID}">
            <table class="tablebg" cellpadding="6" cellspacing="0" width="100%">
               <tr class="row{chatrow.CLASS}">
                  <td>
                     <!-- 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">
      <table class="tablebg" cellspacing="1" width="100%">
            <tr>
               <th align="center" colspan="2">{SITENAME} {L_CHAT}</th>
            </tr>
         <!-- IF S_USER_LOGGED_IN -->
            <tr>
               <td align="center" class="cat nav" width="85%">
                  <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="button1" type="submit" name="submit" value="{L_SUBMIT}" />
                  </form>
               </td>
               <td align="center" class="cat nav" width="15%">{L_ONLINE_LIST}</td>
         <!-- ENDIF -->
         <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" cellpadding="6" cellspacing="0" width="100%">
                              <tr class="row{chatrow.CLASS}">
                                 <td>
                                    <!-- 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" 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" align="center">
               {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>
            </td>
         </tr>
      </table>
   </div>
   <!-- IF S_CHAT -->
      <!-- INCLUDE overall_footer.html -->
   <!-- ENDIF -->
<!-- ENDIF -->

[Sniper_E]

Wow, you have some fancy stuff going on in that style. See if this will work for you.

OPEN chat_body.html

FIND

Code: Select all

   <div class="box">
      <table class="tablebg" cellspacing="1" width="100%">
            <tr>
               <th align="center" colspan="2">{SITENAME} {L_CHAT}</th>
            </tr>

REPLACE WITH

Code: Select all

   <div class="box">
       {$CA_BLOCK_START}
      <table class="tablebg" cellspacing="{$CA_SPACING}" width="100%">
      {$CA_CAP_START}<h4>{SITENAME} {L_CHAT}</h4>{$CA_CAP_END}

FIND

Code: Select all

   </div>
   <!-- IF S_CHAT -->

BEFORE ADD

Code: Select all

      {$CA_BLOCK_END}

See if that lays out like your style does. (make backups first)

[BurnOmatic]

nope didn't work at all , matter of fact it took away the whole board, lol and took away the admin link at the bottom of the page, lucky for me i could backup the page, basically it wouldn't let me refresh the styles so it would only show me the board index link at the top of the forum, that was it , even if i clicked it it wouldn't take me back to the forum..

[Sniper_E]

Then you need to go back to the style author for directions. I've never seen a page written in such a manner.
Or just keep what you have.

Next?

[Brandon05 Brandon Kaylor]

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.