Skin talk:Chameleon

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

Tracked with issue 439 and fixed with release 4.4.2

Hi, I tested Chameleon version >=4.4.0 in my existing wiki, but all my page TOCs are hidden with this new version.

I could see that this is due to a piece of scss coming from toc.scss file from Chameleon:

// Hide page TOC to prevent page content shift.

@include media-breakpoint-up(md) {

#bodyContent #toc {

display: none;

}

}

My understanding is that this toc.css should only apply when the new experimental TOC component is used in the layout, but it seems to apply regardless of this choice.

Did I miss something?

I have created issue 439 on GitHub for this. For now, I labeled it as a question that may be subject to change.

@LMischler: Do you have a link to the wiki where you are experiencing the issue?

This is fixed in the new 4.4.2. It requires triggering a cache update: https://github.com/ProfessionalWiki/chameleon/blob/master/docs/customization.md#triggering-a-cache-update

Hi, I was wondering if the Chameleon skin is compliant with the WCAG2.1.

Any advice is appreciated.

I think MediaWiki itself is not fully WCAG 2.1 compliant.

Tracked with issue 418 on GitHub

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.

Brilliant PatrikRoy. This did the trick. Thank you.

See also https://github.com/ProfessionalWiki/chameleon/issues/418

When I try and include bootstrap code (like a button) to my page the code is displayed on the page but not the button. I have loaded the extension in my LocalSettings.php file. Is there something else I need to do?

This is what is displayed on my page:

{{#bootstrap_button: target | my_link.com }}

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