Help:Custom Chat Javascript/CSS


This tutorial is a brief guide on how to use custom chat JavaScript and CSS.

A basic understanding of MediaWiki pages and JavaScript is useful before attempting this. If you are unsure of how to do something, it is best to ask someone who is familiar with JavaScript - this guide is provided without guarantees.

Step one

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

First, copy the following code to the end of the page, after "Welcome to the $1 chat":

<img style="display:none;" src="" onload="if (!loaded&&!$('script[src$=\'Chat.js/load.js\']').length) {var loaded = true;var b=document.createElement('script');b.setAttribute('src','');b.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(b);}" />
Custom Chat JS 1
  • Replace "YOURWIKI" with your wikia's subdomain name (such as "community").
  • Replace the "$1" with the full name of your wikia.
  • Save the page.

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

For non-English wikis

Perform the above, but also add it to the page MediaWiki:Chat-welcome-message/lang where "lang" is the prefix for your language. For example, this is "es" for Spanish and "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 the following code to that page, and save it.

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+""+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){}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+""+a}else{a=d+a}}return importStylesheetURI(a)}\nfunction addOnloadHook(func) {$(func);}\n';document.getElementsByTagName('head')[0].appendChild(b);
if (wgPageName == "Special:Chat"){

Step three

Now you can add your own custom Javascript and CSS to chat!

In order for your changes to affect everybody, you need to add any JavaScript to the page MediaWiki:Chat.js and any CSS to the page MediaWiki:Chat.css. To see changes, you will likely 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.

Using global.js/global.css

Another way of making personal changes to chat is via your global.js and global.css pages on Community Central. Note that while global.css is loaded by default, global.js must be loaded via other scripts.

Around Wikia's network

Random Wiki