Jump to: navigation, search

Mediawiki Custom Skin Tutorial

Creating a Custom Skin - A beginners guide

This tutorial isn't about creating a "New" skin, it's about using Bootstrapskin to create a new skin

Bootstrapskin was never created as a stand-alone skin, it was created as a developement tool for creating unique Mediawiki skins.

If you view the Bootstrapskin demo's (Default Open source, Nexus and Halcyon), they may all look very different, but each uses Bootstrapskin and more surprisingly very little customisation is required to produce wiki's like these.

The Basics

Styling: For developers that have their own Bootstrap style sheets, you can swap your style for the default Bootstrapskin style.

Menu's: Use a custom menu of your choice with minimal modification of Bootstrapskin.skin.php

Mediawiki: All Mediawiki styling mods are carried out through screen.css.

And that as they say is pretty much it .... It really is that simple.

Getting Started
  • Set up a developement framework - Install Xampp on your PC.
  • Install a developement editor - Install NotePad++ on your PC.
Using a Custom Stylesheets

Remove Bootstrapskins default stylesheet and replace with your own Bootstrap stylesheet - edit /skins/bootstrap/bootstrapskin.php;

        'bootstrap/bootstrap/css/bootstrap-blue.css' => array( 'media' => 'screen' ), //remove this file
        'bootstrap/screen.css' => array( 'media' => 'screen' ),
        'bootstrap/theme.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/jquery-ui.min.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/font.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/jquery-ui.min.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/typography.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/misc.css' => array( 'media' => 'screen' ),
	),

And include your own stylesheet.

   
        'bootstrap/bootstrap/css/custom-stylesheet.css' => array( 'media' => 'screen' ), //Add your own
        'bootstrap/screen.css' => array( 'media' => 'screen' ),
        'bootstrap/theme.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/jquery-ui.min.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/font.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/jquery-ui.min.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/typography.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/misc.css' => array( 'media' => 'screen' ),
	),

Save and refresh to view the changes, you may need to fine tune the new style a little.

Using a Custom Menu

Add the menu style - edit /skins/bootstrap/bootstrapskin.php;

   
        'bootstrap/bootstrap/css/custom-stylesheet.css' => array( 'media' => 'screen' ), 
        'bootstrap/screen.css' => array( 'media' => 'screen' ),
        'bootstrap/theme.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/jquery-ui.min.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/font.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/jquery-ui.min.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/typography.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/misc.css' => array( 'media' => 'screen' ),
        'bootstrap/bootstrap/css/custom-menu.css' => array( 'media' => 'screen' ),//Add menu style sheet
	),

I've created a skeleton skin, one in which the menu is a little easier to understand than the default skin, download below, upload and replace the current bootstrapskin.skin.php and modify as required, taking particular care to add your custom menu classes - edit from line 144.

Final Tips

Refer to our documentation with regard to applying your new styles to wiki pages.

Use our extensions as they have been tested with Bootstrapskin or take care to test any JavaScript additions as they tend to break the skin!

If you need help ask at the forums.

bootstrapskin-commercial-skin.png