How to create a skin FooBar based on the default skin Vector (any name other than FooBar will do of course) in MediaWiki 1.17/1.18

Copy Vector[edit]

  • copy directory ./skins/vector to ./skins/foobar
  • copy ./skins/Vector.php to ./skins/FooBar.php
  • copy ./skins/Vector.deps.php to ./skins/FooBar.deps.php
  • in ./skins/FooBar.php, change:
    • SkinVector into SkinFooBar
    • VectorTemplate into FooBarTemplate
    • $skinname = 'vector', $stylename = 'Vector' into $skinname = 'foobar', $stylename = 'Foobar'
    • 'skins.vector' into 'skins.foobar'
    • leave other 'vector' occurrences intact, unless you're going to add all vector-related system messages...
  • register your skin's module by putting the following in $IP/skins/foobar/resources.php and then including it in LocalSettings.php with require_once "$IP/skins/foobar/resources.php";
$wgResourceModules['skins.foobar'] = array(
    'styles' => array(
        'common/commonElements.css' => array( 'media' => 'screen' ),
        'common/commonContent.css' => array( 'media' => 'screen' ),
        'common/commonInterface.css' => array( 'media' => 'screen' ),
        'foobar/screen.css' => array( 'media' => 'screen' ),
    'scripts' => 'foobar/vector.js',
    'remoteBasePath' => $GLOBALS['wgStylePath'],
    'localBasePath' => $GLOBALS['wgStyleDirectory'],


The color scheme used in vector is primarily maintained in a bunch of images in ./skins/foobar/images driven by ./skins/foobar/screen.css

color of borders of the contents area
background of page apart from contents
color fade at top of page


See /Example for a working example.

MediaWiki 1.19[edit]

Follow the Steps from the first Section but don't create the file resources.php and don't link in in your Localsettings.php. Instead add the following at the end of initPage method of your class SkinFooBar (after $out->addModuleScripts( 'skins.foobar' );:

$out->addStyle('common/commonElements.css', 'screen');
$out->addStyle('common/commonContent.css', 'screen');
$out->addStyle('common/commonInterface.css', 'screen');
$out->addStyle('foobar/screen.css', 'screen');