Chatbox Codes?

Hi @The Awakened,

You can change the chatbox title by adding the following CSS rules to your stylesheet.
Display > Colors > CSS stylesheet

Code:

a.chat-title { font-size:0 }
a.chat-title:after {
  content:"CUSTOM TITLE";
  font-size:14px;
}

Replace CUSTOM TITLE with whatever you like.

P.S.
You can also find some tutorials related to customizing the chatbox here.

To remove the @ from your chatbox use this code

Place the following in:
ACP(Admin Control Panel) > Modules >  HTML & JAVASCRIPT > Javascript codes management > Javascript Codes > Enable Javascript code management : New Script

Title: Chat @ Remover
Placement: All pages

Code:

// Redefine function!
function insertChatBox(chatbox_id, chatbox_url) {
   return insertChatBoxNew(chatbox_id, chatbox_url);
}
// Redefine function!
function insertChatBoxNew(chatbox_id, chatbox_url) {
   // Put the chat box on top of widgets!
   // $('#' + chatbox_id).parent().detach().prependTo('#wrapper');

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

   $('#frame_chatbox').load(function(){
      var oIframe = (document.getElementById("frame_chatbox").contentWindow || document.getElementById("frame_chatbox").contentDocument),
         script = oIframe.document.createElement("script");

      script.type = "text/javascript";
      script.innerHTML =
         'Chatbox.prototype.refresh = function(data) {\n' +
         '   if (data.error) {\n' +
         '      $("body").html(data.error)\n' +
         '   } else {\n' +
         '      if (this.connected && !this.archives) {\n' +
         '         $("#chatbox_footer").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("display", "block");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "visible")\n' +
         '      } else {\n' +
         '         $("#chatbox_footer").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("display", "none");\n' +
         '         $("#chatbox_messenger_form").css("visibility", "hidden")\n' +
         '      }\n' +
         '      if (this.connected) {\n' +
         '         $("#chatbox_display_archives").show();\n' +
         '         $("#chatbox_option_co").hide();\n' +
         '         $("#chatbox_option_disco, #chatbox_footer").show();\n' +
         '         $(".format-message").each(function() {\n' +
         '            var name = $(this).attr("name");\n' +
         '            var value = my_getcookie("CB_" + name);\n' +
         '            $(this).prop("checked", parseInt(value) ? true : false)\n' +
         '         });\n' +
         '         this.format();\n' +
         '         if (data.lastModified) {\n' +
         '            this.listenParams.lastModified = data.lastModified\n' +
         '         }\n' +
         '      } else {\n' +
         '         $("#chatbox_option_co").show();\n' +
         '         $("#chatbox_option_disco, #chatbox_footer").hide()\n' +
         '         $("#chatbox_display_archives").hide()\n' +
         '      }\n' +
         '      if (data.users) {\n' +
         '         this.users = [];\n' +
         '         $(".online-users, .away-users").empty();\n' +
         '         $(".member-title").hide();\n' +
         '         for (var i in data.users) {\n' +
         '            var user = data.users[i];\n' +
         '            this.users[user.id] = user;\n' +
         '            var username = "<span style=\'color:" + user.color + "\'>" + "<span class=\'chatbox-username chatbox-user-username\' data-user=\'" + user.id + "\' >" + user.username + "</span></span>";\n' +
         '            var list = user.online ? ".online-users" : ".away-users";\n' +
         '            $(list).append("<li>" + username + "</li>")\n' +
         '         }\n' +
         '         if (!$(".online-users").is(":empty")) {\n' +
         '            $(".member-title.online").show()\n' +
         '         }\n' +
         '         if (!$(".away-users").is(":empty")) {\n' +
         '            $(".member-title.away").show()\n' +
         '         }\n' +
         '      }\n' +
         '      if (data.messages) {\n' +
         '         var scroll = !this.messages || this.messages.length != data.messages.length;\n' +
         '         this.messages = data.messages;\n' +
         '         $("#chatbox").empty();\n' +
         '         if (this.messages) {\n' +
         '            var cb_content = "",\n' +
         '               message = "",\n' +
         '               html = "",\n' +
         '               msg = "";\n' +
         '            for (var j = 0, len = this.messages.length; j < len; j++) {\n' +
         '               message = this.messages[j];\n' +
         '               html = "<p class=\'chatbox_row_" + (j % 2 == 1 ? 2 : 1) + " clearfix\'><span class=\'right desc\'><span class=\'date-and-time\' title=\'" + message.date + "\'>(" + message.datetime + ")</span></span>";\n' +
         '               if (message.userId == -10) {\n' +
         '                  html += "<span class=\'msg\'><span style=\'color:" + message.msgColor + "\'><strong> " + message.msg + "</strong></span></span>"\n' +
         '               } else {\n' +
         '                  html +=\n' +
         '                     "<span class=\'user-msg\'>";\n' +
         '                        if (this.avatar) {\n' +
         '                           html += "   <span class=\'cb-avatar\'><img src=\'" + message.user.avatar + "\' /></span>";\n' +
         '                        }\n' +
         '                     html +=\n' +
         '                        "<span class=\'user\' style=\'color:" + message.user.color + "\'>" +\n' +
         '                           "<strong> " + \n' +
         '                              "<span class=\'chatbox-username chatbox-message-username\' data-user=\'" + message.userId + "\' >" + message.username + "</span>&nbsp;:&nbsp;" +\n' +
         '                           "</strong>" +\n' +
         '                           "<span class=\'msg\'>" + message.msg + "</span>" +\n' +
         '                        "</span>"\n' +
         '                     "</span>";\n' +
         '               }\n' +
         '               html += "</p>";\n' +
         '               cb_content += html;\n' +
         '            }\n' +
         '            $("#chatbox").append(cb_content);\n' +
         '            if (scroll) {\n' +
         '               $("#chatbox")[0].scrollTop = $("#chatbox").prop("scrollHeight") * 2\n' +
         '            }\n' +
         '         }\n' +
         '      }\n' +
         '   }\n' +
         '};';
      oIframe.document.getElementsByTagName("head")[0].appendChild(script);
   });
}


CSS files:

Code:

/*STAFF CHAT RANKS*/
/**ADMIN**/
.user[style="color:HTML COLOR HERE"] span:before, #chatbox_members span[style="color:HTML COLOR HERE"] span:before,
.user[style*="rgb(******)"] span:before, #chatbox_members span[style*="rgb(******)"] span:before {
  content:url(RANK ICON HERE)!important;
  margin-left:-16px !important;
  vertical-align:middle !important;
}

Text to change in CSS files:
RANK ICON HERE (The icon you wish to use inplace of the @

HTML COLOR HERE (This is the color of the Group the member is in)
To show in IE you will need to change this part of the code
add the HTML code in this site http://hex.colorrrs.com/
then get the RGB code and replace it here (******)

Save

Ape, I'm quite curious about somethin. When it comes to the CSS, How would you change it for a usergroup or just for an individual user?

Dazo wrote:Ape, I'm quite curious about somethin. When it comes to the CSS, How would you change it for a usergroup or just for an individual user?

ok lets show you using your forum colors

your Admin account on your forum has the following group color
HTML : #FF00C4
when you change this to RGB it is (255,0,196)

So the code will look like this for all your Admin's

Code:

/*STAFF CHAT RANKS*/
/**ADMIN**/
.user[style="color:#FF00C4"] span:before, #chatbox_members span[style="color:#FF00C4"] span:before,
.user[style*="rgb(255,0,196)"] span:before, #chatbox_members span[style*="rgb(255,0,196)"] span:before {
  content:url(RANK ICON HERE)!important;
  margin-left:-16px !important;
  vertical-align:middle !important;
}

your Mods HTML code is : #FF8C00
RGB code is : (255,140,0)

so the Mods code will be:

Code:


/**MODS**/
.user[style="color:#FF8C00"] span:before, #chatbox_members span[style="color:#FF8C00"] span:before,
.user[style*="rgb(255,140,0)"] span:before, #chatbox_members span[style*="rgb(255,140,0)"] span:before {
  content:url(RANK ICON HERE)!important;
  margin-left:-16px !important;
  vertical-align:middle !important;
}

That will show you how it finds your ranks for your staff.

Note that it can take a long time to run if you have lots of staff members.

I would only add the main staff like admins mods and tech staff if you have them

and where its says RANK ICON HERE you will need to add a small icon like this Hope that makes it more clear for you

APE wrote:

Dazo wrote:Ape, I'm quite curious about somethin. When it comes to the CSS, How would you change it for a usergroup or just for an individual user?

ok lets show you using your forum colors

your Admin account on your forum has the following group color
HTML : #FF00C4
when you change this to RGB it is (255,0,196)

So the code will look like this for all your Admin's

Code:

/*STAFF CHAT RANKS*/
/**ADMIN**/
.user[style="color:#FF00C4"] span:before, #chatbox_members span[style="color:#FF00C4"] span:before,
.user[style*="rgb(255,0,196)"] span:before, #chatbox_members span[style*="rgb(255,0,196)"] span:before {
  content:url(RANK ICON HERE)!important;
  margin-left:-16px !important;
  vertical-align:middle !important;
}

your Mods HTML code is : #FF8C00
RGB code is : (255,140,0)

so the Mods code will be:

Code:


/**MODS**/
.user[style="color:#FF8C00"] span:before, #chatbox_members span[style="color:#FF8C00"] span:before,
.user[style*="rgb(255,140,0)"] span:before, #chatbox_members span[style*="rgb(255,140,0)"] span:before {
  content:url(RANK ICON HERE)!important;
  margin-left:-16px !important;
  vertical-align:middle !important;
}

That will show you how it finds your ranks for your staff.

Note that it can take a long time to run if you have lots of staff members.

I would only add the main staff like admins mods and tech staff if you have them

and where its says RANK ICON HERE you will need to add a small icon like this Hope that makes it more clear for you

The reason why I asked is because I run the multi-username color coding, and I made it work in the chatbox. The CSS looks like this:

Code:

span[data-user="380"] { font-size:0 !important }
span[data-user="380"]:before {
font-size:10px;
content:"Pepcho";
color:#66FFCC;
}
span[data-user="380"]:after {
font-size:10px;
content:"ninga";
color:#FF9900;
}

What I am trying to get at is this: Will this conflict with that CSS you posted?

no it should not do give it a try just add one of the codes i gave to the top of your CSS and add the Java code in all pages if it dose then it will be easy to remove

Ape, your javascript caused the chat to show archives whenever someone joined. So its kinda buggy.
And I tried it, and I got no result.

It sounds like there is something messing about with one or more of the java codes as it's working fine in my forum and in 2 others.

you are running Phpbb3 right ?

APE wrote:It sounds like there is something messing about with one or more of the java codes as it's working fine in my forum and in 2 others.

you are running Phpbb3 right ?

Yep.