Skin talk:Chameleon

Jump to: navigation, search

About this board

Edit description
By clicking "Add topic", you agree to our Terms of Use and agree to irrevocably release your text under the CC BY-SA 3.0 License and GFDL
ClemFlip (talkcontribs)

Hi Friends,

Is it possible to put the TOC (table of content) in a <div> that stays fix while scrolling?

Like what you can see in this page:

Do you know how can I do that using Chameleon?


F.trott (talkcontribs)

There is no component that could do this for all pages right now. If you only need it for a few pages, here is a workaround that kinda works (with some caveats):

First you'll need some Javascript. Add the following to your LocalSettings.php:

$wgHooks['ParserAfterParse']['addModules']=function( Parser &$parser, &$text, StripState &$stripState ){
	$parser->getOutput()->addModuleScripts( 'skin.chameleon.jquery-sticky' );
	return true;

Then all pages that should have a sticky TOC should have the following structure:

<div class="row">
<div class="sticky col-lg-3 pull-right">__TOC__</div>
<div class="col-lg-9">

I did not test what happens when you use this on mobile devices. And it does not play nice with stickyhead and fixedhead layouts.

F.trott (talkcontribs)

I added this as an enhancement request:

However, I am currently very slowly updating Chameleon to Bootstrap 4, so better do not hold your breath. It may take some time to add any new components.

Reply to "TOC in a fix div"

Which files to copy from a local install

Cavila (talkcontribs)

There are some of us (without shell access) who first need to install Chameleon locally and then transfer the required files to the server. I was just wondering if you could make a list of files other than those in the skins folder, so mostly dependencies, that should be copied over.

F.trott (talkcontribs)

You could just go to an empty directory and do a composer require mediawiki/chameleon-skin. However, while that would build the complete file structure, you would still have to deal with the autoloader somehow. I think your best bet is to really work with a complete local clone of your MW installation.

Cavila (talkcontribs)

Thanks and wow, that's what I call a lightning reply! Option 2 sounds like the best way to go.

Reply to "Which files to copy from a local install"
Cavila (talkcontribs)

After upgrading to MW 1.28 and Chameleon 1.5, I found that the layouts for sticky and fixed headers are behaving differently. The headers stay fixed for a while, but disappear when scrolling further down the page. Can I adjust this to get the former behaviour?

F.trott (talkcontribs)

Do you have a link?

Cavila (talkcontribs)

I'm afraid I don't have anything to show you, but I can see that there's an event that changes "position:fixed" to "position:absolute" on page scroll. It could be something specific on my side so I will have a closer look first.

Cavila (talkcontribs)

Solved! It was probably a specific css change that caused this, but I'm unable to pinpoint it. Whatever it was, the problem did not recur since I thoroughly revised my css/less files.

Reply to "Stickyhead"

deprecated ResourceLoader module "jquery.ui.position

Legaulph (talkcontribs)

I'm getting these errors on the QueryForm for MediaWiki 1.28.0 Semantic MediaWiki 2.4.4 and page forms 4.0.2

VM2638:70 This page is using the deprecated ResourceLoader module "jquery.ui.position".
(anonymous) @ VM2638:70
VM2638:81 This page is using the deprecated ResourceLoader module "jquery.ui.widget".
(anonymous) @ VM2638:81
VM2638:65 This page is using the deprecated ResourceLoader module "jquery.ui.core".
Please use "mediawiki.ui.button" or "oojs-ui" instead.
(anonymous) @ VM2638:65
load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:176 Exception in module-execute in module ext.pageforms.main:
load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:176 TypeError: initFunction is not a function TypeError: initFunction is not a function
    at HTMLDocument.eval (eval at <anonymous> (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:4), <anonymous>:151:553)
    at fire (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:45)
    at Object.add [as done] (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:45)
    at jQuery.fn.init.jQuery.fn.ready (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:49)
    at eval (eval at <anonymous> (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:4), <anonymous>:174:168)
    at mw.loader.implement.css (eval at <anonymous> (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:4), <anonymous>:175:400)
    at Object.<anonymous> (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:161)
    at fire (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:45)
    at Object.add [as done] (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:45)
    at Object.always (load.php?debug=false&lang=en&modules=jquery%2Cmediawiki&only=scripts&skin=chameleon&version=1156l11:46)
F.trott (talkcontribs)

Are you sure this is Chameleon-related?

Legaulph (talkcontribs)

No I sent an email to SMW user group as well

Reply to "deprecated ResourceLoader module "jquery.ui.position"

Dropdown menus not working on Mediawiki 1.28

T0lk (talkcontribs)

I could use some help troubleshooting this. Here is my site. None of the drop downs work, for example when using fixedhead.xml clicking the icon for "Account" should show a menu, but does nothing. Everything was fine in 1.27.

F.trott (talkcontribs)

It's a known (and fixed) problem. Try using the dev-master version (or wait for a release).

T0lk (talkcontribs)

Thank you. Updating using composer require mediawiki/chameleon-skin "1.x-dev" fixed the problem. (talkcontribs)


I'm using MW 1.27.1 and Chameleon 1.4.

MediaWiki logo (neither the default logo nor my customized logo) doesn't link to any page. I want the logo link to main page. I've checked the source code of a wiki site and there's no href attribute in the in the a tagː (talkcontribs)

sorry sourcecode got cut of

here is the complete sourcecodeː

StasR (talkcontribs)

Release Notes Chameleon 1.4

Released on 20-Sep-2016


   Logo: add addLink attribute to Logo component (talkcontribs)


I've added attribute addLink = "yes" in logo component in the xml format file. Logo is now linking to main page.

F.trott (talkcontribs)

Oops, sorry. The default should have remained "yes" when the attribute was not present. I fixed it just now and will include it in Chameleon 1.5.

Lua Modules appear not to run in Mediawiki when using Chameleon skin

Albert Ke (talkcontribs)


I noticed that Lua programs running in the mediawiki are not working properly when using the Chameleon skin. For example the module “clickable buttons 2” that create buttons with text (see e.g.: won’t create any clickable buttons when using chameleon skin.

However, as soon as a different skin is chosen, the buttons work fine.

See copied above example at: (default skin is customized, and Lua works, buttons show. Here an image when displaying same page using Chameleon skin:

Any idea what a work around could be to get Lua modules to work with the Chameleon skin?

Versions: (

Chameleon 1.5

Mediawiki 1.27.0

PHP 5.6.28

Lua 5.1.5



F.trott (talkcontribs)

Thanks for the report! Could be as simple as some JS files not being loaded, but I need to investigate.

I opened an issue for this:

F.trott (talkcontribs)

In any case I noticed on your site that a SecurityError is raised which seems to come from the HeaderTabs extension. Could you try to disable that extension for a moment and see if it helps?

Albert Ke (talkcontribs)

Thanks for the prompt reply. I disabled the HeaderTabs extension. Reloaded the pages in different browser, logged in to get the skin to Chameleon 1.5, same thing, buttons disappear as soon as using the Chameleon skin. I'll put the HeaderTabs extension back on, but will install a newer version (if there is one) soon to see if that solves the security error.

Thanks, Albert.

F.trott (talkcontribs)

I think I know what's happening. At some point I removed the call to include MW legacy CSS. I think this call is now also used for mw.ui.button, the CSS module containing the button formatting rules. So I'll have to reintroduce that call and get rid of the legacy stuff in a different way.

Give me a few days, I'm not home right now.

Albert Ke (talkcontribs)

Totally fine, already happy that you opened an 'issue' and are on it. Thanks!, Albert.

Reply to "Lua Modules appear not to run in Mediawiki when using Chameleon skin"

maintenance/update.php - Error: your composer.lock file is not up to date.

Summary by Spas.Z.Spasov

Edit composer.json and move Chameleon definition: "mediawiki/chameleon-skin": "~1.0" from "require": {...} section into "require-dev": {...} section. After that run composer update. Now maintenance/update.php must be working and Chameleon 1.5 also must.

It installs Chameleon as a development package, though, so better don't use composer update --no-dev in the future.

Spas.Z.Spasov (talkcontribs)

Chameleon skin 1.5 causes an error in maintenance/update.php script:

MediaWiki 1.28.0 Updater

mediawiki/chameleon-skin: 1.5.0 installed, 1.* required.

Error: your composer.lock file is not up to date. Run "composer update" to install newer dependencies

Nor composer update neither composer update --no-dev helps.

I know something in composer.lock must be changed but I don't have an idea what exactly.

Please help!

F.trott (talkcontribs)

You should not manually change composer.lock

What is the output of composer update?

Spas.Z.Spasov (talkcontribs)

composer update:

> ComposerHookHandler::onPreUpdate
Loading composer repositories with package information
Updating dependencies (including require-dev)
  - Installing composer/spdx-licenses (1.1.4)
    Loading from cache
  - Installing jakub-onderka/php-parallel-lint (v0.9.2)
    Loading from cache
  - Installing squizlabs/php_codesniffer (2.6.0)
    Loading from cache
jakub-onderka/php-parallel-lint suggests installing jakub-onderka/php-console-highlighter (Highlight syntax in code snippet)
monolog/monolog suggests installing aws/aws-sdk-php (Allow sending log messages to AWS services like DynamoDB)
monolog/monolog suggests installing doctrine/couchdb (Allow sending log messages to a CouchDB server)
monolog/monolog suggests installing ext-amqp (Allow sending log messages to an AMQP server (1.0+ required))
monolog/monolog suggests installing ext-mongo (Allow sending log messages to a MongoDB server)
monolog/monolog suggests installing graylog2/gelf-php (Allow sending log messages to a GrayLog2 server)
monolog/monolog suggests installing mongodb/mongodb (Allow sending log messages to a MongoDB server via PHP Driver)
monolog/monolog suggests installing php-amqplib/php-amqplib (Allow sending log messages to an AMQP server using php-amqplib)
monolog/monolog suggests installing php-console/php-console (Allow sending log messages to Google Chrome)
monolog/monolog suggests installing raven/raven (Allow sending log messages to a Sentry server)
monolog/monolog suggests installing rollbar/rollbar (Allow sending log messages to Rollbar)
monolog/monolog suggests installing ruflin/elastica (Allow sending log messages to an Elastic Search server)
symfony/yaml suggests installing symfony/console (For validating YAML files using the lint command)
sebastian/global-state suggests installing ext-uopz (*)
phpunit/phpunit-mock-objects suggests installing ext-soap (*)
phpunit/php-code-coverage suggests installing ext-xdebug (>=2.2.1)
phpunit/phpunit suggests installing phpunit/php-invoker (~1.1)
wikimedia/avro suggests installing ext-gmp (Large integer support for 32-bit platforms.)
Writing lock file
Generating optimized autoload files

composer update once again:

> ComposerHookHandler::onPreUpdate
Loading composer repositories with package information
Updating dependencies (including require-dev)
Nothing to install or update
Generating optimized autoload files

composer update --no-dev:

> ComposerHookHandler::onPreUpdate
Loading composer repositories with package information
Updating dependencies
  - Removing justinrainbow/json-schema (3.0.1)
  - Removing wikimedia/avro (v1.7.7)
  - Removing phpunit/phpunit (4.8.24)
Writing lock file
Generating optimized autoload files
F.trott (talkcontribs)

Hmm, that looks good and should normally pass. Two things you could try:

  1. Uninstall and re-install Chameleon completely OR
  2. Run update.php with parameter --skip-external-dependencies
Spas.Z.Spasov (talkcontribs)

Uninstall and re-install Chameleon doesn't solved this issue.


I have edited composer.json and moved Chameleon definition from "require": {...} section into "require-dev": {...}. Next step was composer update. Now maintenance/update.php works and Chameleon 1.5 also works.

Strange. Cheers! :)

F.trott (talkcontribs)

That'll work as well. It installs Chameleon as a development package, though, so better don't use composer update --no-dev in the future.

Spas.Z.Spasov (talkcontribs)

Yes, I found it. Thanks.

How to center items within NavbarHorizontal

2 (talkcontribs)


I want to have components centered in a NavbarHorizontal.

This is achieved if I change container-fluid to container in buildNavBarOpeningTags but I don't want to change the source code.

How to do that ?


F.trott (talkcontribs)

Not sure, that using container would make a difference. Do you have an example?

Reply to "How to center items within NavbarHorizontal"
Waanders (talkcontribs)

Why isn't the Read-tab displayed in the Visual Editor when using the Chameleon-skin? It is there when using the Vector-skin.

Now there is no easy way to cancel editing the page (as far as I can see).

We use Visual Editor with NavHead layout.

Waanders (talkcontribs)

Found the way to cancel editing mode: use Esc-key.

Spas.Z.Spasov (talkcontribs)

I'm using Navhead. In the layout file - navhead.xml, I changed next row:

<component type="PageTools" position="right" hideSelectedNameSpace="yes"/>

like that:

<component type="PageTools" position="right" hideSelectedNameSpace="no"/>

After that in the drop-down menu (...) appears, not exactly "Read"-tab, but namespace name which does the same.

Reply to "Read-tab when using Visual Editor"