Skin:Chameleon

The Chameleon skin uses Twitter Bootstrap 3. Its 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. Ths layout can be adapted.

Installation
The latest development version of the Chameleon skin requires Composer for installation. (But why!?)


 * 1) If not already done, install Composer.
 * 2) If not already done, copy   to   in your MediaWiki installation directory
 * 3) If not already done, add the following keys to   to allow Composer installing development versions:
 * 4) If you are upgrading from a version installed without using Composer,
 * 5) * Remove the old skin from the  from LocalSettings.php
 * 6) Run   from the MediaWiki installation directory (or   if applicable)
 * 7) ✅ – Navigate to "Special:Version" on your wiki to verify that the skin is successfully installed.
 * 1) Run   from the MediaWiki installation directory (or   if applicable)
 * 2) ✅ – 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  in your
 * 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  subdirectory in the   directory of your MediaWiki installation directory,
 * remove that  subdirectory and all its contents from the   directory and
 * run  from the MediaWiki installation directory again (or   if applicable)

Customization
For a list of adjustable variables have a look at the list of variables used by Chameleon.

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  in  :

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

To add or change LESS variables add them to the array  in  :

Regardless of the order of the calls, variables will always override imported files.

Example
To use the Amelia theme from Bootswatch you could download the  and the   file to your MediaWiki installation directory and rename them to   and. You then add the following code to your :

To make the navigation bar a bit narrower you could add

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 three pre-defined layouts available: standard, navhead and fixedhead. They can be activated by setting the variable  in LocalSettings.php. E.g. to activate the fixedhead layout you could add

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.)

Live examples

 * Chameleon's page on WikiApiary
 * 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
 * add your wiki here

Contributing to the project
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)

 * Add many more components and layouts (suggestions welcome)
 * Improve responsiveness (layout on small screens sucks)
 * Improve accessibility (see )
 * Make customizable (colors, fonts, sizes) via Special page
 * Layout selector on User preferences
 * Compatibility with extensions

Credits
The "Chameleon Skin Logo" was derived from an icon made by Freepik from www.flaticon.com, used under CC BY. The "Chameleon Skin Logo" itself is licensed under CC BY SA by Stephan Gambke.

Internationalization was achieved through the work of the translatewiki community. See.