Manual:Skins/Meta

The overall appearance and layout of MediaWiki pages is dictated by skins, the interface upon which the page is viewed. Users can choose to use different skins (and further customize User styles), and a site administrator can change the default skin for a wiki. The default skin packaged with every MediaWiki install is MonoBook, famous as the default on various WikiMedia projects. When a site administrator creates a custom skin, it is easiest for them to work with an existing skin such as MonoBook.

The latest default skins are mainly based on CSS, so you don't have to change the page source to get a very different look.

meta:Help:User style -- many tweaks you can try in MediaWiki:Monobook.css or in your user stylesheet
Manual:Gallery of user styles -- different skins for your browsing and copy&paste pleasure

Generic CSS classes for content

You can reference CSS classes from articles. To allow better and more uniform styling for content elements (infoboxes for example) you should define a global set of css classes that can be referenced from the content. For example: españa

Creating a Skin based on MonoBook (1.6.x)

Assuming you would like to create a new skin called "FooBar" based on MonoBook you would:

1 - copy the file skins/MonoBook.php to skins/FooBar.php

2 - create a directory skins/foobar and copy the directory skins/monobook to skins/foobar

3 - edit skins/FooBar.php

3a - FIND:

class SkinMonoBook extends SkinTemplate {
       /** Using monobook. */
       function initPage( &$out ) {
               SkinTemplate::initPage( $out );
               $this->skinname  = 'monobook';
               $this->stylename = 'monobook';
               $this->template  = 'MonoBookTemplate';
       }
}

REPLACE WITH:

class SkinFooBar extends SkinTemplate {
       /** Using foobar. */
       function initPage( &$out ) {
               SkinTemplate::initPage( $out );
               $this->skinname  = 'foobar';
               $this->stylename = 'foobar';
               $this->template  = 'FooBarTemplate';
       }
}

3b - FIND:

class MonoBookTemplate extends QuickTemplate {

REPLACE WITH:

 class FooBarTemplate extends QuickTemplate {

3c - FIND:

wfRunHooks( 'MonoBookTemplateToolboxEnd', array( &$this ) );

REPLACE WITH:

wfRunHooks( 'FooBarTemplateToolboxEnd', array( &$this ) );

Your skin is now ready to be plugged in and modified. At this point you can zip up your FooBar.php and foobar directory and consider it a bootstrap for any forthcoming skins you might want to create.

4 - Next up is your Mediawiki configuration. We need to modify your LocalSettings.php file, changing the default skin to your new one...

cd /path/to/mediawiki/
vi LocalSettings.php

4a - FIND:

$wgDefaultSkin = 'monobook';

REPLACE WITH:

$wgDefaultSkin = 'foobar';

Warnings

Even though a user changing their skin preference will be presented with a list containing 'FooBar' (same as the file name), the variable $wgDefaultSkin must be 'foobar'. (The capitalisation is different). Getting this wrong will mean that the default skin is invalid (and displays as a badly formatted page).

Make sure this line isn't commented out either! Remember to clear your browser cache and hit reload. View page source and search for your new style name (FooBar, foobar), namely the CSS paths.

Done!

Remove Skins

(for MediaWiki 1.6.7 up to current versions)

To remove specific skin choices from the User Preferences skin choices, put this in LocalSettings.php:

# To remove various skins from the User Preferences choices
$wgSkipSkins = array("monobook", "vector");

Omit skins from above line that you want to remain as choices.

Remove Skin tab from User Preferences

(for MediaWiki 1.6.7)

To remove the Skin link/tab from User Preferences so that users do not have to be bothered with it at all, go in includes\SpecialPreferences.php (in MediaWiki 1.13.4 go to includes\specials\SpecialPreferences.php) and comment out (put another # at the beginning of each line, or enclose them in /*....*/) these lines:

                # Skin
                #
                $wgOut->addHTML( "<fieldset>\n<legend>\n" . wfMsg('skin') . "</legend>\n" );
                $mptitle = Title::newMainPage();
                $previewtext = wfMsg('skinpreview');
                # Only show members of $wgValidSkinNames rather than
                # $skinNames (skins is all skin names from Language.php)
                foreach ($wgValidSkinNames as $skinkey => $skinname ) {
                        if ( in_array( $skinkey, $wgSkipSkins ) ) {
                                continue;
                        }
                        $checked = $skinkey == $this->mSkin ? ' checked="checked"' : '';
                        $sn = isset( $skinNames[$skinkey] ) ? $skinNames[$skinkey] : $skinname;
                        $mplink = htmlspecialchars($mptitle->getLocalURL("useskin=$skinkey"));
                        $previewlink = "<a target='_blank' href=\"$mplink\">$previewtext</a>";
                        if( $skinkey == $wgDefaultSkin )
                                $sn .= ' (' . wfMsg( 'default' ) . ')';
                        $wgOut->addHTML( "<input type='radio' name='wpSkin' id=\"wpSkin$skinkey\" value=\"$skinkey\"$checked /> <label for=\"wpSkin$skinkey\">{$sn}</label> $previewlink<br/>\n" );
                }
                $wgOut->addHTML( "</fieldset>\n\n" );

Ensure users using skipped skins use the default instead

(for MediaWiki 1.16.0 up to current versions)

Use the maintenance script userOptions.php to change the selected skin for existing users. Basically a command like this wil do:

php userOptions.php skin --old <old skin name> --new <new skin name>

For example:

php userOptions.php skin --old "monobook" --new "vector"

will change the preference for users, who had selected Monobook to Vector.