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: "mediawiki/chameleon-skin": "dev-master"
"mediawiki/chameleon-skin": "~3.0" 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: "mediawiki/chameleon-skin": "3.x-dev"^[1]

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"

Existent Components and their meaning:

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.
Usage:

<component type="Html">
<![CDATA[
YOUR HTML CODE HERE
]]>
</component>

	"autoload" : {                
		"classmap": ["skins/YourSkinFolder"]
	},

Possible modifications:

<modification type="ShowOnlyFor" permission="edit"></modification>: Shows the row/cell/component only if the user has the permission "edit".
<modification type="HideFor" permission="edit"></modification>: Hides the row/cell/component if the user has the permission "edit".
<modification type="ShowOnlyFor" namespace="NS_MAIN"></modification>: Shows the row/cell/component only in a certain namespace (in the example the main namespace).

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

The navigation menu is pulled from MediaWiki:Sidebar.
Single link in menu (without dropdown): Add flatten="navigation" to the navigation in your xml layout file. For example: <component type="NavMenu" flatten="navigation" showTools="no" showLanguages="no" ></component>
Alternatively one can list the menus to be flattened on the page Mediawiki:Skin-chameleon-navmenu-flatten as a semicolon-separated list^[4].

Let submenus appear when hovering over it (instead of clicking):

@media only screen and (min-width: 780px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }
}

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

Bootstrap: