Community Central


Customizing Your Wiki

Yuzura January 30, 2013 User blog:Yuzura

Hello! I am Yuzura, administrator and bureaucrat on Rhythm Heaven Wiki. I made this blog for people who are new to founding their own wikis on Wikia, or are an admin on a wiki and want to help it out. Wanting to fully customize your wiki with enhancements and themes? If so, this is a fully-written blog to help you!

Adding a theme

Theme designer - theme tab

A great place to start in customizing your wiki's theme is to go to the Special:ThemeDesigner page on your wiki. Here, you can pick a default wiki theme (which are personally not recommended), add a background color and background image to the wiki, customize the color of buttons, links, and the Wikia's global navigation header, and add a wordmark and favicon.

Background color

In the second tab (second to the top) in the Theme Designer page, you can add a background and customize colors. I strongly recommend that you do not use this to add a background image (besides the default options). Later in this guide, I will tell you how to add an image. You can select a background color (under "color") which is what the background will look like while the background loads, assuming you do not use one of the default backgrounds the the right of this, or if you do not use a background or have the image not repeat. If you click the box, it will bring up an input box and several colors. You can either click one of those colors or insert a color or hex.


If you do not want to use a background image, here, you can choose a default background style (under "graphic"). This is a simplified way to customize the wiki's background. You can easily select one of these by clicking it.

On top of being able to choose a default image backgrounds/graphics, you can also tile or fix the image. If you tile it, the image will repeat left to right and up and down. If you fix it, the background will stay in the same position as you scroll down. If you do not have it fixed, once you scroll down, you will either see another tile of the image (if it is set to tile) or it will appear as the color of your background.[see above]


After the background-related part of this tab, you can add a color to the buttons (under "buttons"). This can be any color you please it to be. Buttons are any class="button" links, edit links at the top of articles, the navigation, etc.


Under "links" is what color you want all the links on articles to be. Make sure that the color of links are visible to read compared to the wiki's background color.


After that is "header", which is the color of the header at the top of every wiki on Wikia. It is the Global Wiki Navigation that links wikis under the categories "Video Games", "Entertainment", and "Lifestyle". This Navigation also contains the Wikia wordmark and link to the homepage and the "start a wiki" button. This will automatically gradient from dark to light to dark of what color you choose.


This is what color you want the content's background to look. You can choose any color you want. You can also choose how transparent (see-through) the content background will be, which tends to work best with white backgrounds (in my opinion).

Wordmark and favicon

On the third tab of ThemeDesigner labeled "Wordmark", you can add a custom wordmark and favicon.


A wordmark is the image with the wiki's name to the left of the wiki's navigation at the top of articles. You can create your own wordmark and upload it in this tab of the special page. Note: The wordmark should be 250 x 65 pixels or less and has to be a .png file.

If you do not have a wordmark to upload, you can also modify a text, which is default to creating a wiki. You can make it anything you want, so long as it is not too long. It makes most sense to have the name of the wiki in this text.


A favicon is the little icon that appears in your browser's tab. The image should (but does not have to be...) be relevant to the wiki's topic. It should be 16x16 pixels and has to be an .ico file. If you want to convert an image with another file type to an icon (if you know it will convert well enough), I recommend converting it using a site; I personally use

Wiki features

Wiki features screenshot

To enable the various Help:Wiki Features, go to Special:WikiFeatures on your wiki. These can be very useful and are a great thing to add to your wiki. The features include:

  • Polls - Allow anyone on your wiki to create a poll! With Polls enabled your users can use the poll tag to add this neat feature to any page. This feature is a great way to increase contribution on your wiki.
  • Blogs - Blogs allow users on your wiki to create their own blog posts on their profile page and can also be used as a great way to communicate news and events to your wiki community.
  • Article Comments - This extension will let people write comments at the bottom of article pages. Other users can reply to the comments, and signatures and timestamps are automatically assigned. This will replace talk pages on your wiki.
  • Category Exhibition - The most popular eight pages in your categories are already displayed as images, but this feature will list all of your pages as image links sortable by name, recency, or popularity!
  • Message Wall - Communicating with the contributors on your wiki is an essential part of building and maintaining your community. The Message Wall uses a threaded conversation format and notification system that lets you control which conversations you're interested in following. No more missed messages!
  • Forum - Stay on top of every discussion on your wiki by utilizing Wikia's new Forums. Attract new people to participate in conversations about your wiki's content, and keep dedicated wiki editors efficient and engaged with all of the current topics.
  • Chat - Instantaneously communicate with other people who love your wiki and your wiki's topic as much as you do! Anyone with a Wikia account can join chat via the "Join the Chat" button in the right navigational area of your site.
    • I highly recommend you have this. Users are normally attracted to a wiki when they are able to socialize on a chat and vice versa.[see below]
  • Top 10 Lists - Top 10 Lists allow anyone on your wiki to create a votable list. If you're looking for a great way to get junior editors to interact with the wiki, this is it! Enabling this feature will add "Top 10 List" as an option when you click "Add a Page"
  • Achievements/Badges - Achievements will help your wiki to grow by incentivizing editors to contribute a variety of content. You can create your own challenges that are unique to your wiki, and even upload your own images for the badges.

Javascript (JS) enhancements

On your wiki, you can add several JS enhancements that make things much more useful on your wiki. These should be added to either your wiki's MediaWiki:Wikia.js or MdiaWiki:Common.js. Here are a few enhancements that I recommend that I also use on Rhythm Heaven Wiki (most of these are from Developer's Wiki):

importScriptPage('MediaWiki:Wikia.js/cancelButton.js', 'admintools');
Cancel Edit Button will bring up a button on your edit screen. If you click it, it will take you back to the page and cancel your edit.
importScriptPage('InactiveUsers/code.js', 'dev');
Inactive Users will mark any users whom have not edited in so long. It will mark them as inactive on their Profile Masthead.
importScriptPage('ShowHide/code.js', 'dev');
Show/Hide is a JS code that allows class="collapsible collapsed". It is a more professional replacement of Help:Collapsing, which does not require JS. That way can be used on all wikis whether they have this coding or not, but this is an alternative version of it.
importScriptPage('RevealAnonIP/code.js', 'dev');
Reveal Anon IP will reveal anonymous contributors (users that are not logged in) by their IP address as opposed to "A Wikia Contributor"
importScriptPage('HideRail/code.js', 'dev');
Hide Rail will allow users hide the rail content (wiki activity, chat, recent images, etc.) from an article.

There are many more. These are only a few that I think are a great addition to a wiki.

Adding a background image

Want to add an background image to your wiki? ThemeDesigner may not work as well. I prefer users to simply add a background to either their wiki's MediaWiki:Common.css or MediaWiki:Wikia.css. Images should be uploaded to any wiki (so long as they allow it; I do this with my test wiki). To fit nearly perfectly, the image should be about 1500 x 700 pixels. Once you have uploaded it, copy the URL after importing this to either of those pages:

body.mediawiki {
     background:#ECECEC url(BACKGROUND URL);

Replacing "BACKGROUND URL" with the URL of your wiki's background. And ta-da! Your wiki now has a background.

If you want to fix it, instead, type:

body.mediawiki {
     background:#ECECEC url(BACKGROUND URL) fixed center top !important;

If you want to tile it without fixing it, type:

body.mediawiki {
     background:#ECECEC url(BACKGROUND URL);
     background-repeat: repeat;

For both, type:

body.mediawiki {
     background:#ECECEC url(BACKGROUND URL) fixed center top !important;
     background-repeat: repeat;


Chat entry point help

On your wiki, in the features, you can add a chat. A chat is a great way for users to socialize atop editing. Chats are a great way to attract editors. There are a nearly infinite amount of ways you can customize your chat. You can customize the CSS and its Wikia page itself and much more.

One easy, neat chat feature is "day/night chat". This allows all users a button above the user list on the right side of the screen that can change the colors on chat. Day chat would normally have lighter colors and night chat would normally have darker colors, but this can be however you want.

If you want to add this feature, on your wiki, copy and paste this coding to MediaWiki:Chat.js (replacing the colors with the color you want):
//Switch to night button
var night_button = 'Switch to Night Chat';
//Switch to day button
var day_button = 'Switch to Day Chat';
//Color scheme for NIGHT Chat
  //Link color
    var linkColor = 'gold';
  //All text Color
    var textColor = '#FFFFFF';
  //Self text background color
    var selfTextColor = 'none';
  //Chat background color
    var backgroundColor = '#000000';
  //Chat foreground color
    var foregroundColor = 'black';
  //User stats foreground color
    var userStatsColor = 'none';
//END NIGHT Chat color scheme
//Day and night color schemes
//Written by Foodbandlt
function addNightStyle(){
var styleElement = document.createElement('style');
styleElement.setAttribute("id", "night");
styleElement.innerHTML='body{background-color: '+backgroundColor+';}.username, .message, div.chattopic, .info .edits, .UserStatsMenu .info .since, #ChatHeader h1.private, .Write [name="message"]{color: '+textColor+';}.WikiaPage, .UserStatsMenu, .ChatHeader, .Write [name="message"]{background-color: '+foregroundColor+';}.Chat .you{background: '+selfTextColor+';}a{color: '+linkColor+';}.UserStatsMenu .info{background-color:'+userStatsColor+';}';
function addDayNightButton(){
$('<div class="day-night-div" onclick="switch_view()" style="margin: 10px auto; text-align: center; cursor: pointer;"><a class="day-night-button wikia-button">'+night_button+'</a></div>').prependTo('.Rail');
if ($('style#night').size() < 1 && $('style#nightUser').size() < 1){
function day_night(which){
if (which == "night"){
$('.Rail .day-night-div .day-night-button').text(day_button);
$('.Rail .day-night-div .day-night-button').text(night_button);
function switch_view(){
if ($('.Rail .day-night-div .day-night-button').text() == night_button){
if ($('.Rail .day-night-button').text() == ""){
while ($('.Rail .day-night-div').size() > 1){
$('.WikiaPage .Rail div:last-child').remove()

Chat Options

A more recent way to customize your chat is to use "chat options" which is very useful and really comes to users' appeals. If you want chat options, just copy this to your wiki's MediaWiki:Chat.js. --

On your wiki's MediaWiki:Chat-welcome-message, after the message, add:

<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);}" />

And your chat is now customized with chat options, with options like personal color customization, chat hacks, search bar, etc!

Miscellaneous MediaWiki

To customize MediaWiki pages, you can find a list at Special:AllMessages on your wiki.

External Links

 20px-5251339.png Yuzura地獄へ と破壊02:42, January 30, 2013 (CST) 

Also on Fandom

Random Wiki