PHPBB3 Chatbox placement

Hello all, I was wondering if since now we can edit templates on phpbb3 can i do what i did on phpbb2, original post is here https://help.forumotion.com/t132863-chatbox-and-widget-placement#893100

Thanks in advance for the help!

Hello FrOsTyXi,
Now that template editing is now available in PhpBB3 then you should be able to do what you did with PhpBB2. However, some codes might be a bit different but you can try using the same codes and then work from there if any sort of error occurs.

Hope this answers your question.
-James

thanks you for the reply but i tried searching the code in the template and didnt find a thing i'm going to tinker with it abit to see if there is any change thanks you


Edit nope no good lol hope someone can assist me with this *)

Hello FrOsTyXi,

Make sure the default chat is activated, but the display is set to none. Next go to Administration Panel > Display > Templates > General > overall_header

Add this :

Code:

<br/>
<div id="chatTable" class="panel row3">
  <div class="inner">
    <span class="corners-top"><span></span></span>
    <div id="cp-main" class="ucp-main"><br/>
      <div class="panel">
        <div class="inner">
          <span class="corners-top"><span></span></span>
          <iframe id="chatFrame" src="/chatbox" style="border:none;width:100%;height:350px;"></iframe>
          <span class="corners-bottom"><span></span></span>
        </div>
      </div><br/>
    </div>
    <span class="corners-bottom"><span></span></span>
  </div>
</div>
<br/>

after :

Code:

<div id="page-body">

save and publish

then open the index_body

Find :

Code:

<!-- BEGIN message_admin_index -->
 <div class="panel introduction">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 <span class="corners-bottom"><span></span></span></div>
 </div>
<!-- END message_admin_index -->

Replace by :

Code:

<!-- BEGIN message_admin_index -->
 <div id="homeMessage" class="panel introduction">
 <div class="inner"><span class="corners-top"><span></span></span>
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 <span class="corners-bottom"><span></span></span></div>
 </div>
<script type="text/javascript">
(function() {
  var a = document.getElementById('chatTable'), b = document.getElementById('homeMessage');
  a.style.display = '';
  a.parentNode.insertBefore(b,a);
})();
</script>
<!-- END message_admin_index -->

Save and publish

Thank you that worked good for moving to the location i wanted but sadly didnt work out well with JScript's avatar and message edit/delete functions.

Could you post the code you're using ?

Thanks

Code:

/**************************************************************************
 * Module: AVATARChat + JS_EditMsgChat
 * Description: Need?!
 * Author: Made and Optimizations by JScript - 2014/11/23
 * Version: RC2 (Release candidate 2!)
 ***************************************************************************/
function insertChatBox(chatbox_id, chatbox_url) {
    return insertChatBoxNew(chatbox_id, chatbox_url);
}
// Redefine function in frm_lang_xx.js, by JScript Brasil at live dot com!
function insertChatBoxNew(chatbox_id, chatbox_url) {
    document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
    frames["frame_chatbox"].onload = function() {
        // Redefine function in chatbox7.js, by JScript Brasil at live dot com!
        var JS_search = {
                //inVar: /">\[(?:(?:2[0-3]|[0-1][0-9]|[0-9]):[0-5][0-9]:[0-5][0-9])\]<\/span>&nbsp;<span class=\\"user-msg\\">(.+)&Iota;id=(.*?)&Alpha;<(.*?)>&Epsilon;<img (.*?)&Chi;<img (.*?)>&Tau;(.+)&Mu;(.*?)<\/span>/g,
                //inHtml: /">\[(?:(?:2[0-3]|[0-1][0-9]|[0-9]):[0-5][0-9]:[0-5][0-9])\]<\/span>&nbsp;<span class=\\"user-msg\\">(.+)[\u0399]id=(.*?)[\u0391]<(.*?)>[\u0395]<img (.*?)[\u03a7]<img (.*?)>[\u039c](.*?)<\/span>/g
                inVar: /&Iota;id=(.*?)&Alpha;<(.*?)>&Epsilon;<img (.*?)&Chi;<img (.*?)>&Mu;(.*?)<\/span>/g,
                inHtml: /[\u0399]id=(.*?)[\u0391]<(.*?)>[\u0395]<img (.*?)[\u03a7]<img (.*?)>[\u039c](.*?)<\/span>/g
            },
            // JS_replace = '">[$6]$1<span class=\"id\" id=$2><span class=\"js-avatar\"><$3></span><span class=\"editor\"><img onclick=\"editor(this, 1)\" $4<img onclick=\"editor(this, 2)\" $5></span><span class=\"text\">$7</span>',
            JS_replace = '<span class=\"id\" id=$1><span class=\"js-avatar\"><$2></span><span class=\"editor\"><img onclick=\"editor(this, 1)\" $3<img onclick=\"editor(this, 2)\" $4></span><span class=\"text\">$5</span>',
            oIframe = (document.getElementById("frame_chatbox").contentWindow || document.getElementById("frame_chatbox").contentDocument),
            script = oIframe.document.createElement("script"),
            memDiv = oIframe.document.createElement('div');
        script.type = "text/javascript";
        script.innerHTML =
            'USERNAME = parent._userdata.username;' +
            'SUPERMOD = parent._userdata.user_level;' +
            'AVATAR = parent._userdata.avatar.replace(\'<img src="\', "[img]").replace(\'" alt="" />\', "[/img]");' +
            'JS_search = ' + JS_search.inVar + ';' +
            'JS_replace = \'' + JS_replace + '\';' +
            'function submitmsg(params) {' +
            '  if (document.post.message.value.length < 4 && SUPERMOD !== 1) return false;' +
            '  if (document.post.message.value.indexOf("/") !== 0) {' +
            '      var date = new Date();' +
            '      var UID = Math.ceil(date.getDate() + date.getHours() + Math.random() * Math.pow(10, 10) + date.getMinutes() + date.getSeconds() + date.getMilliseconds());' +
            '      if (UID.length < 10) {' +
            '        UID + "" + (10 - UID.length);' +
            '      }' +
            //'      var time = new Date().toLocaleTimeString();' +
            //'      document.post.message.value = \'&Iota;id="\' + UID + \'"&Alpha;\' + AVATAR + "&Epsilon;[img]http://goo.gl/brvCui[/img]&Chi;[img]http://goo.gl/k8FZx5[/img]&Tau;" + time + "&Mu;" + document.post.message.value;' +
            '      document.post.message.value = \'&Iota;id="\' + UID + \'"&Alpha;\' + AVATAR + "&Epsilon;[img]http://goo.gl/brvCui[/img]&Chi;[img]http://goo.gl/k8FZx5[/img]&Mu;" + document.post.message.value;' +
            '    }' +
            '  document.post.sent.value = document.post.message.value;' +
            '  document.post.message.value = "";' +
            '  document.post.message.focus();' +
            '  ajax_submit_chatbox(params);' +
            '  return false' +
            '}' +
            'function copy_user_name(user_name) {' +
            '  if (document.post.message) {' +
            '      document.post.message.focus();' +
            '      document.post.message.value += ((user_name.indexOf("@") == 0) ? "" : "@") + user_name + " -> ";' +
            '  }' +
            '    return false' +
            '}' +
            'function ajax_submit_chatbox(params, editor) {' +
            '  number_of_refresh = 0;' +
            '  if (params == "" || params == undefined) {' +
            '      params = "?achives=0"' +
            '  }' +
            '  if (editor == "" || editor == undefined) {' +
            '      var msg_sent = document.post.sent.value;' +
            '  } else {' +
            '      var msg_sent = editor;' +
            '  }' +
            '  var data = "&mode=send";' +
            '  data += "&sent=" + encodeURIComponent(msg_sent);' +
            '  data += "&sbold=" + document.post.sbold.value;' +
            '  data += "&sitalic=" + document.post.sitalic.value;' +
            '  data += "&sunderline=" + document.post.sunderline.value;' +
            '  data += "&sstrike=" + document.post.sstrike.value;' +
            '  data += "&scolor=" + document.post.scolor.value;' +
            '  if ((msg_sent.indexOf("/away") == 0) || (msg_sent.indexOf("/abs") == 0)) {' +
            '      document.getElementById("refresh_auto").checked = false' +
            '  }' +
            '  if (document.post.sent.value == "/banlist") {' +
            '      window.open("/chatbox/chatbox_banlist.forum" + params, "banlist", "toolbar=no,menubar=no,personalbar=no,width=450,height=300,scrollbars=yes,resizable=yes");' +
            '      return false' +
            '  }' +
            '  $.ajax({' +
            '      url: "/chatbox/chatbox_actions.forum" + params,' +
            '      type: "post",' +
            '      data: data,' +
            '      dataType: "script",' +
            '      success: function(response, status, xhr) {' +
            '        if (xhr.status == 200) {' +
            //'            if (typeof (chatbox_messages) !== "undefined") {' +
            '              chatbox_messages = chatbox_messages.replace(JS_search, JS_replace);' +
            '                document.getElementById("memdiv").innerHTML = chatbox_messages;' +
            '                  hackMsg();' +
            '              document.getElementById("chatbox").innerHTML = document.getElementById("memdiv").innerHTML;' +
            '              /*$("#chatbox").html(chatbox_messages) [0].scrollTop = $("#chatbox").prop("scrollHeight");*/' +
            '              document.getElementById("chatbox").scrollTop = 999999;' +
            //'            }' +
            '            if (typeof (chatbox_memberlist) !== "undefined") {' +
            '              document.getElementById("chatbox_members").innerHTML = chatbox_memberlist;' +
            '              /*$("#chatbox_members").html(chatbox_memberlist);*/' +
            '            }' +
            '        }' +
            '      },' +
            '  })' +
            '}' +
            'function ajax_refresh_chatbox(params, force) {' +
            '  if (params == "" || params == undefined) {' +
            '      params = "?achives=0"' +
            '  }' +
            '  $.ajax({' +
            '      url: "/chatbox/chatbox_actions.forum" + params + "&mode=refresh",' +
            '      type: "get",' +
            '      dataType: "script",' +
            '      success: function(response, status, xhr) {' +
            '        if (xhr.status == 200) {' + // || force) {' + <- Fail!
            //'              if ($("#chatbox").length) {' +
            '            if (typeof (chatbox_messages) !== "undefined") {' +
            '              chatbox_messages = chatbox_messages.replace(JS_search, JS_replace);' +
            '                document.getElementById("memdiv").innerHTML = chatbox_messages;' +
            '                  hackMsg();' +
            '              document.getElementById("chatbox").innerHTML = document.getElementById("memdiv").innerHTML;' +
            '              document.getElementById("chatbox").scrollTop = document.getElementById("chatbox").scrollHeight + document.getElementById("chatbox").offsetHeight;' +
            '              document.getElementById("chatbox").scrollTop = 999999;' +
            '              }' +
            //'              if (document.getElementById("chatbox_members").innerHTML != null) document.getElementById("chatbox_members").innerHTML = chatbox_memberlist;' +
            '            if (typeof (chatbox_memberlist) !== "undefined") {' +
            '              document.getElementById("chatbox_members").innerHTML = chatbox_memberlist;' +
            '              /*$("#chatbox_members").html(chatbox_memberlist);*/' +
            '            }' +
            '        }' +
            '      },' +
            '  })' +
            '}' +
            'function hackMsg() {' +
            '  var oTarget = jQuery("#memdiv > p"),' +
            '      iLen = oTarget.length,' +
            '      index = 0;' +
            '  for (; index < iLen; index++) {' +
            '      var oThis = jQuery(oTarget[index]),' +
            '        sUserName = oThis.find(".user > a").text(),' +
            '        ID = oThis.find("span.id");' +
            '      if (ID.length == 0) {' +
            '        ID = oThis.find(".msg:last").text();' +
            // XORcipher -> '        ID = XORcipher(oThis.find(".msg").text());' +
            '        var del = ID.match(/^\\/remove[\\u0399](.*?)$/);' +
            // XORcipher -> '        var del = ID.match(/^\\/remove&Iota;(.*?)$/);' +
            '        if (del !== null) {' +
            '            var oMsg = oThis.parent().find("#" + del[1]).closest("p");' +
            '            if (oMsg.length) {' +
            //'              if (oMsg.find(".user > a").text() == sUserName || SUPERMOD > 0) {' +
            '                  oMsg.remove();' +
            //'              }' +
            '            }' +
            '        }' +
            '          var edit = ID.match(/^\\/edit[\\u0399]([0-9]+)[\\u039c](.*?)$/);' +
            // XORcipher -> '              var edit = ID.match(/^\\/edit&Iota;([0-9]+)&Mu;(.*?)$/);' +
            '          if (edit !== null) {' +
            '            var oMsg = oThis.parent().find("#" + edit[1]);' +
            '            if (oMsg.length) {' +
            //'              if (oMsg.closest("p").find(".user > a").text() == sUserName || SUPERMOD > 0) {' +
            '                  oMsg.find("span.text").text(edit[2]);' +
            //'              }' +
            '            }' +
            '              }' +
            '              /*var nudge = ID.match(/^\\/nudge[\\u0399]([0-9]+)[\\u039d](.*?)$/);' +
            '              if (nudge !== null) {' +
            '            var oMsg = oThis.parent().find("#" + nudge[1]);' +
            '            if (oMsg.length) {' +
            '              if (nudge[2] == USERNAME) {' +
            '                  // Developing!;' +
            '              }' +
            '            }' +
            '          }*/' +
            '        oThis.remove();' +
            '      } else {' +
            '        if (sUserName !== USERNAME && SUPERMOD == 0) {' +
            '            ID.find(".editor").remove();' +
            '        }' +
            '      }' +
            '  }' +
            '}' +
            'function editor(oThis, num) {' +
            '  if (num == 1 && iConfirm("Are you sure you want to remove this message?\\n\\n" + jQuery(oThis).closest(".id").text() ) == 1) {' +
            '      ajax_submit_chatbox("?achives=1", "/remove&Iota;" + jQuery(oThis).closest(".id").attr("id"));' +
            '      jQuery(oThis).closest("p").remove();' +
            '  } else if (num == 2) {' +
            '      var result = prompt("Editing the message:", jQuery(oThis).closest(".id").text());' +
            '      if (result != null) {' +
            '        ajax_submit_chatbox("?achives=1", "/edit&Iota;" + jQuery(oThis).closest(".id").attr("id") + "&Mu;" + result);' +
            '        jQuery(oThis).closest(".id span.text").text(result);' +
            '      }' +
            '  /*} else if (num == 3) {' +
            '      ajax_submit_chatbox("?achives=1", XORcipher("/nudge&Iota;" + jQuery(oThis).closest(".id").attr("id") + "&Nu;" + jQuery(oThis).closest("p").find(".user > a").text()));*/' +
            '  }' +
            '}' +
            /*'function XORcipher(sText) {' +
        '  var key = 2,' +
        '      result = "",' +
        '      len = sText.length,' +
        '      i = 0;' +
        '  for (; i < len; i++) {' +
        '      result += String.fromCharCode(key ^ sText.charCodeAt(i));' +
        '  }' +
        '  return result;' +
        '}' +*/
            'function iConfirm(text) {' +
            '  var iChoice = -1;' +
            '  if (confirm(text) == true) {' +
            '      iChoice = 1;' +
            '  } else {' +
            '      iChoice = 0;' +
            '  }' +
            '  return iChoice;' +
            '}';
        oIframe.document.getElementsByTagName("head")[0].appendChild(script);
        var style = oIframe.document.createElement("style");
      style.type = "text/css";
        style.innerHTML =
            '#chatbox p {' +
            '  background: none repeat scroll 0 0 #fff;' +
            '  border-bottom: 1px solid #e3e3e3;' +
            '  line-height: 1.3em;' +
            '  padding: 5px;' +
            '}' +
            '#chatbox span[title] {' +
            '  color: #8f8f8f !important;' +
            '  float: right !important;' +
            '}' +
            '#chatbox .user:not(:empty) {' +
            '  font-weight: 700;' +
            '  margin-left: 36px !important;' +
            '}' +
            '#chatbox .id {' +
            '  display: block;' +
            '  margin-top: 3px;' +
            '}' +
            '#chatbox .js-avatar img {' +
            '  background: none repeat scroll 0 0 #fff;' +
            '  border: 1px solid #ddd;' +
            '  float: left;' +
            '  height: 30px;' +
            '  margin-right: 5px;' +
            '  margin-top: -19px;' +
            '  max-width: 30px;' +
            '  padding: 1px;' +
            '  vertical-align: middle;' +
            '  width: 30px;' +
            '}' +
            '#chatbox .editor img {' +
            '  cursor: pointer;' +
            '  float: right;' +
            '  padding-left: 4px;' +
            '}' +
            '#chatbox {' +
            '  display: none;' +
            '}';
        oIframe.document.getElementsByTagName("head")[0].appendChild(style);
        var forceConnect = setInterval(function() {
            if (oIframe.document.getElementById("chatbox") !== null) {
                clearInterval(forceConnect);
                memDiv.id = 'memdiv';
                oIframe.document.getElementsByTagName('body')[0].appendChild(memDiv);
                oIframe.document.getElementById("memdiv").style.display = 'none';
                oIframe.document.getElementById("memdiv").innerHTML = oIframe.document.getElementById("chatbox").innerHTML.replace(JS_search.inHtml, JS_replace);
                oIframe.hackMsg();
                oIframe.document.getElementById("chatbox").innerHTML = oIframe.document.getElementById("memdiv").innerHTML;
                if (oIframe.document.getElementById('chatbox_option_disco').style.display == 'none') {
                    oIframe.CB_disconnect();
                }
                oIframe.document.getElementById("chatbox_option_with_archives").style.display = 'none';
                oIframe.document.getElementById("chatbox_option_without_archives").style.display = 'none';
                oIframe.document.getElementById("chatbox").style.display = 'block';
            }
        }, 250);
    };
}

In home page only

Code:

#chatbox {
  display: none;
}

Thats the CSS dont think that matters.

edit your overall_header again, but replace this :

Code:

<iframe id="chatFrame" src="/chatbox" style="border:none;width:100%;height:350px;"></iframe>

by this :

Code:

<iframe id="frame_chatbox" src="/chatbox" style="border:none;width:100%;height:350px;"></iframe>

That was closer but i think due to the display none CSS i posted up there nothing is in the chatbox and when i remove the CSS code the chat is all haywire lol huge avatars text is all over weird

/clear your chatbox and place the css back then refresh the page with the chatbox

@FrOsTyXi
Hello!

First: Undo all changes that have been recommended here!

In my code, search for:

Code:

document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';

Copy and paste the code below:

Code:

$('#' + chatbox_id).parent().detach().prependTo('#wrapper');

It should look like this:

Code:


 document.getElementById(chatbox_id).innerHTML = '<iframe src="/chatbox/index.forum?archives=1" id="frame_chatbox" scrolling="no" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0"></iframe>';
 $('#' + chatbox_id).parent().detach().prependTo('#wrapper');


So you have the ChatBox on top of the widgets!

Result: https://i.imgur.com/xCyO6F9.png

JS

Thanks you for all the help with this all is working! real happy about this chatbox thanks again!!

Nice work fellas,

Topic solved and archived.