Skin talk:Chameleon

Previous page history was archived for backup purposes at Skin talk:Chameleon/LQT Archive 1 on 2015-07-10.

I've installed Chameleon on my wiki and everything is working great. It's a fantastic skin. The only issue I'm seeing is that when viewing on mobile I have two hamburger menu buttons.

One has this element:

<nav class="p-navbar collapsible small bg-darker" role="navigation" id="mw-navigation">

Which doesn't work when clicked on.

And one with:

<nav class="p-navbar collapsible" role="navigation" id="mw-navigation-hn470628vf" style="position: relative; left: auto; width: 412px;">

Which does work and is the one that is supposed to be displayed.

MediaWiki version: 1.41.0

PHP version: 7.4.33

Chameleon version: 4.3.0

Bootstrap (extension) version: 4.6.2

I did have MobileFrontEnd installed previously but I've disabled that and still have this issue.

# wfLoadExtension( 'MobileFrontend' );

# $wgDefaultMobileSkin = 'minerva';

I've tried explicitly setting this to Chameleon as well:

# $wgDefaultMobileSkin = 'chameleon';

But that didn't fix the issue either. Not sure what to try at the moment. Any advice appreciated.

I don't know which layout you're using, but I got this same problem using stickyhead.

In your xml template file, add collapsible="no" to the first component:

<component type="NavbarHorizontal" class="small bg-darker" collapsible="no">

Or delete the entire first horizontal navbar if you don't use it.

Chameleon 4.3.0 , How to make the search results show text with page image ?

If you use vector (2022) skin, when you type a text in the search bar, if the text match the title, it will show the results with the page image as well . But in Chameleon skin, the search results will not show the page image.

It's is possible to customise the search bar behave like the vector (2022) skin ?

MediaWiki version: 1.36.2

PHP version: 7.4.33 (fpm-fcgi)

Chameleon version: 4.0.0

Bootstrap (extension) version: 4.5.0

Hello. I finally installed dependencies on Chameleon, however there is something wrong. I noticed that the theme for my skin is not loading properly. On my wiki skin appears to lack the navbar and background colors that Chameleon is supposed to have. I chose those versions of Chameleon and Bootstrap because I thought it was suitable with the version of MediaWiki I am currently using on my wiki family.

I read the Customization document and applied the theme by downloading the SCSS files from Bootswatch's website, and then uploading them to my skin's /themes directory and adding them to my Localsettings.php. I also added layouts to my Localsettings.php.

I tried doing everything I could, but my skin looks stripped down to basics. See this image: https://ibb.co/1X5VXGM

Here is the code that I put in my Localsettings.php:

$egChameleonLayoutFile= __DIR__ . '/skins/Chameleon/layouts/standard.xml'; $egChameleonLayoutFile= __DIR__ . '/skins/Chameleon/layouts/navhead.xml'; $egChameleonLayoutFile= __DIR__ . '/skins/Chameleon/layouts/clean.xml';

$egChameleonExternalStyleModules = [ __DIR__ . '/skins/Chameleon/resources/styles/themes/darkly.scss' => 'afterFunctions',

__DIR__ . '/skins/Chameleon/resources/styles/themes/darkly_bootswatch.scss' => 'afterMain',

];

Supposing you also included wfLoadExtension('Bootstrap') and wfLoadSkin('chameleon'), it does look like something fails, which may happen if for instance, there is an error in one of your scss files, such as a reference to a variable that doesn't exist. You wouldn't be the first to have problems with a Bootswatch theme: https://github.com/ProfessionalWiki/chameleon/issues/86. Does it work without egChameleonExternalStyleModules?

P.S. You are somehow pointing to three different layouts, loading one and then overriding it with another, so you end up with clean.xml. Is that the layout you intended? Anyway, just pick one.

I removed the layouts and the egChameleonExternalStyleModules, and then I reloaded my Chameleon skin page. However, it still shows up with a stripped down, simple-looking appearance instead of what it is supposed to look like. Anything to add?

If you followed the instructions to the letter, adhered to the correct order of appearance, etc., that shouldn't happen. I can't help you on the basis of the information you provided.

What do you mean by "following the instructions to the letter?" I don't understand what that meant.

Don't worry. I'm simply referring to the instructions for installing and configuring Chameleon, as found over on Github. If you have access to error/warning logs, maybe there's something in there that looks relevant.

Hi,

I'm familiar with Chameleon and am using it on my site - https://wiki.michaelzfreeman.org/

However I've wanted to enable mobile view. I tried "cmln-collapse-point" in LocalSettings.php but it does not seem to do anything. What settings files should I be looking at here ? Is it the Bootstrap stuff ?

Cheers

Michael

Hi Michael,

What do you mean with "enable mobile view"? There are already default breakpoints that cause some styling to change when viewed on smaller screens.

$cmln-collapse-point is the specific point at which the default navbar will collapse (i.e. menu links get hidden). There is an example of changing that variable on https://github.com/ProfessionalWiki/chameleon/blob/master/docs/customization.md, but that does not enable/disable anything, it just changes the specific point.

Hi Morne,

On my mobile I get a standard desktop page with very small text. I have to turn my mobile to the side for the text to become readable. So I'm looking to detect when the page is being loaded on a mobile device and having much larger text.

I tried a lot to install the skin with the composer but all my wiki files are in web-hosted server and I cannot locally run composer. Is there an option to download the skin, Bootstrap extension and everything without the composer?

Am I doing something wrong? I have MW 1.41 and Chameleon 4.2.1 and every single page get this error:

Deprecated: Use of Hooks::run was deprecated in MediaWiki 1.35. [Called from Skins\Chameleon\Chameleon::prepareQuickTemplate in /Library/WebServer/Documents/w/skins/chameleon/src/Chameleon.php at line 112] in/Library/WebServer/Documents/w/includes/debug/MWDebug.phpon line382

--User:Aquatiki

I am finding scant documentation on the Chameleon cache support. Only CACHE_NONE is mentioned in the doc.

Is this Chameleon-specific config setting in any way linked to Mediawiki cache support, or is it independent?

So if I have Redis running and defined for my wiki, can I define $egScssCacheType='redis'; in my LocalSettings.php?:

$wgObjectCaches['redis'] = [
    'class'                => 'RedisBagOStuff',
    'servers'              => [ '127.0.0.1:6379' ],
    // 'connectTimeout'    => 1,
    // 'persistent'        => false,
    // 'password'          => 'secret',
    // 'automaticFailOver' => true,
];

I have not tested this, but I suspect it should work like MediaWiki's normal caching, since this used MediaWiki's ObjectCache class internally.

BTW, this is from the SCSS dependency, not directly in Chameleon: https://github.com/ProfessionalWiki/SCSS/blob/master/src/ResourceLoaderSCSSModule.php#L148-L159

Could someone explain how to change menu icons? The docs describe how to change existing SCSS variables and icons seem to be defined by the variable $cmln-icons. However, since $cmln-icons uses a map-merge function, I think the methods described in the docs aren't directly applicable. I've tried several different definitions and approaches, including adding another map-merge function, but nothing's worked so far.

What happens when you just define your overrides, or extras, in your SCSS file?

$cmln-icons: (
    go-btn: fas fa-something-else,
    my-icon: foo-bar
);

The map-merge function takes the original empty, or overridden, $cmln-icons as the second parameter, meaning whatever you define will override the defaults.

G'day Morne, I've just tried this again and your suggested solution does work (thank you!); however, it's only part of the answer. When importing the SCSS file, it appears that the file's position parameter must be set to "beforeVariables" and not "afterVariables" (the latter being the generally suggested method in the docs). At least this works for me; setting the position to beforeVariables produces the expected result, while setting it to afterVariables makes the site look like no variable definitions are being loaded at all. I assume positioning the file before other variable definitions is required due to the map-merge function. Anyway, thanks again for your suggestion, which does work when combined with the right positioning.

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 !

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

Cross-posted here : https://github.com/ProfessionalWiki/chameleon/discussions/336

Will we get an answer?

Up !

I'm using the "Clean" layout (./layouts/clean.xml) which provides a very nice system of dropdown menus for all the sections of the Mediawiki:Sidedar, but the default behavior is that the menus "stay open" until you either click on an option or click away somewhere else and I'd prefer that they vanish as soon as you navigate away from them. Does anyone have any hints about what I should grep for in the skin folder to change the default behavior?

Since this is an intentional design decision in Bootstrap, overriding this behavior might be slightly difficult.

Here is a crude solution that closes the dropdown (and dropup) the moment you leave either the trigger link or the menu itself. This is not forgiving, so the moment you go 1 pixel over the edge it closes immediately. Because of this you also need to remove some margins, otherwise you "leave" the dropdown before you even reach the menu.

MediaWiki:Chameleon.js

$( '.dropdown, .dropup' ).on( 'mouseleave', function( e ) {
    $( '[data-toggle="dropdown"]', this ).dropdown( 'hide' );
});

MediaWiki:Chameleon.css

.dropdown .dropdown-menu {
    margin-top: 0;
}
.dropup .dropdown-menu {
    margin-bottom: 0;
}