This tutorial will explain how to use custom chat Javascript/CSS.

A basic understanding of Mediawiki pages and Javascript is useful before attempting this, but by no means required.

Disclaimer - This guide cannot be held responsible for any problems you encounter if you follow this guide incorrectly. If you are unsure of how to do something, it is best to ask someone who is familiar with Javascript.

Step one

On your wiki, edit the page MediaWiki:Chat-welcome-message. You must do two things to this page. Note that if you have a wiki in a non-English language, you may want to follow instructions for non-English wikis below.

The first thing you need to do is copy-paste the following code to the end of the page:

<img style="display:none;" src="http://images.wikia.com/common/skins/common/blank.gif" onload="if (!loaded&&!$('script[src$=\'Chat.js/load.js\']').length) {var loaded = true;var b=document.createElement('script');b.setAttribute('src','http://YOURWIKI.wikia.com/index.php?title=MediaWiki:Chat.js/load.js&action=raw&ctype=text/javascript');b.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(b);}" />

And replace "YOURWIKI" with whatever wiki you are making the page on.

The second thing you need to do is replace the "$1" with the name of your wiki.

You should end up with something like the picture to the right.

For non-English wikis

Do as is explained above, however also add it to the page MediaWiki:Chat-welcome-message/lang where "lang" is the prefix for your language, like "es" for Spanish or "it" for Italian, so the page would be MediaWiki:Chat-welcome-message/es or MediaWiki:Chat-welcome-message/it respectively.

Step two

Now create the page MediaWiki:Chat.js/load.js on your wiki. Copy-paste the following code to that page.

var b=document.createElement('script');b.innerHTML='\nfunction importScript(b){var a=wgScript+"?title="+encodeURIComponent(b.replace(/ /g,"_")).replace(/%2F/ig,"/").replace(/%3A/ig,":")+"&action=raw&ctype=text/javascript";return importScriptURI(a)}\nfunction importScriptURI(a){var b=document.createElement("script");b.setAttribute("src",a);b.setAttribute("type","text/javascript");document.getElementsByTagName("head")[0].appendChild(b);return b}\nfunction importScriptPage(b,d){var a="/index.php?title="+encodeURIComponent(b.replace(/ /g,"_")).replace("%2F","/").replace("%3A",":")+"&action=raw&ctype=text/javascript";if(typeof d=="string"){if(d.indexOf("://")==-1){a="http://"+d+".wikia.com"+a}else{a=d+a}}return importScriptURI(a)}\nfunction importStylesheet(a){return importStylesheetURI(wgScript+"?action=raw&ctype=text/css&title="+encodeURIComponent(a.replace(/ /g,"_")))}\nfunction importStylesheetURI(b,d){var a=document.createElement("link");a.type="text/css";a.rel="stylesheet";a.href=b;if(d){a.media=d}document.getElementsByTagName("head")[0].appendChild(a);return a}\nfunction importStylesheetPage(b,d){var a="/index.php?title="+encodeURIComponent(b.replace(/ /g,"_")).replace("%2F","/").replace("%3A",":")+"&action=raw&ctype=text/css";if(typeof d=="string"){if(d.indexOf("://")==-1){a="http://"+d+".wikia.com"+a}else{a=d+a}}return importStylesheetURI(a)}\nfunction addOnloadHook(func) {$(func);}\n';document.getElementsByTagName('head')[0].appendChild(b);
if (wgPageName == "Special:Chat"){
importScript('MediaWiki:Chat.js');
importScript('User:'+wgUserName+'/chat.js');
importStylesheet('MediaWiki:Chat.css');
importStylesheet('User:'+wgUserName+'/chat.css');
}

Step three

Now that the setup is done, you can add your own custom Javascript and CSS to chat! In order for your changes to affect everybody, you need to add the Javascript to the page MediaWiki:Chat.js and the CSS to the page MediaWiki:Chat.css. Note that to see changes, you will need to clear your browser's cache.

If you want to make changes for yourself only, you need to add code to your /chat.css user subpage or /chat.js user subpage.

global.js/global.css

Another way of making personal changes to chat is via your global.js and global.css pages on Community Central. These also work for chat.