Manual:Skinning/Vector
This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date. If you wish to make a subskin http://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/ would be a better resource. |
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
intoSkinFooBar
VectorTemplate
intoFooBarTemplate
$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 withrequire_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
editThe 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
editSee /Example for a working example.
MediaWiki 1.19
editFollow 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');