Skin talk:Chameleon

Jump to: navigation, search

About this board

Kghbln (talkcontribs)

I am banging my head against the wall for many hours [sic!] now however I completely fail to somehow adapt the SearchBar.

Does anybody know how to make it fluid, i.e. have it with a width of 95% on all screens desktop and mobile screens. Usually something like the following CSS helps:

box-sizing: border-box;
display: block;
width: 100%;
max-width: 95%;

However in this case it is completely useless.

The xml for this is standard:

	<cell span="12">
		<component type="SearchBar" class="pull-right" buttons="search"/>

Moreover I get a bluish shadow when the search box is clicked on. Here I have not even been able to detect where the color comes from needless to say how to change it.

Any hint or help will be appreciated.

Kghbln (talkcontribs)

Sometimes it helps to rant. ;)

I have just come up with the following CSS which is ok for the time being:

.form-inline .input-group {
	width: 100%;
.p-search.pull-right {
	box-sizing: border-box;
	width: 100%;
	display: block;

Without setting the first class to 100% it will not work. I am loosing the pull right here, but in my case this is hopefully acceptable.

Still I think there must be a better solution.

F.trott (talkcontribs)

Well, fluid mode is an attribute of the grid, not of a single component. So to have just the search box fluid and nothing else you'd have to put it in a grid of its own.

Also, the 12-column cell containing the search box is itself contained in a 9-column cell, which obviously limits its width.

Kghbln (talkcontribs)

This does not work since a grid cannot be the child of a row. The solution I posted turns out to be borked too since the search box aligns left for whatever reason. What I am trying to achieve is to have the search box at 100% of the whole cell which is a child of row. I just do not get it how to do it. Currently the search box is only about 5cm wide on a desktop screen so I figured that it will be nice to have a wider one. The wider one however does not work on a narrow screen.

F.trott (talkcontribs)

I got the impression that you want it stretched over the whole page. To stretched it over one cell only, try this:

.p-search, .p-search .form-inline .input-group {
  width: 100%;
.p-search .form-inline .input-group .input-group-btn {
  width: 0;
Kghbln (talkcontribs)

No I indeed only wanted to stretch over one cell. Wow, this works cool! Admittedly I would never have come up with this. Great, a day of frustration comes to a good end!

Kghbln (talkcontribs)

To self answer the second question about the border color and border shadow of the box when one clicks into the search box. Finally found it:

.form-control:focus {
    border-color: #91c800;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(145,200,0,0.6);

I used to be in a grump and now I am in a fluff. :)

F.trott (talkcontribs)
Reply to "How to make the SearchBar fluid"

FYI this skin works nearly out of the box with VisualEditor

T0lk (talkcontribs)

Extension:VisualEditor says it will only work with a limited number of skins, however it can use Chameleon too. On my wiki the only thing that doesn't work is the progress bar when you edit or save a page that doesn't show up.

F.trott (talkcontribs)

Thanks for the info! I'll look into it.

Chameleon is indeed supposed to work with VE. The only problem is that VE is (still) under development with frequent changes to the user interface, so it is somewhat of a moving target when it comes to integrating it.

I opened a task here:

T0lk (talkcontribs)

Just want to update that the progress bar now appears and VisualEditor works as expected. Not sure what changed, but upgrades to Core 1.29.2 plus the latest VE extensions were installed recently.

Reply to "FYI this skin works nearly out of the box with VisualEditor"
Kitsguru (talkcontribs)

I install Chamelion and Extension:Bootstrap today and have it working the way I want - well for the most part.

When I logout the Navbar and footers completely disappear. I am relatively new to mediawiki but php, js and css savvy. I am at a complete loss as to what is happening.

The sidebar appears fine if I switch to vector when logged out. Any insights would be appreciated.

Product Version
MediaWiki 1.29.1
PHP 5.6.31 (apache2handler)
MariaDB 10.2.9-MariaDB
Semantic MediaWiki 2.5.5
F.trott (talkcontribs)

Do you by any chance use the layout "clean"?

Kitsguru (talkcontribs)

Yes I am using the clean layout - and I figured out the issue in that I have permissions set that you must be a logged in to edit.

I cloned the clean layout and changed the ShowOnlyFor to read. Now works as I expected.

I also filed and issue on github to set the default to read instead of edit. Not much point hiding all the navigation if not logged in. Unless you know how to get to the login page.

Reply to "Navbar disappears when not logged in"

"Menu"-component ignores "modification"

3 (talkcontribs)


apparently the modification is ignored when used with Menu-components:

This code should hide the menu for users that have no edit-rights:

<component type="Menu" message="riskmanagermenue">

<modification type="ShowOnlyFor" permission="edit" namespace="" />


Unfortunately this modification is ignored; I tried it with "HideFor", but without success.

Is this a known bug?

Thank you for this great skin!!!


F.trott (talkcontribs)

Modifications for the moment only work on top-level components. The problem is that the modifications have to be applied by the parent of the component they are acting on. This is implemented for Structure and Cell, but not yet for others, like NavbarHorizontal.

It would be great if you could add an issue at

Stephan (talkcontribs)


Reply to ""Menu"-component ignores "modification""

mw-headline and non-clickable links

Summary by Cavila

Fixes have been merged

Cavila (talkcontribs)

Hi Stephan, I sometimes found that headings with the mw-headline class caused links above it to become non-clickable. It may have been due to an attempt to prevent anchor links from being buried beneath the upper navigation menu, creating a margin of 50px between the top of the page and the anchor link (it's quite possible that the issue occurs only when the font you're using for subheadings has a generous margin of its own). Anyway, whatever the exact cause of the problem, there's an easy CSS fix for that I think, which is to substitute "block" for "inline-block" - unless it creates other issues I'm not aware of.

.layout-fixedhead h1 >, .layout-stickyhead h1 >, .layout-clean h1 >,

.layout-fixedhead h2 >, .layout-stickyhead h2 >, .layout-clean h2 >,

.layout-fixedhead h3 >, .layout-stickyhead h3 >, .layout-clean h3 >,

.layout-fixedhead h4 >, .layout-stickyhead h4 >, .layout-clean h4 >,

.layout-fixedhead h5 >, .layout-stickyhead h5 >, .layout-clean h5 >,

.layout-fixedhead h6 >, .layout-stickyhead h6 >, .layout-clean h6 > {

    content: "";

    display: inline-block;

    height: 50px;

    margin-top: -50px;


F.trott (talkcontribs)

Would be great if you could submit a pull request on Github.

Cavila (talkcontribs)

Will do when I find the time, probably later this week.

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.

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.

ClemFlip (talkcontribs)

Thanks a lot. It works for me! :)

Do you know if it's possible to add the class="active" to the TOC item while scrolling.

The idea is to add style to the menu item that is activated while scrolling. In the same way that the bootstrap website:


F.trott (talkcontribs)

Depends on how much coding you are prepared to do. It should not be too hard to create some JS script to do this. A widget might do the trick, but I don't have any experience with widgets at all, so can't help you there. If I had to do it, I would probably just implement it as a mini extension using the ResourceLoader to load the script.

Of course, you could ideally also add this to Chameleon directly and provide a pull request on Github.

Reply to "TOC in a fix div"

Turn pencil into "Edit with form" [Resolved]

Stefahn (talkcontribs)

Hi Stephan,

on my wikis I use SMW and SemanticForms extensively. Thus I use $sfgRenameEditTabs = true; (see here) and "Edit with form" becomes "Edit".

However this doesn't seem to work in Chameleon. The "Edit with form" link is still in the "..."-menu (titled as "Edit" because of $sfgRenameEditTabs = true;).

How can I make the pencil icon the "Edit with form" link and move the "Edit source" link to the "..."-menu?

F.trott (talkcontribs)

In principle it should work. There's a special case in the code for SF, but there may have been changes in recent versions of SF.

Stefahn (talkcontribs)

I checked your commits and found out that your fix was after the release of 1.3. I was still at 1.3. Now I cloned the master and the issue is resolved :)

BTW: If you release a new official version (1.4) I could update the theme by going into "/mediawiki/skins/chameleon/" and run composer update.
If I want to run the latest master version I need to use git clone (or git fetch).
Is that right? (talkcontribs)

The issue has resurfaced due to changes in Page Forms (previously SemanticForms). See for a discussion.

F.trott (talkcontribs)

From the issue on Github: As a workaround use both $wgPageFormsRenameEditTabs=true and $sfgRenameEditTabs=true to make this work.

Reply to "Turn pencil into "Edit with form" [Resolved]"

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"

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"