User blog:Crazy teitoku/Chat customisations

So you're probably told to read this link, or you wanted to know how do some people get fancy colours on their chat screen whilst you're stuck with a boring white background and black text screen?

You've pretty much come to the right place. This blog entry is dedicated to describing how is it possible to customise your wikia chatting experience. Mind you however, this is not (yet) a one-stop shop for all your customisation requirements. There are many more boulders to turn before it becomes full fledged.

Prerequisites
What you will need to do first off to make all these happen:


 * You will need a Wikia account and be logged into your Wikia account.
 * You will need to enable "Personal CSS and JS". For more information, read Help: Personal CSS and JS on Community Central Wikia
 * You will need to temporarily set your "Preferred editor" as "Source editor" or "Classic editor". For more information, read Choosing an editor on Community Central Wikia
 * Ideally have some knowledge in Help: Wiki markup on wikipedia or at least some HTML skills.

Basic customisation
In this section we will go over the basic chat customisation that is available once you have met all the prerequisites in the previous section.

For now I will discuss on how to load pre-made scripts which in turn does allow some minor customisation.

The first thing you will need to do is to navigate into your User page and then to a more "secret" place known as "chat.js". The easiest way to do so is something like this:

Where is where you literally put your own username and without using those pointy brackets. So for instance in my case mine would be:

Once you have navigated to that page Wikia will ask you something like, "this article does not exist, do you want to create the page or search within the wiki for this page". What you will need to do there is to create the page.

If for some reason you were asked to choose which editor to use, do not and I must reiterate do not use wikia/visual/wysiwyg editor as that will prevent the chat.js from actually functioning as intended.

Now that you're in the page creating the contents of the page, you will need to paste this in exactly as it is:

Once you have copied and pasted that, click on the publish button. Once successful, you will get something like this:

Note: After saving, you may have to bypass your browser's cache to see the changes.


 * Chrome - Windows: Hold the Ctrl key and press the F5 key. OS X: Hold both the ⌘ Cmd and ⇧ Shift keys and press the R key.
 * Safari - Hold down the ⇧ Shift key and click the Reload toolbar button.
 * Firefox - Windows: Hold the Ctrl key, and press F5. OS X: Hold the ⌘ Cmd and ⇧ Shift keys, and then press R.
 * Internet Explorer - Hold the Ctrl key, and press F5 (or click the Refresh button).

importScriptPage('ChatOptions/code.js', 'dev');

If you get something like that, then close your Chat and open it again. Sometimes the changes may not take effect immediately so you may need to wait up to 5 minutes and/or visit the same chat.js screen and bypass your browser's cache for both the page itself as well the chat page.

A successful loading of ChatOptions should have a button within the userlist that allows you to customise some of the look and feel of the chat to suit your tastes as well as loading a select few other scripts to make life easier. These are (but not restricted to):

But.. unfortunately you find that the customisation when it comes to "skinning" is limited, such as for instance when you want a dark chat theme with inversed colours. So what to do? read on to the next part where we discuss advanced customisation.

Advanced customisation
Of course the basic customisation can only go so far but if you're willing to customise your chatting experience, the sky is the limit and this blog entry can only go so far with it.

If you want to customise the looks of the chat in terms of "skinning" the best place to start is to create chat.css file. The steps are similar as creating chat.js as mentioned in the chat.js in the previous section on basic customisation with the exception of using .css extension as opposed to .js

For starters, what you may want to do is to copy a "skin" that you like to work based off. For mine, it would be User:Crazy_teitoku/chat.css. Flonnaru has a light coloured theme with mostly pink colours as well as a fancy custom background, his is accessible via User:Flonnaru/chat.css.