Manual:Skinning/Vector

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

• 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'],
);

Colors

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

border.png

color of borders of the contents area

page-base.png

background of page apart from contents

page-fade.png

color fade at top of page

Example

See /Example for a working example.

MediaWiki 1.19

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');