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"

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 /skins/chameleon/src/Components
• Full width header with content within grid: [2]
• Use minified PageTools and PersonalTools outside NavbarHorizontal: [3]

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>

• FooterInfo = "This page was last modified on xy"
• FooterPlaces = Links to Privacy policy, About, Disclaimer etc.
• FooterIcons = MediaWiki icon, SMW icon

Adding own components:

• How to add own components to the layout: [4], 2020 version
• Addition to 2020 version: Add this line to composer.local.json:

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

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

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

Grid

• It is possible to use <grid>...</grid> more than once.
• <row> and <cell> can also be used outside of <grid>.

Icons

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

Menu

• 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.
• 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;    
      }
  }
  

• Remove "go" button of search box

Bootstrap

• .container centers the div and gives it the content width (for example 960 px). .container-fluid 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