Release status: stable
|License||GNU General Public License 2.0 or later|
|Translate the Vector skin if it is available at translatewiki.net|
|Check usage and version matrix;|
|Issues:||Open tasks · Report a bug|
Vector provides a number of usability improvements over its predecessor. It was the first skin to separate the flat level content_actions into the categorized content_navigation.
At the beginning the basic functionality was included in the core skin, while some of Vector's special features were handled by a separate extension (Extension:Vector). The extension has since been merged into the skin itself.
In recent years the skin underwent a number of changes, e.g. the switch to Mustache and the addition of new features. The latter are controlable by feature switches so that users can still be served to legacy layout.
- Download and place the file(s) in a directory called
- Add the following code at the bottom of your LocalSettings.php:
wfLoadSkin( 'Vector' );
- Done - Navigate to Special:Version on your wiki to verify that the skin is successfully installed.
To users running MediaWiki 1.24 or earlier:
The instructions above describe the new way of installing skins using
wfLoadSkin(), since MediaWiki 1.25. If you need to install this skin in earlier versions, instead of
wfLoadSkin( 'Vector' );, you need to use:
(To run a skin on an earlier release, you may need to download the version of it tagged for that release from Special:SkinDistributor.)
Setting the default skin to Vector
A default skin should be set for new users of a wiki by setting the variable $wgDefaultSkin in LocalSettings.php to the lowercase skin name specified in the skin file:
$wgDefaultSkin = 'vector';
- Watch and unwatch as an icon rather than a link.
- true = use an icon watch/unwatch button
- false = use watch/unwatch text link
$wgVectorUseIconWatch = true;
- Experimental setting to make Vector slightly more responsive. Not actively being tested or used in production (yet) but relatively stable and false by default.
- true = Use responsiveness to improve usability in narrow viewports
- false = No responsiveness
$wgVectorResponsive = false;
Logo used in print styles. Keys are 'url', 'width', 'height' (in pixels). Note that this solution only works correctly if the image pointed to by 'url' is an SVG that does not specify width and height attributes, or its width and height match the corresponding variables below. Alternatively, a PNG or other type of image can be used, but its dimensions also need to match the corresponding variable below. That in turn may result in blurry images, though.
$wgVectorPrintLogo = [ 'url' => 'https://en.wikipedia.org/static/images/mobile/copyright/wikipedia-wordmark-en.svg', 'width' => 174, 'height' => 27 ];
- Basic features of the Vector skin
- Reduced clutter, primarily by reducing the number of lines on screen
- More prominent placement of the search portal
- Visual separation of the content-action and namespace links, the former of which being divided into view tabs and action menu items
- Automatic increase/decrease of margins throughout the user interface based on browser size
- Use of a star icon for watch and unwatch actions
- Added features of the Vector extension (some of these features have later been merged into the Vector skin or into the MediaWiki Core or have been removed)
- Simplified search portal, including suggestions
- Collapsible navigation portals
- Alert when leaving an edit page without saving
- Automatic hiding of tabs that do not fit on screen
- Experimental Vector extension features
- Simplified footer content
- Search box expands on focus
- Section edit links are moved to be directly next to heading instead of on the right, and use an icon
- CollapsibleNav support via CollapsibleVector extension
The collapsible navigation portals are now provided by the CollapsibleVector extension which will have to be installed additionally.
Poor smartphone and tablet web design
Vector will work on many mobile devices (i.e. smartphones and tablets), but it is not optimized for mobile devices. The Skin:Timeless skin is already bundled with MediaWiki 1.31 and is considered a good alternative according to Manual:Mobiles, tablets and responsive design
Vector currently has a poor implementation of responsive web design, in which the
#right-navigation buttons might overlap the
#left-navigation buttons due to width shortage, with no fallback icons like on skin: Monobook, skin: MinervaNeue and skin: Timeless viewed on narrow displays.
In addition, the left side bar navigation links inside
#mw-panel, as well as the top links inside
#p-personal, move to the bottom of the page on narrow displays, beneath the content area, requiring the user to scroll to the bottom before being able to access it.
|This skin is being used on one or more Wikimedia projects. This probably means that the skin is stable and works well enough to be used by such high-traffic websites. Look for this skin's name in Wikimedia's CommonSettings.php and InitialiseSettings.php configuration files to see where it's installed. A full list of the skins installed on a particular wiki can be seen on the wiki's Special:Version page.|