Skin:Chameleon

MediaWiki skins manual - category

Chameleon Release status: stable
Description	Provides a skin using Twitter Bootstrap 3
Author(s)	Stephan Gambke
Latest version	1.1.4 (2015-05-27)
MediaWiki	1.22+
PHP	5.3+
Composer	mediawiki/chameleon-skin
License	GPLv3
Download	see text README on GitHub Changelog on GitHub
Public wikis using	243 (Ranked 28th)
Public wikis using as default skin	195
Translate the Chameleon skin if it is available at translatewiki.net
Issues :	Open tasks · Report a bug

Chameleon is a highly customizable MediaWiki skin that uses Twitter Bootstrap 3.

It currently provides five different layouts to chose from. The standard layout features a horizontal navigation menu with dropdowns at the top and a horizontal menu with dropups for the language links at the bottom. Each layout is defined in an XML file and as such easily adaptable to your needs.

Installation

The Chameleon skin requires Composer for installation. (But why!?)

1. If necessary install Composer.
2. Go to your MediaWiki installation directory
3. If necessary (on MediaWiki up to 1.23) copy the file composer.json.example to composer.json
4. With Composer installed, run php composer.phar require mediawiki/chameleon-skin "1.*"
5.  Done – Navigate to Special:Version on your wiki to verify that the skin is successfully installed.

Remarks

• To actually activate Chameleon as the default skin of your wiki, include $wgDefaultSkin='chameleon'; in your LocalSettings.php
• It is not necessary to install any dependencies anymore. Composer will take care of that.
• If instead of a proper installation you end up with a mediawiki subdirectory in the vendor directory of your MediaWiki installation directory,
  • remove that mediawiki subdirectory and all its contents from the vendor directory and
  • run composer update from the MediaWiki installation directory again (or php composer.phar update if applicable)

Documentation

The documentation will be successively moved into the sourcecode repository. This allows to better keep it in sync with the development of the code. Moreover it allows to go back in time and see the documentation for a particular version of the skin.

Use the documentation index page as a starting point.

Customization

Fonts and Colors

You can customize the skin by loading additional LESS files and by setting LESS variables.

To import additional LESS files, add them to the array $egChameleonExternalStyleModules in LocalSettings.php:

$egChameleonExternalStyleModules = array(
    $localPathToLESSFile1 => $remotePathToLESSFile1Directory,
    $localPathToLESSFile2 => $remotePathToLESSFile2Directory,
    ...
);

If your LESS file does not reference any other files (fonts, images, ...), you may omit the remote path. Just write:

$egChameleonExternalStyleModules = array( $localPathToLESSFile1, $localPathToLESSFile2, ... );

To add or change LESS variables add them to the array $egChameleonExternalLessVariables in LocalSettings.php:

$egChameleonExternalLessVariables = array(
    'key1' => 'value1',
    'key2' => 'value2',
    ...
);

Regardless of the order of the calls, variables will always override imported files. A good starting point for customization is Bootstrap's list of variables: http://getbootstrap.com/customize/#less-variables

Example

To use the Amelia theme from Bootswatch you could download the variables.less and the bootswatch.less file to your MediaWiki installation directory and rename them to amelia-variables.less and amelia-bootswatch.less. You then add the following code to your LocalSettings.php:

$egChameleonExternalStyleModules = array(
    __DIR__ . '/amelia-variables.less' => $wgScriptPath,
    __DIR__ . '/amelia-bootswatch.less' => $wgScriptPath,
);

To make the navigation bar a bit narrower you could add

$egChameleonExternalLessVariables = array(
    'navbar-height' => '30px',
);

Layout of page elements

The layout of the page elements (nav bar, logo, search bar, etc.) is defined in an XML file. There are currently four pre-defined layouts available: standard, navhead, fixedhead and stickyhead. They can be activated by setting the variable $egChameleonLayoutFile in LocalSettings.php. E.g. to activate the fixedhead layout you could add

$egChameleonLayoutFile= __DIR__ . '/skins/chameleon/layouts/fixedhead.xml';

You can of course also define and use your own layout. Have a look at the available XML files to see what is possible. (Better documentation to follow.)

Screenshots

• 
  Whole page in standard layout
• 
  Navigation menu
• 
  Language menu
• With Amelia theme and narrower navigation bar
  With Amelia theme and narrower navigation bar
• 
  Using the NavHead layout
• Using the FixedHead layout
  Using the FixedHead layout

Live examples

• Solutions-web.eu and its test page of bootstrap features with $wgRawHtml set to false
• Docupedia-Zeitgeschichte (in German)
• Bootstrap.sémantique and its test page of bootstrap features with a paid skin and $wgRawHtml set to true
• German Star Citizen Wiki
• Laws of Australia
• OGD Cockpit
• a complete set of examples from geybootstrap.com (in wiki-markup mode and in raw html mode)
• add your wiki here

For further examples see Chameleon's page on WikiApiary

Contributing to the project

see https://github.com/wikimedia/mediawiki-skins-chameleon/blob/master/docs/contribute.md

Bugs and feature requests should preferably be reported on the Wikimedia bug tracker.

Comments, questions and suggestions should be sent or posted to:

• the Chameleon discussion page
• the author

Roadmap (kind of)

• Improve documentation
• Add many more components and layouts (suggestions welcome)
• Improve responsiveness
• Improve accessibility (see [1])
• Make customizable (colors, fonts, sizes) via a Special page
• Put a selector for the layout on the user preferences page
• Compatibility with extensions

Credits

see https://github.com/wikimedia/mediawiki-skins-chameleon/blob/master/docs/credits.md

See also

Other skins and extensions related to the Bootstrap framework:

• Skins based on Bootstrap - Overview of skins based on the Bootstrap framework

• Extension:Bootstrap - Provides the Bootstrap framework to MediaWiki

• Extension:BootstrapComponents - Provides further components to the Bootstrap framework for MediaWiki

References

[[Category:Extensions supporting ComposerTemplate:Translation]] [[Category:GPL licensed skinsTemplate:Translation]] [[Category:Mobile skinsTemplate:Translation]] [[Category:Stable skinsTemplate:Translation]]