Components are the building blocks of any layout. They are the functional units of the website, like the logo or the navigation bar. There are also four special component types - structure, grid, row and cell - that define the general layout of the page and assign the other components their place on the page. Modifications can be added to most components to change their general behavior.
The following components and modifications are available:
Structure
Grid
Row
Cell
- Component
CategoryLinks
- Component
Container
- Component
ContentBody
- Component
ContentHeader
- Component
FooterIcons
- Component
FooterInfo
- Component
FooterPlaces
- Component
Html
- Component
Indicators
- Component
LangLinks
- Component
Logo
- Component
MainContent
- Component
Menu
- Component
Message
- Component
NavbarHorizontal
- Component
NavMenu
- Component
NewtalkNotifier
- Component
PageTools
- Component
PersonalTools
- Component
SearchBar
- Component
Silent
- Component
SiteNotice
- Component
Toolbox
- Modification
HideFor
- Modification
ShowOnlyFor
- Modification
Sticky
The root element of any layout.
<structure xmlns="https://github.com/ProfessionalWiki/chameleon/layout/1.0">
...
</structure>
-
xmlns
:- Allowed values: URI of XML namespace definition
- Optional.
Ignored by the skin itself, but may be specified to validate the layout. See Layouts.
None.
- Grid
- Any component
The grid system is used for creating page layouts through a series of rows and cells. While it is possible to place components outside of a grid it is not recommended.
<grid>
...
</grid>
-
mode
:- Allowed values: String (
fixedwidth
|fluid
|sm
|md
|lg
|xl
|xxl
) - Default:
fixedwidth
- Optional.
Use
fixedwidth
for a responsive fixed width layout. Usefluid
for a full width layout, spanning the entire width of the viewport.Use a breakpoint name for a responsive container (since Chameleon 4.1.0).
- Allowed values: String (
-
id
:- Since Chameleon 3.3.0
- Allowed values: Any string
- Default: -
- Optional.
The id that should be assigned to the grid element.
-
class
:- Allowed values: Any string
- Default: -
- Optional.
The class (or classes) that should be assigned to the grid element.
- Row
- Any modification
Use rows to create horizontal groups of cells. Content should be placed within cells, and only cells may be immediate children of rows.
<row>
...
</row>
-
id
:- Since Chameleon 3.3.0
- Allowed values: Any string
- Default: -
- Optional.
The id that should be assigned to the row element.
-
class
:- Allowed values: Any string
- Default: -
- Optional.
The class (or classes) that should be assigned to the row element.
- Cell
- Any modification
Holds components.
<cell>
...
</cell>
-
id
:- Since Chameleon 3.3.0
- Allowed values: Any string
- Default: -
- Optional.
The id that should be assigned to the cell element.
-
class
:- Allowed values: Any string
- Default: -
- Optional.
The class (or classes) that should be assigned to the cell element.
- Row
- Any component
- Any modification
Displays category links.
Since Chameleon 4.0.0
Hide category links on the MainContent
component and add the Categorylinks
component separately:
<component type="MainContent" hideCatLinks="yes" />
<!-- other components -->
<component type="CategoryLinks" />
None.
- Any modification
This component will wrap its content elements in a <div>
. It may be used to
assign a CSS id or class for styling purposes.
<component type="Container" class="foo bar">
...
</component>
-
id
:- Since Chameleon 3.3.0
- Allowed values: Any string
- Default: -
- Optional.
The id that should be assigned to the
<div>
element. -
class
:- Allowed values: Any string
- Default: -
- Optional.
The class (or classes) that should be assigned to the
<div>
element.
- Any component
- Any modification
Allows to display the content body independently of the MainContent.
Since Chameleon 4.2.0
<component type="ContentBody" />
None.
- Any modification
Allows to display the content header independently of the MainContent.
Since Chameleon 4.2.0
<component type="ContentHeader" />
None.
- Any modification
A list containing the "powered by" icons.
<component type="FooterIcons"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
- Any modification
A list of footer items (last modified time, view count, number of watching users, credits, copyright). Does not include so called places (about, privacy policy, and disclaimer links).
<component type="FooterInfo"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
- Any modification
A list containing links to places (about, privacy policy, and disclaimer links).
<component type="FooterPlaces"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
- Any modification
This component allows insertion of raw HTML into the page.
<component type="Html"><![CDATA[
<b>Hello World!</b>
]]></component>
None.
- Any modification
Allows to display the indicators independently of the MainContent.
Since Chameleon 4.2.0
<component type="Indicators" />
None.
- Any modification
Language links are links which connect an article with related articles in other languages within the same Wiki family.
See also: Manual:Interwiki
<component type="LangLinks" />
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
-
flatten
- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
Whether the list of languages should be flattened, i.e. its items should appear not in a submenu, but as elements of the top structure.
- Allowed values: Boolean (
- Any modification
The Logo component displays the logo of the wiki as defined in $wgLogo
.
The alternative text of the image is set to the sitename of the wiki as defined
in $wgSitename
. Depending on the addLink
attribute the logo may link to the
main page of the wiki. The name of the main page of the wiki is defined in the
mainpage
message and can thus be modified on the Mediawiki:Mainpage
page of
the wiki.
<component type="Logo" addLink="yes" />
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
-
addLink
:- Allowed values: Boolean (
yes
|no
) - Default:
yes
- Optional.
- Allowed values: Boolean (
- Any modification
The main content of the page, the wiki article itself.
Includes:
- Title: title of the page
- Subtitle: used for various things like the subpage hierarchy
- Tagline: usually something like "From WikiName", hidden by default, used for printing
- Undelete message
- Page status indicators: icons that provide quick information about the status of the article
- Article text
- Data after content: Additional text block useable by extensions
- Category links
<component type="MainContent"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
-
hideIndicators
:- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
Hide the indicators. Use in conjunction with the Indicators component to display the indicators elsewhere.
- Allowed values: Boolean (
-
hideContentHeader
:- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
Hide the content header. Use in conjunction with the ContentHeader component to display the header elsewhere.
- Allowed values: Boolean (
-
hideContentBody
:- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
Hide the content body. Use in conjunction with the ContentBody component to display the body elsewhere.
- Allowed values: Boolean (
-
hideCatLinks
:- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
Hide the category links. Use in conjunction with the CategoryLinks component to display the links elsewhere.
- Allowed values: Boolean (
- Any modification
An additional menu.
The structure of the menu can be specified either in a MediaWiki message or directly in the layout file. The format is the same as that of the MediaWiki sidebar, except that a third component is allowed that can contain a class string that should be set on the menu item link. This can be used to show an icon in front of the menu item.
This component is intended to be used inside a NavbarHorizontal component. It will work in other places, but will require additional styling effort.
Using the message MediaWiki:Secondary-menu:
<component type="Menu" message="secondary-menu" />
Using an inline description:
<component type="Menu" >
* SomeMenuLabel
** SomeMenuItem
* # | AnotherMenuLabel | fas fa-egg
** SomeURL | SomeMenuItemLabel | fas fa-splotch
</component>
-
message
- Allowed values: String
- Default: -
- Optional.
The name of the MediaWiki message that holds the menu description.
- Any modification
Displays a MediaWiki message.
Since Chamaleon 3.4.0
To display the message MediaWiki:MyMessage:
<component type="Message" name="MyMessage" />
-
name
:- Allowed values: String
- Default: -
The message name without the MediaWiki: prefix.
- Any modification
A horizontal navbar that takes its contents from its child elements.
From navhead.xml:
<component type="NavbarHorizontal">
<component type="Logo" position="head"/>
<component type="NavMenu" flatten="navigation" showTools="no" showLanguages="no"/>
<component type="PageTools" position="right" hideSelectedNameSpace="yes"/>
<component type="SearchBar" position="right"/>
<component type="PersonalTools" position="right"/>
</component>
Add "Menu" text next to the toggler button:
<component type="NavbarHorizontal" showTogglerText="yes">
<!-- ... -->
</component>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
-
collapsible
:- Allowed values: Boolean (
yes
|no
) - Default:
yes
If the navbar shall collapse on small screens.
- Allowed values: Boolean (
-
fixed
:- Deprecated. Use the Sticky modification instead.
- Allowed values: Boolean (
yes
|no
) - Default:
no
-
showTogglerText
:- Since Chameleon 3.3.0
- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
Displays text next to the toggler icon. The text is defined in the system message
chameleon-toggler
.
- Component
Logo
- Component
Menu
- Component
NavMenu
- Component
PageTools
- Component
PersonalTools
- Component
SearchBar
- Any modification
A menu containing the sidebar items.
Does not include the search bar. Toolbox and language links can be included optionally.
This component is intended to be used inside a NavbarHorizontal component. It will work in other places, but will require additional styling effort.
Using the message MediaWiki:Secondary-menu:
<component type="NavMenu" flatten="navigation"/>
-
flatten
- Allowed values: String
- Default: -
- Optional.
A semicolon-separated list of section names that are to be flattened, i.e. whose menu items should appear not in a submenu, but as elements of the top structure.
A comma-separated list may also be given in the message MediaWiki:skin-chameleon-navmenu-flatten instead. If both the message and this attribute are found, the message takes precedence.
- Any modification
A message to a user about new messages on their talkpage. Usually goes something like "You have a new message (last change)."
<component type="NewtalkNotifier"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
- Any modification
A component containing content navigation links (Page, Discussion, Edit, History, Move, ...)
<component type="PageTools" buttons="ve-edit,history"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
-
hideSelectedNameSpace
- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
If set the link to the current page will not be shown among the page tools.
- Allowed values: Boolean (
-
hideDiscussionLink
- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
If set the link to the discussion page will not be shown among the page tools.
- Allowed values: Boolean (
-
buttons
- Allowed values: String
- Default:
edit
- Optional.
The actions that will be shown as a button on the navbar directly. They will also be removed from the PageTools drop-down.
This attribute will be ignored if the PageTools are not a child element of a NavbarHorizontal.
Among others, possible actions are:
- delete
- edit
- formedit
- history
- move
- protect
- purge
- talk
- undelete
- unprotect
- unwatch
- ve-edit
- view
- watch
Note that button for actions, that are not valid for a given page will be omitted automatically. So in the above example, the visual-editor edit action button will only be shown for pages in a valid visual-editor namespace.
Note also, that the buttons will be shown in the order provided in the
buttons
attribute. In the example above, history would be the last action right before the ellipsis.
- Any modification
Visual Editor has a late-executed javascript function, that replaces the content of certain page tool action links. Unfortunately, that also concerns corresponding buttons, you indicated to show.
The solution is to remove the corresponding tab messages from the Visual Editor configuration in your LocalSettings.php. So for example:
wfLoadExtension( 'VisualEditor' );
$wgVisualEditorTabMessages['editsource'] = null;
$wgVisualEditorTabMessages['createsource'] = null;
A component containing the personal tools like link to user page and user's talk page, preferences, watchlist, etc. Also shows the new talk notifier, when applicable.
<component type="PersonalTools"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
-
hideNewtalkNotifier
- Deprecated.
- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
If set the newtalk notifier will not be shown.
This attribute has no effect when used inside the NavbarHorizontal component.
This attribute was introduced to keep backwards compatibility. If the PersonalTools component is used, it is recommended to always set this attribute to yes and use an independent NewtalkNotifier component.
-
showEcho
:- Since Chameleon 3.2.0
- Allowed values: String (
icons
|links
) - Default:
icons
- Optional.
Use
icons
to render Echo links as icons that trigger popups (default Echo behavior). When the parent isNavbarHorizontal
the Echo icons will be displayed next to the dropdown. Uselinks
to render Echo links as normal links without popups. -
showUserName
:- Since Chameleon 3.4.0
- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
If set the logged in user's real name (if available) or username will be shown next to the dropdown icon.
This attribute applies only when used inside the NavbarHorizontal component.
- Any modification
The search bar.
<component type="SearchBar"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
-
buttons
:- Allowed values: String (
search
|go
|search go
) - Default:
search go
- Optional.
The buttons that should be shown with the search bar.
- Allowed values: String (
-
placeholder
:- Allowed values: String
- Default: using the MediaWiki search text
- Optional
The placeholder to show in the search field when the user has not enetered anything yet
- Any modification
This component does not output anything. It may be used as a placeholder during development.
<component type="Silent"/>
None.
- Any modification
The wiki's site notice.
<component type="SiteNotice"/>
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
- Any modification
The MediaWiki toolbox contains various links. Some are general links like a link to a list of Special Pages so a user always has a way to access them. Others are page-sensitive links like permalinks, printable links, block links, feed links, and a link to a list of pages linking to the current page.
<component type="Toolbox" />
-
class
:- Allowed values: String
- Default: -
- Optional.
The class (or classes) that should be assigned to the top-level html element of this component.
-
flatten
- Allowed values: Boolean (
yes
|no
) - Default:
no
- Optional.
Whether the list of tools should be flattened, i.e. its items should appear not in a submenu, but as elements of the top structure.
- Allowed values: Boolean (
- Any modification
A modification that allows to hide the parent component if the condition specified by the attributes is fulfilled.
This is a restrictive filter. It will hide the component if all of the attributes match. However, the attributes containing lists of values will match, if one of the values matches.
<modification type="HideFor" permission="edit" namespace="NS_MAIN, NS_TALK" />
This will hide the parent component of the modification if the user has the edit right and the current page is in the 'Main' or 'Talk' namespace.
-
group
- Allowed values: String value
- Example:
group="emailconfirmed, autoconfirmed"
A comma-separated list of user groups for which the component should be hidden.
It is generally not advised to use the group attribute, as it bypasses the permission system. Use permission instead.
-
permission
- Allowed values: String value
- Example:
permission="createpage, createtalk"
A comma-separated list of user permissions for which the component should be hidden.
-
namespace
- Allowed values: String value
- Example:
group="NS_MAIN, NS_TALK"
A comma-separated list of namespaces for which the component should be hidden. The namespaces may be specified as namespace constants or as namespace index numbers.
A modification that allows to show the parent component only if the condition specified by the attributes is fulfilled.
This is a permissive filter. It will show the component if any of the attributes match.
<modification type="ShowOnlyFor" permission="edit" namespace="NS_TALK" />
This will show the parent component of the modification if the user has the edit right or if the current page is in the 'Talk' namespace (or both).
-
group
- Allowed values: Any string
- Example:
group="emailconfirmed, autoconfirmed"
A comma-separated list of user groups for which the component should be shown.
It is generally not advised to use the group attribute, as it bypasses the permission system. Use permission instead.
-
permission
- Allowed values: Any string
- Example:
permission="createpage, createtalk"
A comma-separated list of user permissions for which the component should be shown.
-
namespace
- Allowed values: Any string
- Example:
group="NS_MAIN, NS_TALK"
A comma-separated list of namespaces for which the component should be shown. The namespaces may be specified as namespace constants or as namespace index numbers.
A modification that will ensure that the parent component stays always visible when the user scrolls.
<modification type="Sticky" />
This will make the parent component of the modification stick to the page.
None.