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

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

Colors

edit

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

edit

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