User:Stefahn/Chameleon Docu

My own docu for Skin:Chameleon. If you have a comment, please post it on the discussion page.

Update / Install

 * To use the master version, add this in local.composer.json:
 * gets the latest 3.x release, but it won't get the current unreleased commits. To get the latest 3.x dev code, use this:

Layout

 * Change screen width
 * Responsive breakpoints

Bundled layouts
clean.xml
 * for visitors that are not logged in: shows nothing but the components "SiteNotice" and "MainContent"
 * for users with the permission "edit": additionally shows the components "NavbarHorizontal" (sticky at the top), "ToolbarHorizontal" (below the MainContent) and "FooterInfo"

Components

 * See all components under
 * Full width header with content within grid:
 * Use minified PageTools and PersonalTools outside NavbarHorizontal:

Existent Components and their meaning: Usage:  <![CDATA[ YOUR HTML CODE HERE ]]>
 * PageTools = Edit link and submenu (with links for discussion, version history, moving, deleting etc). Only shown if user is allowed to edit.
 * PersonalTools = Head icon with submenu (If logged in: with user page, user discussion, settings, watchlist, contributions and log out link. If logged out: log in link)
 * Html = allows insertion of raw HTML into the page.
 * FooterInfo = "This page was last modified on xy"
 * FooterPlaces = Links to Privacy policy, About, Disclaimer etc.
 * FooterIcons = MediaWiki icon, SMW icon

Adding own components:
"autoload" : { "classmap": ["skins/YourSkinFolder"] },
 * How to add own components to the layout:, 2020 version
 * Addition to 2020 version: Add this line to :
 * A name of a component may not contain a "-".
 * Function "getHtml" is necessary for output.

Modifications

 * Modifications are currently only activated for top-level components.

Possible modifications:
 * : Shows the row/cell/component only if the user has the permission "edit".
 * : Hides the row/cell/component if the user has the permission "edit".
 * : Shows the row/cell/component only in a certain namespace (in the example the main namespace).

Grid

 * It is possible to use  more than once.
 * and  can also be used outside of.

Icons

 * You can see all free icons of Font Awesome here: https://fontawesome.com/v5/cheatsheet

Menu
Alternatively one can list the menus to be flattened on the page Mediawiki:Skin-chameleon-navmenu-flatten as a semicolon-separated list.
 * The navigation menu is pulled from MediaWiki:Sidebar.
 * Single link in menu (without dropdown): Add  to the navigation in your xml layout file. For example:
 * Let submenus appear when hovering over it (instead of clicking):
 * Remove "go" button of search box

Bootstrap

 * centers the div and gives it the content width (for example 960 px).  gives a full width container.

Links

 * Github
 * Migrating to Chameleon 2.0

Bootstrap:
 * Explanation of CSS in Bootstrap
 * Free bootstrap themes
 * Find out which less variable has which effect