professionalwiki / chameleon

Provides a highly flexible and customizable skin using Bootstrap 4

Chameleon skin

Chameleon is a highly customizable MediaWiki skin that uses the Bootstrap framework.

It currently provides five different layouts to chose from. The standard layout features a horizontal navigation menu with dropdowns at the top and a horizontal menu with dropups for the language links at the bottom. Each layout is defined in an XML file and as such easily adaptable to your needs.

Documentation

1. Installation, Update, De-Installation
2. Customization
3. Release Notes
4. Testing
5. How to contribute
6. Credits
7. Licenses

Contact

Paid professional support is avilable via Professional Wiki, the maintainer of Chameleon. This includes installation, customization, and theme development.

For bug reports and feature requests, please see if it is already reported on the list of open bugs. If not, report it. Also see the Contribute section for instructions on bug reporting.

The community support channels include the Chameleon skin talk page on MediaWiki.org, the MediaWiki IRC channel (Server: libera.chat Channel: #mediawiki), and the MediaWiki mailing list.

chameleon's Issues

ChameleonTemplate::maklistItem is called too often and takes too much time

ChameleonTemplate::maklistItem is called on nearly each request which in turns calls Linker::tooltipAndAccesskeyAttribs which on my machine cost a round 68ms for each call.

One edit request produced 40 ChameleonTemplate::maklistItem calls with a totaling time of 2200 ms.

Enable conditional layouts

Example use case would be to enable support for 'full width' vs 'page with sidebar' page templates.

A simple way to allow that would be to add a 'class' parameter to cells and rows.
That would also allow for better styling of templates in general.

A more complex way would be to be able to give an ID to rows and set up a mechanism to trigger one row or another based on the visibility of a CSS ID for example. The CSS ID visibility could be set by default in the site stylesheet or set one a page by page basis using a CSS extension.

Xdebug performance analysis for Chameleon skin 1.1.2-alpha

I added only two screen dumps from the Xdebug tool but it should give an indication about the current bottlenecks in Chameleon.

MediaWiki 1.25alpha (6da1720)
Chameleon 1.1.2-alpha (9dfebbe)
Bootstrap 1.0.1 (1a12db2)

PS: Above screen dumps are made using WinCacheGrind on Windows.

[0] https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc?hl=en
[1] http://xdebug.org/docs/profiler
[2] http://naveensnayak.wordpress.com/2013/06/26/setting-up-kcachegrind-in-ubuntu/

resource loading from '/vendor/twbs/bootstrap' forbidden since T180237

Running chameleon with MW LTS (1.27) and noticed, that since 1.27.4, the glyphicons are replaced by default symbols (which mostly results in boxes). Did some digging and found out that since [0], the vendor directory has an .htacess with "deny from all". Removing this file restores expected behaviour but I recon, trying to place the twbs/bootstrap files somewhere "below" /extensions/Bootstrap would be a better option.

Cheers,
Tobi

[0] https://phabricator.wikimedia.org/T180237

Compatibility with Page Form's wgPageFormsRenameEditTabs

I'm using the "Page Forms" extension, which adds an "Edit with form" tab for editing a page with its associated form instead of editing the source code.

Page Forms provides the $wgPageFormsRenameEditTabs setting, which renames "Edit with form" to "Edit" and "Edit" to "Edit source". That way, the default edit action is to edit with form.

This doesn't work completely when Chameleon is used: While the "Edit with form" link in the toolbox dropdown menu is indeed renamed to simply "Edit" the pencil icon (i.e. the default "Edit" button) still triggers a source edit. The desired behavior would be that the pencil icon triggers a form edit and that the menu contains a "Edit source" item.

This is on MediaWiki 1.28.1, Page Forms 4.1, and Chameleon 1.5.

Windows install: bad instructions in guide

https://github.com/cmln/chameleon/blob/master/docs/installation-windows.md
Composer no have shell menu now, is possible update the guide?

Thank you

CI is broken

It seems that PHP 5.3 can no longer be handled. Probably PHP 7.0 is a good alternative. Moreover I think that test should utilize MW 1.27.x and perhaps still MW 1.23.x

Proposal canvas

A. I want to make the proposal to exchange (only) the categories-dropdown with a canvas sidebar, which is activated with a click or (faster for users) with a mouseover on a list icon (can be stabilized by css transition 100ms).

Examples : https://bootstrapious.com/p/bootstrap-sidebar

B. There is no frame around the embedded TOC which would have a better contrast with a frame like the one around the images. (Also were a blue navbar an alternative.)

Composer install is missing skin.json file

Hi Folks, and thanks a ton for all of your efforts on the Chameleon skin!

While upgrading my MW, I decide to try to hunt down a horizontal menu skin.
After following the instructions for installing it (no errors running composer), I just attempted to
php update.php and ended up with the following error:

PHP Fatal error: Uncaught exception 'Exception' with message '/var/www/vhosts/wiki.lti.org/public/skins/chameleon/skin.json does not exist!' in /var/www/vhosts/wiki.lti.org/public/includes/registration/ExtensionRegistry.php:107

It looks like BootStrapSkin had a similar issue several months back.

Any thoughts?

Add a component that renders wikitext

Add a component that renders wikitext.

That would allow to have standard texts (e.g additional menus, toc, info boxes) on pre-defined grid-positions for all wiki pages without the need for dedicated components.

Fonts in Echo fly-out seems enlarged

Fonts in the fly-out seems to be enlarged compared to Special:Notifications display.

MediaWiki 1.28.0-alpha (507a6aec)
PHP 5.6.8 (apache2handler)
MySQL 5.6.24
ICU 54.1
Chameleon 1.4-alpha (c1dd899)
Echo – (4b137b3)

Auto-open menus

This js will open the menus on mouse-over (way better ux) and still work with touch-screens:

/* Open menus on mouse over, don't do anything on touch-devices. */
$(function() {
    window.IsTouchDevice = false;
    window.addEventListener('touchstart', function onFirstTouch() {
        window.IsTouchDevice = true;
        window.removeEventListener('touchstart', onFirstTouch, false);
    }, false);

    $(".dropdown").hover(
            function(){ if (!window.IsTouchDevice) $(this).addClass('open'); },
            function(){ if (!window.IsTouchDevice) $(this).removeClass('open'); }
    );
});

Add component Toolbox

There should be a dedicated component for toolbox links. This would avoid the awkward solution with attributes for NavbarHorizontal and ToolbarHorizontal.

Clean layout does not show navbar if not logged in

If the clean layout is set as the default, when a user visits the site for the first time they cannot navigate anywhere or even login. The ShowOnlyFor is set to edit, maybe the default should be read.

Bug "Menu"-component ignores "modification"

Hello,
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="" />
</component>

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

from Stephan G.:
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.

Installing Chameleon on a shared host

Hi,

I'm running MediaWiki 1.30 on a shared host and I can't install Composer. Is there an alternative way to use the skin?

Thanks!

Bootswatch LESS Modules mess everything up

I followed the guide exactly and even used the Amelia LESS files available on the website here: https://bootswatch.com/2/amelia/

Chameleon itself is running fine, I can change layouts and all that, but as soon as I want to use something from Bootswatch (which was the main reason I wanted Chameleon so bad) everything breaks.

A small example: https://i.imgur.com/70gD8Qp.png

Here is what I put at the end of my LocalSettings.php file, I tried it both with and without the first section since I didn't know if it was required for Chameleon or not. Didn't make a difference, unfortunately.

$wgHooks['SetupAfterCache'][]=function(){
	\Bootstrap\BootstrapManager::getInstance()->addAllBootstrapModules();
	return true;
};

$wgHooks['ParserAfterParse'][]=function( Parser &$parser, &$text, StripState &$stripState ){
	$parser->getOutput()->addModuleStyles( 'ext.bootstrap.styles' );
	$parser->getOutput()->addModuleScripts( 'ext.bootstrap.scripts' );
	return true;
};

$egChameleonExternalStyleModules = array(
    __DIR__ . '/amelia-variables.less' => $wgScriptPath,
    __DIR__ . '/amelia-bootswatch.less' => $wgScriptPath,
);

Here's an output of Special:Version
https://spit.mixtape.moe/view/9acb5f6f

Turn pencil into "Edit with form"

In the past $sfgRenameEditTabs = true; worked for Chameleon to replace the Edit button by an Edit-with-form button.

With current versions of PageForm this does not work anymore.

Image popup dialog is under the div

Ok, I am not sure if this is your issue, or an issue with bootstrap controls plugin, but will start with you.

This used to work. We have an image shows using [[File:{{{name}}}.png|border|150px]]. When we click on the image to bring a popup, the "Visit Source" and "Close" buttons are behind the div that is stopping clicks, so you can't visit the source or close the popup.

Here is a sample page: https://ddocompendium.com/w/Half-Elf_Tree

This used to work, but we recently upgraded both the chameleon skin, and the bootstrap controls, and then it stopped working, so I don't know which is causing it.

add an adaptable NavbarHorizontal/PageTools Component

caveat:
As of now, PageTools display an edit button with the (for the page) primary edit action and an ellipsis for further operations. In some cases this hides important functionality to the (probably) inexperienced user. Adding buttons manually however does not take into account dynamical options like for instance ve-edit, formedit, etc.

proposed solution:
create a component inheriting from NavbarHorizontal/PageTools and allow for an adaption attribute in the xml structure file to configure, which actions should be shown directly and which remain in the dropdown.

Customizing edit button link?

The little pen that links to the source editor in the navhead layout is cool, but is there any way I can change that to open another editor?

In my case I am using https://github.com/yaronkoren/TinyMCE and would like it to link to
&action=tinymceedit
instead.

Thanks for the help.

Installation dependency problem : justinrainbow/json-schema

Hi !

I've just fresh installed mediawiki 1.29.1 and created a composer.local.json file with the chameleon-skin requirement.

But the command composer update "mediawiki/chameleon-skin" throws a problem of dependency conflict :

testserver:/home/test$ composer update "mediawiki/chameleon-skin"
> ComposerHookHandler::onPreUpdate
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

Problem 1: The requested package justinrainbow/json-schema (installed at 5.2.0, required as ~3.0) is satisfiable by justinrainbow/json-schema[5.2.0] but these conflict with your requirements or minimum-stability.

The justinrainbow/json-schema ~3.0 requirement can be found in the composer.json file.

With IE a big white space is displayed between personal tools and search bar

the height of <ul class="p-personal-tools list-inline pull-right"> is computed by IE as 1009 px. Only when connected

Other extensions used : Echo/Flow

Make the footer stick to the bottom

See

• SemanticMediaWiki/Stragula#7
• https://www.mediawiki.org/wiki/Topic:U6xkopwo70235tn9
• https://stackoverflow.com/questions/17966140/twitter-bootstrap-3-sticky-footer

Component Grid: Add attribute to switch to fluid layout

Currently Grid always uses the container class. There should be an attribute to use container-fluid instead.

Remove auto activation

For the next major release, please consider to remove Chameleon.php from the autoload.files section of composer.json. Therefore users will need to enable the skin explicitly by using wfLoadSkin within the LocalSettings.php.

Chameleon incompatible to FlaggedRevs

"The fixedhead layout that I have running on my wiki won't properly show the {...} drop down or the user drop down. The only time I can get it to do so is when I am on the search page. ... It turns out the flaggedrevs extension was breaking something."

see https://www.mediawiki.org/wiki/Topic:Sxpip5bcq9yik3et

How to set inverse navbars?

Good afternoon! I've only just discovered this project but LOVE it. Such a vast improvement to the normal media wiki styling! Can't wait to get a few things ironed out so I can update the site for everyone.

One of those things to iron out: how to set the inverse navbars? Seems like it should be doable in the layouts… or maybe an override in LocalSettings.php… or via css/less?

I think it's probably simple, but I just can't figure out how to do it!

VE progress bar doesn't show up when editing or saving a page

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.

(See https://www.mediawiki.org/wiki/Topic:Taqfzcwm2t3i8i8y)

Installing chameleon into skins/ fails

Hi, when installing this skin into skins/ it's failing with " Error from line 85 of /srv/mediawiki/w/skins/Chameleon/Chameleon.php: Class 'Skins\Chameleon\Hooks\SetupAfterCache' not found"

Improve Echo(Notifications) discoverability

A user has to actively inform him/herself about possible notifications which lessens discoverability (compared with how the Vector skin informs the user).

vs.

Lua Modules not running when using Chameleon skin

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.: https://en.wikipedia.org/wiki/Template:Clickable_button_2) 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: http://csdms.colorado.edu/wiki/Template:Clickable_button_2 (default skin is customized, and Lua works, buttons show. Here an image when displaying same page using Chameleon skin: http://csdms.colorado.edu/wiki/File:ChameleonSkin-NoButtons.png).

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

Versions: (http://csdms.colorado.edu/wiki/Special:Version)

Chameleon 1.5
Mediawiki 1.27.0
PHP 5.6.28
Lua 5.1.5

(https://www.mediawiki.org/wiki/Topic:Tgem0muvdnj5ocv0)

How to use flatten Properly in NavMenu component

The documentation on flatten is somewhat vague and I am having difficulty getting it to work. Using navhead.xml as is.
I have tried adding a semi-colon list to MediaWiki:Skin-chameleon-navmenu-flatten.
I have tried putting the list directly into flatten="Main Page;"

If I am using MediaWiki:Skin-chameleon-navmenu-flatten, what should the value of flatten="" be?

Some examples in the documentation would be useful.

Right to Left Support

There are a lot of problems with the Chameleon skin (v.1.7.1) when I change the wiki language to a rtl language. Please redesign the codes and styles considering two solutions mentioned in:
Manual:Skinning_Part_3#Right-to-left_(RTL)_languages
Thanks a lot.

Full qualified class names as component type

#43 needs documentation.

• What does it do.
• How to use it.

Semantic Text Annotator

The annotation button disappears when the Semantic Text Annotator is installed and the "clean" layout is being used.

Sticky z-index

.sticky and .mw-indicators have the same z-index value:

.sticky {
	z-index: 1;
}

.mw-indicators {
    float: right;
    line-height: 1.6;
    font-size: 13px;
    position: relative;
    z-index: 1;
}

Template library?

Is there a library of templates that use bootstrap and hence fit better in chameleon than the default mediawiki?

Image resizing

This is likely a mediawiki question. Is there a way to render smaller size of images when showing on a mobile device such as a phone?

Add component for sticky TOC

Should play nice with

• mobile devices
• Navbar on stickyhead and fixedhead layout

Composer package requirement didn't work

Hello,

I get
'Problem 1
- The requested package justinrainbow/json-schema == 5.2.0.0 could not be found.'

I solved it by manually installing the package
'composer require justinrainbow/json-schema'

Fixes for Echo not enabled?

I noticed this strange overlap of the user drop-down with the Echo notification which makes it quite hard to use:

It seems there are some specific fixes in this skin for Echo and Visual Editor, but they are not enabled by default?

Thanks for the help!

Add page status indicators

MediaWiki now natively supports page status indicators: icons (or short text snippets) usually displayed in the top-right corner of the page. They have been in use on Wikipedia for a long time, implemented using templates and CSS absolute positioning.
Basic wikitext syntax: [[File:Foo.svg|20px]]
Usage instructions: https://www.mediawiki.org/wiki/Help:Page_status_indicators
Adjusting custom skins to support indicators: https://www.mediawiki.org/wiki/Manual:Skinning#Page_status_indicators

Can have Chameleon these too?

Echo-notification needs a css-fix

This is totally Echos fault, but probably easier to fix on this side…

Don’t move the echo-notifier to the left in vertical layout:
#pt-notifications-message .mw-echo-notifications-badge {margin-left: 0em !important;}

Add component LanguageLinks

There should be a dedicated component for language links. This would avoid the awkward solution with attributes for NavbarHorizontal and ToolbarHorizontal.

Component SearchBar: Provide attribute to only show on 'Go' button

The SearchBar currently shows a 'Go' button and a fulltext 'Search' button.
It should be possible to hide the fulltext 'Search' button.

Page scrolls automatically with sticky Navbar

I created a custom layout template with a sticky horizontal navbar. Whenever a scroll down the page in Chrome, the page starts slowly scrolling back up.

Component PersonalTools: Remove NewtalkNotifier

Personal tools should not show the NewtalkNotifier. This should be put into the layout separately where needed.

Add classes to elements on the navbar

Classes should be added to the HTML elements on the navbar.

Selections like $('.navbar-collapse > .navbar-nav')[1] are very error prone as they depend on the order of the HTML elements. If it had a class / id, it would me much easier to select (and customize).

Elements on the NavBar have an ID, e.g. n-mainpage-description or ca-talk.
These should additionally be available as classes, but otherwise... what's missing?

Tooltips not working properly

MW 1.28.0 + Chameleon

Tooltips are currently an opt-in for Bootstrap (https://getbootstrap.com/docs/3.3/javascript/#tooltips) and to enable this plugin, I added the following to MediaWiki:Common.js,

/* Tooltip */
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});

This seems to be working most of the time, but it can also lead to javascript conflicts, with the console spitting out an error message of the type

TypeError: $(...).tooltip is not a function

Whenever this error message is brought up on the web, comments usually to point to a conflict between jQuery (UI) and Bootstrap (minified or otherwise), which rely on the same function name. It could be the way and order in which the scripts are called, but it need not be.

Bootstrap does offer its "noConflict()" clause, but this is reported to have no effect in this case. Also, it admits on the same page that third-party plugins like jQuery UI may not play along nicely. One user on StackOverflow has gone as far as suggesting that $.widget.bridge could be used to rename jQuery's version of the tooltip. Some relevant discussion here: twbs/bootstrap#6303

What do you think is the best approach here?