WikiEditor toolbar is missing

Question

I am running MediaWiki 1.23 with a custom skin under Chrome. I have done as instructed in the MediaWiki page about WikiEditor(Extension:WikiEditor).

Below, I provided the lines I've added after the end of the default configuration in LocalSettings.php:

# End of automatically generated settings.
# Add more configuration options below.

require_once( "$IP/skins/Fresh/Fresh.php" );
require_once( "$IP/extensions/WikiEditor/WikiEditor.php" );

$wgDefaultUserOptions['usebetatoolbar'] = 1;
$wgDefaultUserOptions['usebetatoolbar-cgd'] = 1;
$wgDefaultUserOptions['wikieditor-preview'] = 1;

Afterwards, I verified that WikiEditor is already installed by checking Special:Version. It returned a positive, showing WikiEditor in its list of installed Extensions.

I tried playing with User Preferences, however the settings shows that my account enables the WikiEditor by default.

I also changed skins to check if the set default has any issues. The editor shows up when I use the default skins provided out-of-the-box by MediaWiki, however not with the custom skin I am using.

No error or log has been found with the console.

To add, I have accessed the site on both normal Chrome (cleared cache) and Incognito.

Answer 1

This is a bug in mediawiki. I am getting it on v1.24.2, in all browsers.

If you click around on the tool bar, the clickable spots are all there, just the graphics for them are not showing. The buttons are done with a sprite (one graphic with all the buttons on it, shifted around to show the correct button at the right place). If you're using a browser that allows you to inspect CSS, right-click one of the invisible buttons and choose to 'inspect element', and you'll see that the background-image CSS instruction is getting overridden, so the button graphics are all a no-show.

Hopefully the mediawiki team will mend this soon. But meanwhile, here's an effective workaround:

Log in to your wiki as someone with Administrator privileges (WikiSysop or whatever).

Then go to the /MediaWiki%3ACommon.css page of your wiki, which is where you can add your custom style to apply to all pages in your site. And to that wiki page, add this and save it:

/***** Overcome mediawiki bug whereby the WikiEdit sprite is a no-show *****/
.wikiEditor-toolbar-spritedButton {
  background-image: linear-gradient(transparent, transparent), url("/extensions/WikiEditor/modules/images/toolbar/button-sprite.svg?v=001") !important;
  background-position: 0px 0px; /* This gets over-ridden with inline style to move sprite into view of relevant part */
  background-repeat: no-repeat !important;
}

That forces the button images sprite to show, and all is good.