Skin talk:Chameleon

About this board

Separate tab groups in layout for easier CSS

Ypermat (talkcontribs)

Hello !

I work a lot with Chameleon. My main issue is still that the page tools are stored in 3 "tab groups", which I can't separate, to have them wrapped in flex for example.

Is there a way to call them one by one or just "unuse" the tab groups and show all ca items?

Thank you !

Stefahn (talkcontribs)

I second this question. It would be helpful if we could build our own page tool menus.

Ypermat (talkcontribs)
Ypermat (talkcontribs)

Will we get an answer?

Reply to "Separate tab groups in layout for easier CSS"

Page load speed improvements

Makertrainer (talkcontribs)

It seems to me that the chameleon skin is very heavy compared to other skins.

Google Page speed insights shows me that the biggest culprit slowing my website down is load.php, which is 57.4 KiB with the chameleon skin, and only 8.7KiB with Vector.

Is there a way to reduce this size eg by disabling unwanted features?

Reply to "Page load speed improvements"

Layout as a User Preference

Revansx (talkcontribs)

I have all of the layouts enabled with egChameleonExternalStyleModules and I have set "clean.xml" as the site default.

Is there any way to allow users to select a Chameleon layout as a user preference?

Thanks! /Rich

Reply to "Layout as a User Preference"

Problems when upgrading to Chameleon 3.2 or later

Summary by Kghbln

Cross-posted to See discussion over there.

2001:16B8:246A:2400:B174:17D4:3A38:6AD7 (talkcontribs)

Hello all,

a very specific question, but I hope that at least someone is able to help me in fixing a problem which is stopping me to update Chameleon to newer versions.

I'm not that familiar with Mediawiki Skins and I have taken over a customized chameleon skin for our public photo project (one year ago I migrated the skin from chameleon skin 2 to 3).

On Github (patrickfl/RottweilSkin) you can find the source code for an overloaded chameleon skin which is adding some special components for navigation.

This adapted skin is running smooth with MediaWiki 1.35.6 and chameleon 3.1. ("mediawiki/chameleon-skin": "3.1", "scssphp/scssphp": "1.4.1", "mediawiki/bootstrap": "4.5.0").

As soon as I'm updating any of the package versions mentioned before, the skin is getting messed up (font, layout, the colors are still ok) but I do not really know why.

I think it has something to do with the scss stuff or how the resources are loaded: Github patrickfl/RottweilSkin/blob/main/skin.json or Github patrickfl/RottweilSkin/blob/main/src/SkinRottweilSkin.php

Any ideas or hints are really, really welcome.


Thanks a lot.

Kghbln (talkcontribs)

How to get VE edit bar to show on top of fixed nav bar when scrolling down

Revansx (talkcontribs)
  • MW 1.34
  • Chameleon 3.0.1
  • VisualEditor 0.1.1 (74116a7) 18:02, 23 December 2019

I'm using the fixedhead layout and when i edit a long page the VE edit toolbar scrolls under the fixed position nav bar. What changes to the SCSS Variables are required to fix this? Thank you!

FunkyBeats99 (talkcontribs)
Reply to "How to get VE edit bar to show on top of fixed nav bar when scrolling down"

VE toolbar disappears under the chameleon top banner

Revansx (talkcontribs)

Brand new install of:

  • MW 1.34.4
  • Bootstrap 4.5.0
  • Chameleon 3.3.0

and VE editor toolbar disappears under the chameleon top banner when scrolling down a long page in edit mode. Is Chameleon 3.3.0 tested with VE?



Revansx (talkcontribs)

Based on I was able to solve this problem by adding:

.ve-init-mw-desktopArticleTarget-toolbar {
    margin-top: -50px;
    padding-top: 50px;

.ve-ui-toolbar-floating > .oo-ui-toolbar-bar {
    top: 55px !important;

to Mediawiki:Chameleon.css

However, I am still curious how Chameleon can claim 1.35+ compatibility without VE compatibility (since parsoid/VE has been added to MW core in 1.35)

FunkyBeats99 (talkcontribs)

Another solution I found encountering the same issue is to hide the navbar when VE activates / is active / deactivates : .p-navbar, .p-navbar {

(place this CSS in MediaWiki:Common.css or MediaWiki:Chameleon.css)

Reply to "VE toolbar disappears under the chameleon top banner"
DrLulzMD (talkcontribs)

How could I create a new component using the TOC? Would it involve more than just creating a TOC.php under /skins/chameleon/Components?

I'm looking to do something like the below in the xml layout.

	<cell span="10">
		<component type="MainContent"></component>
	<cell span="2">
		<component type="TableOfContents"></component>
F.trott (talkcontribs)

Yes, that should be all that's needed. Although the type and the file name and the class name should all be the same, e.g. TableOfContents in your case. Just make TableOfContents a subclass of Component.php and implement the getHtml() method. Have a look at Silent.php for a minimal implementation.

DrLulzMD (talkcontribs)

Thank you for replying. I'm quite new to php, but do have some understanding of what should be done to achieve the above. In addition to Silent.php is there another subclass .php which I can model that is similar to my goal?

F.trott (talkcontribs)

Any of the other component classes. The simpler ones are maybe PersonalTools or Logo. In principle you just need to return the HTML code of your component. The question is, where to get the HTML for the TOC from. For that you will need to search the MW code base, i.e. find where/how the TOC is built and where (if anywhere) it is stored. If it is stored somewhere, great, just grab it. If not, call the method, that builds it. You will probably also need to suppress integration of the TOC into the page text.

In your component you can get the Skin object by calling $this->getSkin(). From there you can find your way to a number of other relevant object, e.g. for the OutputPage use $skin->getOutput(). Just saw, that OutputPage has the methods enableTOC() and isTOCEnabled(). Maybe search from where these are called.

DrLulzMD (talkcontribs)

Indeed. I was looking at getPersonalTools and getFooterLinks and was hoping there was something similar for toc, but I think not.

So I'll need to implement something that iterates through all available toc elements?

F.trott (talkcontribs)

I don't think so. The TOC is displayed already (in the page text normally), so the code should exist somewhere. You just need to find out where.

FunkyBeats99 (talkcontribs)

It is probably not the cleanest way to do it, and I am no PHP maniac either, but it seems to work:

  • Download Extension:DeToc and follow the installation instructions (it is a really light extension);
  • Create a TableOfContents.php file in the Components folder of the Chameleon skin. It must contain the following:
namespace Skins\Chameleon\Components;
use DeToc;
* TableOfContents class.
* This class extracts the table of contents, normally inside the page text, and makes it a component.
* It uses the DeToc extension
class TableOfContents extends Component {
    public function getToc() {
        $new_body = DeToc::RemoveToc( $this->mSkinTemplate->data[ 'bodycontent' ], $extracted_toc );
        return $extracted_toc;
     * Builds the HTML code for this component
     * @return String the HTML code
    public function getHtml() {
        return '<div id="newtoc">' . $this->getToc() . '</div>';

To use this new "extracted" ToC, you would have to add the component, in the way you want it, to your custom layout, i.e. custom.xml :

<component type="TableOfContents"/>

You would of course need to hide the usual table of contents thanks to CSS by placing these lines in MediaWiki:Common.css or MediaWiki:Chameleon.css :

#toc {
display: none;

This is tested with Chameleon 4.0 but it should work with previous releases.

Reply to "TOC as component type"

How to change color of echo icons?

Krabina (talkcontribs)

I am using a dark navbar where the echo icons do not appear light as the other elements. I tried adding something like

.echo-icons  {
       color: #dee1d2;

to MediaWiki:Common.css, but is has no effect. Any tips?

Krabina (talkcontribs)

also, 'cmln-personal-tools-link' => "#dee1d2", does not have any effect

Revansx (talkcontribs)

I would like to learn how to do this too.

Morne Alberts (talkcontribs)

The Echo icons are either PNG or SVG files (I believe PNG was dropped after MW 1.35). That means you cannot use normal CSS colors. However, there is a hacky solution by using CSS filters, but it won't work on Internet Explorer.

Simplest CSS example to make the icons #dee1d2:

.mw-echo-notifications-badge {
    filter: invert(93%) sepia(9%) saturate(255%) hue-rotate(31deg) brightness(101%) contrast(82%);

If you want to generate other colors, use this link:

You enter your target hex color code and it will generate the filter for you. Sometimes you have to run it multiple times to get a more accurate color, but it will tell you.

Revansx (talkcontribs)

that's genius .. thank you!

Reply to "How to change color of echo icons?"

custom sidebar component with system messages resourceloader skipped

Sen-Sai (talkcontribs)

When you create a custom layout with custom components. For one component ( in this case a sidebar ), we load a system message and parse it. The system message is a page in the wiki with a template. The template calls a parser function (batch file upload). The content is rendered, but the resourceloader does not load any css and js defined in batchfileupload extension.

After some testing, any (parser-)extension that defines js and or css needed when called is ignored when we set this up through a component. When we just call the system message using Int on a page it works fine. Just not from a skin component.

Any suggestions?

mw 1.35.5

php 7.4.25

chameleon 3.4.1

Reply to "custom sidebar component with system messages resourceloader skipped"

CSS issue when editing a textarea with Syntaxhighlight and VE4All

Revansx (talkcontribs)
Issue - If you hard-code a <syntaxhighlight> code block in a page forms textarea and then try to use VEforAll to edit the page with a form, then the code block edit window is 'behind' the visual editor elements for the VEforAll textarea and is inaccessible.

I am logging this here in Chameleon, because the problem does not occur when I switch to vector.

Note - I understand that code block is not listed in the VE4All editing menu, but there are lots of wiki markups that are not available in the VE4All edit toolbar that work .. it would be very nice is code block did too!



Product Version
MediaWiki 1.35.5 (eb8aa69) 15:07, 23 December 2021
PHP 7.4.26 (apache2handler)
MariaDB 5.5.68-MariaDB
ICU 50.2
Lua 5.1.5
Elasticsearch 6.8.10
Product Version
Chameleon 3.4.1
Page Forms 4.9.3 (0248533) 13:49, 27 May 2020
VEForAll 0.2 (1dec158) 23:57, 12 December 202
SyntaxHighlight 2.0 (8d6d7db) 23:57, 12 December 2021
Reply to "CSS issue when editing a textarea with Syntaxhighlight and VE4All"
Return to "Chameleon" page.