The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Chatbox Codes?

View previous topic View next topic Go down

In progress Chatbox Codes?

Post by The Awakened on September 22nd 2015, 8:02 pm

Hello!

I was wondering if there were any codes that would aid in renaming the chatbox? As in, whenever you see the 'chatbox,' instead of its default name, it would be renamed to perhaps 'The Chat Room'?

I was also wondering if there was a way to replaced the '@' in chatbox with another icon?

If anyone could help, i'd greatly appreaciate it!

Forum Link: www.fairytailonline-rp.forumotion.com

The Awakened
Forumember

Posts : 102
Reputation : 9
Language : English, Spanish, and French

http://www.fairytailhaven.forumotion.com

Back to top Go down

In progress Re: Chatbox Codes?

Post by Ange Tuteur on September 22nd 2015, 8:10 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: Chatbox Codes?

Post by APE on September 23rd 2015, 6:57 pm

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

Male Posts : 8648
Reputation : 762
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Chatbox Codes?

Post by Dazo on September 25th 2015, 3:03 am

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

Posts : 22
Reputation : 1
Language : English

http://alphaknightacademy.forumotion.com/

Back to top Go down

In progress Re: Chatbox Codes?

Post by APE on September 25th 2015, 3:32 am

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

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 Wink





APE
Manager
Manager

Male Posts : 8648
Reputation : 762
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Chatbox Codes?

Post by Dazo on September 25th 2015, 3:47 am

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

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

Dazo
New Member

Posts : 22
Reputation : 1
Language : English

http://alphaknightacademy.forumotion.com/

Back to top Go down

In progress Re: Chatbox Codes?

Post by APE on September 25th 2015, 3:58 am

no it should not do give it a try Wink 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 Wink





APE
Manager
Manager

Male Posts : 8648
Reputation : 762
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Chatbox Codes?

Post by Dazo on September 25th 2015, 4:37 am

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.

Dazo
New Member

Posts : 22
Reputation : 1
Language : English

http://alphaknightacademy.forumotion.com/

Back to top Go down

In progress Re: Chatbox Codes?

Post by APE on September 25th 2015, 8:09 pm

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

Male Posts : 8648
Reputation : 762
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

In progress Re: Chatbox Codes?

Post by Dazo on September 26th 2015, 1:44 am

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

Dazo
New Member

Posts : 22
Reputation : 1
Language : English

http://alphaknightacademy.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum