Skin talk:Chameleon

Jump to navigation Jump to search

About this board

Z929669 (talkcontribs)

Hi,

My next hurdle is to figure out how to change my logo via Gadget CSS. This should work using a base MW skin under different languages per the manual at Manual:$wgLogo:

.mw-wiki-logo:lang(ar) {
	background-image: url( /logos/ar.png ) !important;
}

... so it should be doable in the same way via Gadget:/Common:/User.css. The question is: is this doable under the Chameleon skin, or do I need to mess with php?

Reply to "Change Logo By Theme"

Navbar Styling Fails Via Gadget (v3.1.0)

1
Z929669 (talkcontribs)

UPDATE2: I was able to fully resolve the issues using more specific CSS selectors to get around CSS prioritization diffs. It was relatively simple code, but painful to find it.

UPDATE: Looks like I can tweak the CSS in the Gadget to acheive the same result as the ingected CSS, so revising my question: Why do CSS rules have different impact when loaded by Gadget vs injection by egChameleonExternalStyleModules ? Assume it's a resourceloader issue? Read on for context ...

The following works for customizing layout and css, including the navbar and all other components:

$egChameleonLayoutFile= __DIR__ . '/step_layout.xml';

$egChameleonExternalStyleVariables = [
    'container-max-widths' => '(sm: 540px, md: 720px, lg: 960px, xl: 2560px)'
];

$egChameleonExternalStyleModules = [
__DIR__ . '/step_classic.css' => 'afterVariables'
];
  1. Injection of modules doesn't work consistently for styling anything, especially when using SCSS (example, customizing the default _light.scss and injecting that does not work, even if using a subset of these variables).
  2. Injecting CSS this way (NOT using any variables) totally works, even for the navbar
  3. My attempts to use Gatget CSS works for all BUT the navbar components, even when using simple CSS as in #2
  4. Still need to test using MediaWiki:Common.css, but that doesn't suit my needs (I want users to have a choice and set for themselves)
  5. User:Username/skinname.css method is not an option, so I'm not testing this

Since the injection methods are unreliable and don't really work, I'm hoping that the skin devs or someone else can help me to understand how to get around these final barriers (navbar styling fail via Mediawiki CSS methods). I need three three theme Gadgets for this skin, otherwise, I will need to lock it down to a single theme using CSS injection as above.

Thanks in advance.

Reply to "Navbar Styling Fails Via Gadget (v3.1.0)"
Z929669 (talkcontribs)

Can someone recommend a 'good' way to change the site-wide font family used by Chameleon? I want to swap out the "fa-*" fonts with Montserrat and Roboto web fonts. Unfortunately, the customization guidance mentions "changing fonts ...", but not a word about this in the doc.

Any help appreciated ~z929669 Talk 14:27, 23 November 2020 (UTC)

F.trott (talkcontribs)
F.trott (talkcontribs)

Oh, you want to change the icon fonts. That is a bit more involved and would probably require a patch.

Z929669 (talkcontribs)

Thanks, I will look at changing $font-family-base. If I want to use Montserrat for headings and Roboto for body, will that work or am I limited to one font using that variable?

Don't I need to redifine @font-face as well in the CSS I assume and somehow override the defaults set in the SCSS files for fa-brand stock fonts?

I don't need to change the icon fonts, but it would be nice to alter their coloring in the CSS, which I haven't been able to do. I'm creating custom layouts and both light and dark theme variants, so icon coloring is something that should also change.

Great skin BTW ;)

Stefahn (talkcontribs)

Funnily enough I use exactly the same fonts on my wiki. I embedded them in my custom.scss with @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&display=swap'); and then set the headings to Montserrat and the body font-family to Roboto.

Since I use custom icons, I would be interessted in getting rid of the fa-solid-900.woff2 and fa-brands-400.woff2, too....

Z929669 (talkcontribs)

Wow, that was super simple. Glad it was easy for you to provide the exact code even ... great minds ... ;)

148.252.129.14 (talkcontribs)

That is great, I was looking to change fonts too!

Once you do @import url(...) in custom.scss how do you specify which font is used when?

Stefahn (talkcontribs)

You're welcome :)
@148.252.129.14: You just use body { font-family: 'Roboto', sans-serif; } for example.

Z929669 (talkcontribs)

This is what I did in my custom CSS ... can do this using Gadget/Common.css or any other methods of injecting via your skin. I'm changing some of the defaults set by my skin (customized Chameleon), so this is just an example. your own tweaks will likely be necessary for your setup:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif !important;
    font-size: 1rem !important;
}

/* Changes the default font used for MediaWiki headings to Montserrat: */
#content h1, 
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
 {
    color: #CCCCCC !important;
    font-family: 'Montserrat', sans-serif !important;
}

#content h1, 
#content h2 {
    border-bottom: 1px solid #a2a9b1 !important;
}

#content h1 {
    font-size: 2.1rem !important;
}

#content h2 {
    font-size: 1.6rem !important;
}

#content h3 {
    font-size: 1.4rem !important;
}

#content h4 {
    font-size: 1.3rem !important;
}

#content h5 {
    font-size: 1.2rem !important;
}

#content h6 {
    font-size: 1.1rem !important;
}
85.255.234.218 (talkcontribs)

Thank you! :)

85.255.234.218 (talkcontribs)

just to understand, looking at

$font-family-base

the default value, according to the link from @F.trott, is:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"


Does that mean that Roboto is loaded by default?

F.trott (talkcontribs)

I don't think so. It just gives the order of preference, so if Roboto is not available it will try Helvetica next.

85.255.234.218 (talkcontribs)

understood - thank you

Reply to "Changing Fonts"

Undefined index: id in LangLinks.php on line 91

1
T0lk (talkcontribs)

Everything is working as expected, so I only noticed this from looking at my error.log. It's reporting:

[error] 1672#1672: *100850 FastCGI sent in stderr: "PHP message: PHP Notice:  Undefined index: id in /public_html/mediawiki/skins/chameleon/src/Components/NavbarHorizontal/LangLinks.php on line 91PHP message:" while reading response
 header from upstream, client: 127.0.0.1, server: ---, request: "GET /Special:RecentChanges HTTP/1.0", upstream: "fastcgi://unix:/var/run/php/php7.4-fpm.sock:", host:
"---"

Here is the file: https://github.com/ProfessionalWiki/chameleon/blob/master/src/Components/NavbarHorizontal/LangLinks.php


And here is the code:

[ 'link-class' => 'nav-link '.$linkItem['id'] , 'tag' => 'div' ] );


It's part of this section as a whole:

        private function getLinkListItems() {
                $this->indent( 2 );

                $skinTemplate = $this->getSkinTemplate();

                $listItems = [];
                foreach ( $skinTemplate->data[ 'language_urls' ] as $key => $linkItem ) {
                        if ( isset( $linkItem['class'] ) ) {
                                $linkItem['class'] .= ' nav-item';
                        } else {
                                $linkItem['class'] = 'nav-item';
                        }
                        $listItems[] = $this->indent() . $skinTemplate->makeListItem( $key, $linkItem,
                                [ 'link-class' => 'nav-link '.$linkItem['id'] , 'tag' => 'div' ] );
                }

                $this->indent( -2 );

                return $listItems;
        }


MediaWiki: 1.35

Chameleon 3.1.0 (401e8bf)

Reply to "Undefined index: id in LangLinks.php on line 91"
LCavalini (talkcontribs)

Hi!

I've installed Chameleon skin on an Apache server and it works fine, but I'm facing problems with this skin on a Nginx server. When I try to access any page, the browser can't load CSS and says zzz.ext.bootstrap "was blocked due to mime type ( text/html ) mismatch ( x-content-type-options nosniff )". I had no problem with other skins and extensions. Everything works perfectly, except for Chameleon skin.

F.trott (talkcontribs)

I don't have any experience with nginx at all. What you could try to do is to disable x-content-type-options nosniff in nginx.conf and see, what the server is actually sending. It could be that it does not send CSS, but some HTML formatted error message,

LCavalini (talkcontribs)

Thank you for your reply! I've tried to disable "x-content-type-options nosniff" and tested many settings, but it didn't work. If I find a solution, I'll post here.

Z929669 (talkcontribs)

This is nginx throwing an error that is a result of the true error. Try setting a valid index index.php index.html; in your server or location block. The error is almost certainly a result of a simple general config like this. ~z929669 Talk 22:14, 19 November 2020 (UTC)

Reply to "Nginx zzz.ext.bootstrap"

The skin works OOtB, but Layouts do not

1
Z929669 (talkcontribs)

SOLVED: I posted too soon ... missed that __DIR__ is evidently relative to "LocalSettings.php", and I have mine pointing to a custom config in the directory above, so I just had to add my wiki directory to the beginning of the path spec. Sorry!

Installed and set Chameleon without issue. Here's my relevant config:

### Bootstrap
wfLoadExtension( 'Bootstrap' );

### Bootstrap Components
wfLoadExtension( 'BootstrapComponents' );

## Chameleon layouts
wfLoadSkin( 'chameleon' );
#$egChameleonLayoutFile= __DIR__ . '/skins/chameleon/layouts/clean.xml';
#$egChameleonLayoutFile= __DIR__ . '/skins/chameleon/layouts/fixedhead.xml';
#$egChameleonLayoutFile= __DIR__ . '/skins/chameleon/layouts/navhead.xml';
#$egChameleonLayoutFile= __DIR__ . '/skins/chameleon/layouts/standard.xml';
#$egChameleonLayoutFile= __DIR__ . '/skins/chameleon/layouts/stickyhead.xml';

Looks good. BUT, uncommenting any of the layout options gives me the following error (the paths and file names are accurate, and all permissions, ownership, and SELinux settings are not the problem):

MediaWiki internal error.
 
 Original exception: [85c7041d451c5f96045b1ee8] /wikidev/Main_Page   RuntimeException from line 108 of /srv/sites/_wikidev/skins/chameleon/src/ComponentFactory.php: Expected an accessible /srv/sites/skins/chameleon/layouts/stickyhead.xml layout file
 Backtrace:
 #0 /srv/sites/_wikidev/skins/chameleon/src/ComponentFactory.php(60): Skins\Chameleon\ComponentFactory->setLayoutFile()
 #1 /srv/sites/_wikidev/skins/chameleon/src/Chameleon.php(191): Skins\Chameleon\ComponentFactory->__construct()
 #2 /srv/sites/_wikidev/skins/chameleon/src/Chameleon.php(177): Skins\Chameleon\Chameleon->getComponentFactory()
 #3 /srv/sites/_wikidev/includes/skins/SkinTemplate.php(322): Skins\Chameleon\Chameleon->setupTemplateForOutput()
 #4 /srv/sites/_wikidev/skins/chameleon/src/Chameleon.php(165): SkinTemplate->prepareQuickTemplate()
 #5 /srv/sites/_wikidev/includes/skins/SkinTemplate.php(127): Skins\Chameleon\Chameleon->prepareQuickTemplate()
 #6 /srv/sites/_wikidev/includes/skins/SkinTemplate.php(144): SkinTemplate->generateHTML()
 #7 /srv/sites/_wikidev/includes/OutputPage.php(2615): SkinTemplate->outputPage()
 #8 /srv/sites/_wikidev/includes/MediaWiki.php(947): OutputPage->output()
 #9 /srv/sites/_wikidev/includes/MediaWiki.php(960): MediaWiki->{closure}()
 #10 /srv/sites/_wikidev/includes/MediaWiki.php(543): MediaWiki->main()
 #11 /srv/sites/_wikidev/index.php(53): MediaWiki->run()
 #12 /srv/sites/_wikidev/index.php(46): wfIndexMain()
 #13 {main}
 
 Exception caught inside exception handler: [85c7041d451c5f96045b1ee8] /wikidev/Main_Page   RuntimeException from line 108 of /srv/sites/_wikidev/skins/chameleon/src/ComponentFactory.php: Expected an accessible /srv/sites/skins/chameleon/layouts/stickyhead.xml layout file
 Backtrace:
 #0 /srv/sites/_wikidev/skins/chameleon/src/ComponentFactory.php(60): Skins\Chameleon\ComponentFactory->setLayoutFile()
 #1 /srv/sites/_wikidev/skins/chameleon/src/Chameleon.php(191): Skins\Chameleon\ComponentFactory->__construct()
 #2 /srv/sites/_wikidev/skins/chameleon/src/Chameleon.php(177): Skins\Chameleon\Chameleon->getComponentFactory()
 #3 /srv/sites/_wikidev/includes/skins/SkinTemplate.php(322): Skins\Chameleon\Chameleon->setupTemplateForOutput()
 #4 /srv/sites/_wikidev/skins/chameleon/src/Chameleon.php(165): SkinTemplate->prepareQuickTemplate()
 #5 /srv/sites/_wikidev/includes/skins/SkinTemplate.php(127): Skins\Chameleon\Chameleon->prepareQuickTemplate()
 #6 /srv/sites/_wikidev/includes/skins/SkinTemplate.php(144): SkinTemplate->generateHTML()
 #7 /srv/sites/_wikidev/includes/OutputPage.php(2615): SkinTemplate->outputPage()
 #8 /srv/sites/_wikidev/includes/exception/MWExceptionRenderer.php(153): OutputPage->output()
 #9 /srv/sites/_wikidev/includes/exception/MWExceptionRenderer.php(65): MWExceptionRenderer::reportHTML()
 #10 /srv/sites/_wikidev/includes/exception/MWExceptionHandler.php(106): MWExceptionRenderer::output()
 #11 /srv/sites/_wikidev/includes/exception/MWExceptionHandler.php(185): MWExceptionHandler::report()
 #12 /srv/sites/_wikidev/includes/MediaWiki.php(576): MWExceptionHandler::handleException()
 #13 /srv/sites/_wikidev/index.php(53): MediaWiki->run()
 #14 /srv/sites/_wikidev/index.php(46): wfIndexMain()
 #15 {main}
Reply to "The skin works OOtB, but Layouts do not"

[GlobalTitleFail] MessageCache::parse called with no title set.

1
Eddie K Smith (talkcontribs)

I get this error in when I look at the debug log. Doesn't seem to be a big issue, but it is the only error in the log. Does anyone know why I am getting this or if there is a title to be set, what title would that be?


[GlobalTitleFail] MessageCache::parse called with no title set.

#0 /var/www/html/mediawiki/includes/language/Message.php(1258): MessageCache->parse(string, NULL, boolean, boolean, LanguageEn)

#1 /var/www/html/mediawiki/includes/language/Message.php(889): Message->parseText(string)

#2 /var/www/html/mediawiki/includes/language/Message.php(920): Message->toString(string)

#3 [internal function]: Message->__toString()

#4 /var/www/html/mediawiki/includes/skins/Skin.php(2234): htmlspecialchars(Message)

#5 /var/www/html/mediawiki/includes/skins/Skin.php(2347): Skin->makeLink(integer, array, array)

#6 /var/www/html/mediawiki/includes/skins/BaseTemplate.php(262): Skin->makeListItem(string, array, array)

#7 /var/www/html/mediawiki/skins/chameleon/src/Components/PersonalTools.php(56): BaseTemplate->makeListItem(string, array)

#8 /var/www/html/mediawiki/skins/chameleon/src/Components/Structure.php(54): Skins\Chameleon\Components\PersonalTools->getHtml()

#9 /var/www/html/mediawiki/skins/chameleon/src/Components/Container.php(53): Skins\Chameleon\Components\Structure->getHtml()

#10 /var/www/html/mediawiki/skins/chameleon/src/Components/Structure.php(54): Skins\Chameleon\Components\Container->getHtml()

#11 /var/www/html/mediawiki/skins/chameleon/src/Components/Container.php(53): Skins\Chameleon\Components\Structure->getHtml()

#12 /var/www/html/mediawiki/skins/chameleon/src/Components/Structure.php(54): Skins\Chameleon\Components\Container->getHtml()

#13 /var/www/html/mediawiki/skins/chameleon/src/Components/Container.php(53): Skins\Chameleon\Components\Structure->getHtml()

#14 /var/www/html/mediawiki/skins/chameleon/src/Components/Structure.php(54): Skins\Chameleon\Components\Container->getHtml()

#15 /var/www/html/mediawiki/skins/chameleon/src/Components/Container.php(53): Skins\Chameleon\Components\Structure->getHtml()

#16 /var/www/html/mediawiki/skins/chameleon/src/Components/Structure.php(54): Skins\Chameleon\Components\Container->getHtml()

#17 /var/www/html/mediawiki/skins/chameleon/src/Components/Container.php(53): Skins\Chameleon\Components\Structure->getHtml()

#18 /var/www/html/mediawiki/skins/chameleon/src/Components/Structure.php(54): Skins\Chameleon\Components\Container->getHtml()

#19 /var/www/html/mediawiki/skins/chameleon/src/ChameleonTemplate.php(50): Skins\Chameleon\Components\Structure->getHtml()

#20 /var/www/html/mediawiki/includes/skins/SkinTemplate.php(129): Skins\Chameleon\ChameleonTemplate->execute()

#21 /var/www/html/mediawiki/includes/skins/SkinTemplate.php(144): SkinTemplate->generateHTML()

#22 /var/www/html/mediawiki/includes/OutputPage.php(2615): SkinTemplate->outputPage()

#23 /var/www/html/mediawiki/includes/MediaWiki.php(947): OutputPage->output(boolean)

#24 /var/www/html/mediawiki/includes/MediaWiki.php(960): MediaWiki->{closure}()

#25 /var/www/html/mediawiki/includes/MediaWiki.php(543): MediaWiki->main()

#26 /var/www/html/mediawiki/index.php(53): MediaWiki->run()

#27 /var/www/html/mediawiki/index.php(46): wfIndexMain()

#28 {main}


Thank you

Reply to "[GlobalTitleFail] MessageCache::parse called with no title set."

Error installing using composer

1
89.158.122.186 (talkcontribs)

Fatal error: Uncaught Error: Class 'SCSS\ResourceLoaderSCSSModule' not found in /home/customer/www/vegwiki.org/public_html/includes/resourceloader/ResourceLoader.php:499 Stack trace: #0 /home/customer/www/vegwiki.org/public_html/includes/OutputPage.php(490): ResourceLoader->getModule('zzz.ext.bootstr...') #1 /home/customer/www/vegwiki.org/public_html/includes/OutputPage.php(533): OutputPage->filterModules(Array, NULL, 'styles') #2 /home/customer/www/vegwiki.org/public_html/includes/OutputPage.php(555): OutputPage->getModules(true, NULL, 'mModuleStyles', 'styles') #3 /home/customer/www/vegwiki.org/public_html/includes/OutputPage.php(2949): OutputPage->getModuleStyles(true) #4 /home/customer/www/vegwiki.org/public_html/includes/OutputPage.php(3153): OutputPage->getRlClient() #5 /home/customer/www/vegwiki.org/public_html/includes/skins/Skin.php(690): OutputPage->getBottomScripts() #6 /home/customer/www/vegwiki.org/public_html/includes/skins/SkinTemplate.php(456): Skin->bottomScripts() #7 /home/customer/www/vegwiki.org/public in /home/customer/www/vegwiki.org/public_html/includes/resourceloader/ResourceLoader.php on line 499


- does anyone know why this is happening?

Reply to "Error installing using composer"

mediawiki 1.35 blank page enabling it

1
Sancelot (talkcontribs)

I have this messagen cirrussearch is enabled in my setup I don't know if it is related

[Fri Oct 16 14:08:45.083135 2020] [php7:error] [pid 7084] [client ::1:33532] PHP Fatal error:  Uncaught Error: Call to protected method BaseTemplate::makeSearchInput() from context 'Skins\\Chameleon\\Components\\SearchBar' in /var/www/w/skins/chameleon/src/Components/SearchBar.php:73\nStack trace:\n#0 /var/www/w/skins/chameleon/src/Components/Structure.php(53): Skins\\Chameleon\\Components\\SearchBar->getHtml()\n#1 /var/www/w/skins/chameleon/src/Components/Container.php(54): Skins\\Chameleon\\Components\\Structure->getHtml()\n#2 /var/www/w/skins/chameleon/src/Components/Structure.php(53): Skins\\Chameleon\\Components\\Container->getHtml()\n#3 /var/www/w/skins/chameleon/src/Components/Container.php(54): Skins\\Chameleon\\Components\\Structure->getHtml()\n#4 /var/www/w/skins/chameleon/src/Components/Structure.php(53): Skins\\Chameleon\\Components\\Container->getHtml()\n#5 /var/www/w/skins/chameleon/src/Components/Container.php(54): Skins\\Chameleon\\Components\\Structure->getHtml()\n#6 /var/www/w/skins/chameleon/src/Components/Structure.php(53): Skins\\Chameleon\\Components\\Container->getHtml()\n#7 /var/www/w/skins/chameleon/src/Compon in /var/www/w/skins/chameleon/src/Components/SearchBar.php on line 73, referer: http://localhost/index.php/Sp%C3%A9cial:Pr%C3%A9f%C3%A9rences

Reply to "mediawiki 1.35 blank page enabling it"

I'm struggling to setup the Bootstrap extension and Chameleon skin on Mediawiki 1.35

2
YousufSSyed (talkcontribs)

I'm running mediawiki on Windows with Xampp. I installing the Chameleon skin by putting the folder in the extensions folder and adding wfLoadSkin( 'Chameleon' ); to localSettings. I installed Bootstrap with the Windows instructions , and added wfLoadExtension( 'Bootstrap' ); to localSettings. Chameleon doesn't work whether or not I use a premade XML layout nor my custom one (which works on Mediawiki 1.34.2). I get this output when loading pages:


Fatal error: Uncaught Error: Call to protected method BaseTemplate::getSidebar() from context 'Skins\Chameleon\Components\NavMenu' in C:\Users\Yousuf\Desktop\xampp\htdocs\mediawiki\skins\chameleon\src\Components\NavMenu.php:51 Stack trace: #0 C:\Users\Yousuf\Desktop\xampp\htdocs\mediawiki\skins\chameleon\src\Components\NavbarHorizontal\NavMenu.php(49): Skins\Chameleon\Components\NavMenu->getHtml() #1 C:\Users\Yousuf\Desktop\xampp\htdocs\mediawiki\skins\chameleon\src\Components\NavbarHorizontal.php(204): Skins\Chameleon\Components\NavbarHorizontal\NavMenu->getHtml() #2 C:\Users\Yousuf\Desktop\xampp\htdocs\mediawiki\skins\chameleon\src\Components\NavbarHorizontal.php(187): Skins\Chameleon\Components\NavbarHorizontal->buildNavBarElementFromDomElement(Object(DOMElement)) #3 C:\Users\Yousuf\Desktop\xampp\htdocs\mediawiki\skins\chameleon\src\Components\NavbarHorizontal.php(155): Skins\Chameleon\Components\NavbarHorizontal->buildAndCollectNavBarElementFromDomElement(Object(DOMElement), Array) #4 C:\Users\Yousuf\Desktop\xampp\htd in C:\Users\Yousuf\Desktop\xampp\htdocs\mediawiki\skins\chameleon\src\Components\NavMenu.php on line 51


Bootstrap Installation method 2 doesn't work either, and for Installation method 1, entering in composer COMPOSER=composer.local.json composer require --no-update mediawiki/bootstrap:~4.0returns Command "=composer.local.json" is not defined (despite composer.local.json existing in my mediawiki directory if that helps). How can I get the Chameleon skin working on Mediawiki 1.35?

YousufSSyed (talkcontribs)

I fixed it, I think it there was a version mismatch between Bootstrap and Chameleon. What I did was in composer.json located in the mediawiki directory, change my required composer packages from

"mediawiki/chameleon-skin": "~2.0",

"mediawiki/bootstrap": "~4.0",

"mediawiki/scss": "^2.0"

to

"mediawiki/chameleon-skin": ">=3.0",

"mediawiki/bootstrap": ">=4.0",

"mediawiki/scss": ">=2.0"

then ran composer update.