User:Stefahn/Chameleon Docu

Jump to navigation Jump to search

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

Nice 2 have[edit]

Things that would be nice 2 have:


Bundled layouts[edit]


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


  • 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.
<component type="Html">
  • 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
  • A name of a component may not contain a "-".
  • Function "getHtml" is necessary for output.


  • Modifications are currently only activated for top-level components[1].

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


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


  • 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[2].
  • 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


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