Codes to personalize your chatbox

Go down

Tutorial Codes to personalize your chatbox

Post by Shadow on February 26th 2015, 10:56 am

Codes to personalize your chatbox


Hello dear members

This tutorial provide some codes in order to personalize your chatbox. You have to set those Javascripts or HTML codes** in the management script page of your administrative panel and then add CSS codes in Administrative panel>> Display >> Colors >> CSS Stylesheet

**Possible ?archives=1 into these codes should be removed

Codes to personalize your chatbox Chat110


List of tips :





Codes to personalize your chatbox 09615110Notification sound




Code:
window.localStorage && $(window).load(function() {
 var chatbox_script = function() {
 var sounds = {
 'future': 'https://illiweb.com/fa/fdf/future.mp3',
 'hal': 'https://illiweb.com/fa/fdf/hal.mp3',
 'secret': 'https://illiweb.com/fa/fdf/secret.mp3',
 'zelda': 'https://illiweb.com/fa/fdf/zelda.mono.mp3'
 };
 var default_sound = sounds['zelda'];
 var default_freq = 'new';
 var default_when = 'once';
 var default_volume = 100;
 
 
 if(localStorage.cb_sound && !localStorage.cb_sound.indexOf('https://dl.dropboxusercontent.com/u/181621985/')) localStorage.removeItem('cb_sound');
 var a = document.createElement('audio');
 if(!a.canPlayType) return;
 a.volume = Math.min(1, Math.max(0, localStorage.cb_volume||(default_volume/100)));
 
 var origin_send = Chatbox.prototype.send;
 Chatbox.prototype.send = function(params) {
 var m = $.trim($("#message").val());
 if(m.indexOf('/sound')&&m.indexOf('/soudn'))
 return origin_send.call(this, params);
 m = $.trim(m.substr(6)).split(/\s+/,3);
 var bad_apple = false;
 switch(m[0].toLowerCase()) {
 case "":
 if(!a.src) {
 a.src = localStorage.cb_sound||default_sound;
 a.load();
 }
 a.play();
 break;
 case "all":
 case "new":
 localStorage.cb_freq = m[0]; break;
 case "always":
 case "off":
 case "on":
 case "once":
 case "never":
 localStorage.cb_when = m[0]; break;
 case "stop":
 if(!a.paused) a.pause();
 if(!a.ended && a.readyState > 0) a.currentTime = 0;
 break;
 case "pause":
 if(!a.paused) a.pause();
 break;
 case "volume":
 if(m.length>1) {
 localStorage.cb_volume = Math.min(1, Math.max(0, parseFloat(m[1].replace(',','.'))/100));
 a.volume = localStorage.cb_volume;
 break
 }
 default:
 bad_apple = true;
 };
 if(bad_apple) {
 if(m[0] in sounds) {
 m[0]= sounds[m[0]];
 }
 if(m[0]=="default") {
 m[0]=default_sound;
 localStorage.removeItem('cb_sound');
 localStorage.removeItem('cb_freq');
 localStorage.removeItem('cb_volume');
 localStorage.removeItem('cb_when');
 a.volume = Math.min(1, Math.max(0, default_volume/100));
 }
 if(/^https?:\/\/.+/.test(m[0])) {
 localStorage.cb_sound = m[0];
 a.pause();
 a.src = m[0];
 a.load();
 a.play();
 } else {
 var message = $('#message').val();
 alert('/sound [all | new]\n/sound [always | off | on | once | never]\n/sound [stop | pause]\n/sound default\n/sound volume 0-100\n/sound ['+$.map(sounds,function(_,k){return k}).join(' | ')+']\n/sound [http://* | https://*]');
 setTimeout(function(){ $("#message").val(message).select().focus(); }, 100);
 return;
 }
 }
 return $("#message").val('').focus();
 };
 
 $(window).on("focus", function(){ localStorage.removeItem('cb_once'); localStorage.removeItem('cb_blurred') }).on("blur", function(){ localStorage.cb_blurred=1; });
 
 var play_sound = function(){
 if(a.paused || a.ended) {
 if(a.readyState > 0) a.currentTime=0;
 if(!a.src) {
 a.src = localStorage.cb_sound||default_sound;
 a.load()
 }
 a.play()
 }
 };
 var overrided = Chatbox.prototype.refresh;
 Chatbox.prototype.refresh = function(data) {
 if (data.messages && data.messages.length) {
 var lm = data.messages.slice(-1)[0];
 var last_message = lm.time+','+lm.action+','+lm.msg;
 if(this.last_message_sound != last_message) {
 var user = $.grep(data.users, function(v){return v.id==chatbox.userId});
 user = user.length ? user[0] : [{}];
 if(this.last_message_sound!==undefined) {
 var freq = (localStorage.cb_freq||default_freq);
 var when = (localStorage.cb_when||default_when);
 if(when != "never" && (when != "off" || localStorage.cb_blurred) && (when != "on" || !localStorage.cb_blurred) && (when != "once" || (localStorage.cb_blurred && !localStorage.cb_once))) {
 if(freq =="all" || (lm.userId!=chatbox.userId && user.username!=lm.username)) {
 if(when!="once" || !localStorage.cb_once) {
 play_sound();
 localStorage.cb_once = 1;
 }
 }
 }
 }
 this.last_message_sound = lm;
 }
 }
 overrided.call(this, data);
 };
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });
Sounds contains a tab shortcut matching commande: url of the audio folder. It helps to easily change the sound.

After that, there is a range of variables for values by default:


  • default_sound: contains the url audio folder by default



  • default_freq: indicates on which messages we want to have a notification, different values are possible:

- "all": You will have a sound for every new messages (even my own messages)
- "new": You will only get a sound for new messages from other members


  • default_when: indicates when the notifications should appear. Various values are possible:

- "always": You want a sound whatever you are on or out the chatbox
- "on": You want a sound when you are on the chatbox
- "off": You want a sound only when you're out the chatbox
- "once": We want to have at most one notification since my last connection


  • default_volume: The notification sound level (From number 1 to 100)



There are also some additional commands:


  • /sound : starts the actual sound
  • /sound https?: //* : change the sound only for an unique url
  • /sound volume 0-100: change the sound level (0 = 0% et 100 = 100%).
  • /sound default: reset the default configuration
  • /sound [pause | stop]: pause or stop the sound in progress





Codes to personalize your chatbox 09615110Visual notifications




Codes to personalize your chatbox Visual11

The script allows you to change the tab title and icon while receiving a message on the chatbox Smile
Code:
window.localStorage && $(window).load(function() {
 var chatbox_script = function() {
 var t_icon = window.top.$.find('link[rel="shortcut icon"]')[0];
 var t_doc = window.top.document;
 var title = t_doc.title;
 var icon = t_icon.getAttribute('href');
 
 var rep_title = '!! Nouveau message !! '+title;
 var rep_icon = 'https://illiweb.com/fa/fdf/al.ico';
 
 $(window).on("focus", function(){ localStorage.cb_blurred='' }).on("blur", function(){ localStorage.cb_blurred=1; });
 var overrided = Chatbox.prototype.refresh;
 Chatbox.prototype.refresh = function(data) {
 if (data.messages && data.messages.length) {
 var lm = data.messages.slice(-1)[0];
 var last_message = lm.time+','+lm.action+','+lm.msg;
 if(this.last_message != last_message) {
 var user = $.grep(data.users, function(v){return v.id==chatbox.userId});
 user = user.length ? user[0] : [{}];
 if(this.last_message!==undefined) {
 if(lm.userId!=chatbox.userId && user.username!=lm.username) {
 if(localStorage.cb_blurred) (function(){
 var blink = function(){
 if(title == t_doc.title) {
 if(!localStorage.cb_blurred) return;
 var new_title = rep_title;
 var new_icon = rep_icon;
 } else {
 var new_title = title;
 var new_icon = icon;
 }
 t_doc.title = new_title;
 var new_t_icon = t_icon.cloneNode(true);
 new_t_icon.setAttribute('href', new_icon);
 var t_icon_parent = t_icon.parentNode;
 t_icon_parent.removeChild(t_icon);
 t_icon_parent.appendChild(new_t_icon);
 t_icon = new_t_icon;
 setTimeout(blink, 500);
 };
 blink();
 })();
 } else {
 localStorage.cb_blurred='';
 }
 }
 this.last_message = lm;
 }
 }
 overrided.call(this, data);
 };
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });




Codes to personalize your chatbox 09615110Change your chatbox title




Codes to personalize your chatbox Chat211

This script allows you to change your chatbox title:

Code:
$(window).load(function() {
 var chatbox_script = function() {
 $("a.chat-title").text("In Da Place");
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });

Change "In Da Place" allows you to change the title.




Codes to personalize your chatbox 09615110Remove the lines "...joined the chat & ... has logged off the chat"




Codes to personalize your chatbox Chat310

This script allows you to remove the ligns "joined" and "logged off":


Code:
$(window).load(function() {
 var chatbox_script = function() {
 $('#chatbox > p > .msg > span').filter('[style="color:green"],[style="color:red"]').closest('p').remove();
 var overrided = Chatbox.prototype.refresh;
 Chatbox.prototype.refresh = function(data) {
 if (data.messages && data.messages.length) {
 data.messages = $.grep(data.messages, function(v) {
 return v.userId != -10 || $.inArray(v.msgColor, ["red", "green"]) == -1;
 });
 }
 overrided.call(this, data);
 };
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });




Codes to personalize your chatbox 09615110Avatars style of the chatbox




Change avatars size via a CSS code:

Code:
#chatbox .cb-avatar, #chatbox .cb-avatar > img { width: 50px !important; height: 50px !important; }

Avatar with a rounded shape:

Code:
#chatbox .cb-avatar > img{ border-radius: 50% !important; }

The text on the same line as your username:

Code:
#chatbox .user-msg .user, #chatbox .user-msg .msg {
 display: inline;
 }

Codes to personalize your chatbox Chat410




Codes to personalize your chatbox 09615110Add avatars where they're not present





Codes to personalize your chatbox Captu126
This script allows you to add avatars in the memberlist and status messages :
Code:
$(window).load(function() {
 var chatbox_script = function() {
 
 var default_avatar = 'https://illiweb.com/fa/invision/pp-blank-thumb-38px.png';
 var ava_in_member_list = true;
 var ava_in_indirect_message = true;
 
 var avatars = {};
 var d;
 var set_avatar = function(pseudo, elem_to_prepend){
 var avatar = avatars[pseudo];
 var el = $(this);
 elem_to_prepend.find('.cb-avatar').remove();
 elem_to_prepend.prepend('<span class="cb-avatar"><img src="'+(avatar||default_avatar)+'"></span>&nbsp;');
 if(!avatar) {
 if(!d) {
 d = $.get('/memberlist?change_version=prosilver').done(function(c){
 $('.avatar-mini img', c).each(function(){
 avatars[$(this).parent().text().substr(1)]= $(this).attr('src')
 })
 })
 }
 d.done(function(){
 var avatar = avatars[pseudo];
 elem_to_prepend.find('.cb-avatar img').attr('src', avatar||default_avatar)
 })
 }
 };
 var overrided = Chatbox.prototype.refresh;
 Chatbox.prototype.refresh = function(data) {
 var next_scroll = false;
 if (data.messages && data.messages.length) {
 $.each(data.messages, function(_,m){
 if(ava_in_indirect_message)
 m.msgColor+='\' data-username=\''+$('<div/>').text(m.username).html();
 if(m.user && m.user.avatar)
 avatars[m.username] = m.user.avatar
 });
 next_scroll = !this.messages || this.messages.length != data.messages.length;
 }
 overrided.call(this, data);
 d = null;
 ava_in_member_list && $('#chatbox_members .chatbox-username').each(function(){
 set_avatar($(this).text(), $(this).parent());
 });
 ava_in_indirect_message && $('#chatbox p > .msg').wrap('<span class="user-msg indirect-user-msg" />').each(function(){
 set_avatar($(this).children().attr('data-username'), $(this).parent());
 });
 if(next_scroll) $("#chatbox")[0].scrollTop = $("#chatbox").prop('scrollHeight') * 2
 };
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });

To limit the avatar size in the memeberlist, you can add the following CSS code :
Code:
#chatbox_members .cb-avatar > img {
  height:30px;width:30px;
  vertical-align: middle;
}

To not add avatars in the memberlist, we can replace the value true of ava_in_member_list with false.

To not to add the avatar in status messages, we can replace the value true of ava_in_indirect_message with false.




Codes to personalize your chatbox 09615110Open archives in a new tab




Clicking on the Archives link opens in a new tab instead of reloading the page. It is especially useful when using other scripts ( that no longer work after clicking Archives ).

Code:
$(window).load(function() {
 var chatbox_script = function() {
 $("#chatbox_option_with_archives a").attr('target', 'ChatBox');
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });




Codes to personalize your chatbox 09615110Add a message on login




Codes to personalize your chatbox Captu127

This script adds a message on connection to the chatbox :
Code:
$(window).load(function() {
 var chatbox_script = function() {
 $('#chatbox_option_co').click(function(){
 $('#chatbox').addClass('recently-connected');
 setTimeout(function(){ $('#chatbox').removeClass('recently-connected') }, 60000)
 })
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });

in the code you can just change the 60000 ( that is the display time in milliseconds, this is equal to 60 seconds ) and the message gets displayed via the following CSS code :
Code:
#chatbox.recently-connected:after {
  font-family: "trebuchet ms", serif;
  font-size: 1.5em; line-height:1.5em; font-weight: bold; color: #8BC34A;
  box-shadow:0 0 5px #AED581; display:block; background: #F1F8E9; margin:auto;
  width:80%; margin:1.5% auto; padding:1%; white-space: pre;
  content: "Welcome to the chatbox =D \a If you are alone, place a log on the fire.";
}

In this CSS code, the message is specified by the content property, you can put the text between the quotes and add a line break by writing \a.




Codes to personalize your chatbox 09615110Change the moderator prefix :




Codes to personalize your chatbox Captu128

This script will replace or remove the @ before the name of a chatbox moderator :
Code:
$(window).load(function() {
 var chatbox_script = function() {
 var overrided = Chatbox.prototype.refresh;
 Chatbox.prototype.refresh = function(data) {
 overrided.call(this, data);
 $('.chatbox-username').each(function(){
 this.previousSibling&&$.trim(this.previousSibling.nodeValue)=="@"&&$(this.previousSibling).replaceWith('<img src="https://i.imgur.com/zICIAne.png" /> ')
 })
 };
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });

You can replace <img src="https://i.imgur.com/zICIAne.png" /> by the image of your choice or an empty string if you want it removed.




Codes to personalize your chatbox 09615110Automatic login




This script will automatically log you into the chatbox when you visit the page it's present on :
Code:
$(window).load(function() {
 var chatbox_script = function() {
 setTimeout(function(){ $('#chatbox_option_co:visible').click() }, 1000);
 };
 var s=document.createElement('script');s.text="("+chatbox_script.toString()+")();";$('object[data^="/chatbox"],iframe[src^="/chatbox"]').each(function(){try{$(this.contentDocument||this.contentWindow.document).find("#chatbox").closest("html").find("head").first().each(function(){this.appendChild(s.cloneNode(true))})}catch(a){}})
 });


Hide all formatting buttons



Codes to personalize your chatbox Chat10


Code:
#chatbox_messenger_form [for="format-underline"],#chatbox_messenger_form [for="format-strike"],#chatbox_messenger_form [for=format-bold],#chatbox_messenger_form [for=format-italic] {display:none;}  #divcolor,#divsmilies {display:none!important;}



Shadow
Shadow
Administrator
Administrator

Male Posts : 16206
Reputation : 1814
Language : French, English

Back to top Go down

Tutorial Re: Codes to personalize your chatbox

Post by APE on November 5th 2019, 8:48 pm

This Codes to personalize your chatbox Scree180 was updated as some or all of the codes was no longer working.

Anyone with problems should replace the codes with the new updated codes.
Any problems please make a thread and link this thread in your topic telling us what codes you have a problem with and a link to your forum.

Update time and date : 11.05.2019 - 19:48:51


Codes to personalize your chatbox Left1212Codes to personalize your chatbox Center11Codes to personalize your chatbox Right112
Codes to personalize your chatbox Ape_b110
Codes to personalize your chatbox Ape1010
APE
APE
Administrator
Administrator

Male Posts : 14924
Reputation : 1618
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Back to top


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