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
class FooBar extends SkinTemplate { var $skinname = 'foobar', $stylename = 'foobar', $template = 'FooBarTemplate', $useHeadElement = true; function __construct { global $wgResourceModules, $wgStylePath, $wgStyleDirectory; $wgResourceModules['skins.foobar'] => array(         'styles' => array( 'foobar/screen.css' => array( 'media' => 'screen' ) ),          'scripts' => 'foobar/vector.js',          'remoteBasePath' => $GLOBALS['wgStylePath'],          'localBasePath' => $GLOBALS['wgStyleDirectory'],    ); }   // rest of code ... }
 * 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:
 * everywhere SkinVector into SkinFooBar</tt>
 * everywhere VectorTemplate</tt> into FooBarTemplate</tt>
 * $skinname = 'vector', $stylename = 'vector'</tt> into $skinname = 'foobar', $stylename = 'foobar'</tt>
 * '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:
 * in FooBar.php's constructor you need to register your skin like:

'skins.foobar' => array(         'styles' => array( 'foobar/screen.css' => array( 'media' => 'screen' ) ),          'scripts' => 'foobar/vector.js',          'remoteBasePath' => $GLOBALS['wgStylePath'],          'localBasePath' => $GLOBALS['wgStyleDirectory'],        ),
 * if for some reason(?) the skin registration does not work as expected you will have to add code to ./Resources/Resources.php</tt>:

colors
The color scheme used in vector is primarily maintained in a bunch of images in ./skins/foobar/images</tt> driven by ./skins/foobar/screen.css</tt>
 * border.png</tt>: color of borders of the contents area
 * page-base.png</tt>: background of page apart from contents
 * page-fade.png</tt>: color fade at top of page

change behavior when not logged in
To change the site's layout/view when not logged in: <?php if ( $this->data['loggedin'] ) { ?> /* code to be used only when logged in */ <?php } ?>