Create a MediaWiki Skin Based on the MonoBook Skin

The MediaWiki software is the open source software that wikiHow, Wikipedia, Wiktionary, and many other wiki sites are based upon. The software comes packed with many excellent features, including a default set of skins. However, you might want to use the software and its power, yet have your own interface in your site. This is when skins kick in. They are used to customize how the MediaWiki software looks and feels. Instead of creating your own skin from the ground up, this article shows you how to create a skin based on the MonoBook skin that comes ready with the software. You can then modify this template safely without endangering the original one, and it gives you a place to try any modifications you might want to add without having to modify the original skin. It is also useful for people wanting to learn skinning in MediaWiki sites using a hands-on approach.[1] For the purpose of demonstration, the article will assume you want to create a skin named , that is initially an exact copy of the default MonoBook skin.

Steps

  1. Create a new directory named in the directory which is in the root directory of your MediaWiki installation. It is important to create the directory with all-small-letters and not use capital letters in the name of the directory even if your skin's name does have them.
  2. Copy all files in into the directory.
  3. Create a new text file in the directory and name it
  4. Copy all the contents of into the file.
  5. Open the file in a text/php editor such as Notepad, Notepad++, Dreamweaver, Kate or any other editor capable of searching and replacing text!
  6. Find and replace code in MonoBookModified.php as mentioned in the Code Replacement section of this article.
  7. Go to the directory and open the file in a text editor (or any program for editing style-sheets). Change something simple in the style-sheet (the easiest is to replace the color of headers by changing the h1, h2, h3, h4, h5, h6 item color from "black" to say "blue")
  8. Open the MediaWiki site you've been editing in a web browser and go to the preferences page. Change the skin to the new skin and reload your page. Headers should now display in blue (or any color you choose earlier)
  9. Start modifying the file to change the styles of the new skin.
    • This skin was modified from the original MonoBook skin in background color and by adding a second toolbar at the bottom of each article.

Code Replacement

  • Find the following code:

And replace it with:

  • Find the following code:

and replace it with

  • Find the following code:

and replace it with

  • Find the following call:

and replace it with:

Tips

  • It is recommended to test your new skin on different types of pages (normal articles/pages, special pages, pages in different namespaces and the like) to make sure everything is OK.
  • You might want to use the "preview" link beside the skin's name before applying it in "preferences".
  • It is also recommended to set your new skin as the default once you are finished with it.

Warnings

  • The procedure described in this article should not be implemented in a production environment. A lab or test environment should be created to most closely mimic the live environment. Using this environment, test the procedure. When all components have been tested and are operating successfully, then they should be copied to the production environment and server(s).
  • If the new skin is applied without previewing it, it is often difficult to find and restore the original skin should something fail or not pass approval.
  • This procedure should be completed by personnel familiar with PHP and HTML, or supervised by such a person in the event that complications arise.

Related Articles

Sources and Citations

You may like