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.

Generic CSS classes for content

edit

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)

edit

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

edit

(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

edit

(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

edit

(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.