Skin talk:Chameleon

Jump to navigation Jump to search

About this board

Chameleon and SMW "Browse properties" menu duplicate

2
Summary by Morne Alberts

Fixed in Chameleon 3.2 and later

Emmanuel Touvier (talkcontribs)

The "Browse properties" entry appears two times in the "Tools" page menu when using Chameleon. When switching to Vector it displays only one time as usual.

This happens only when in "Page" display. The menu returns to normal when in "History" or "Edit" of the same page.

Versions : Mediawiki 1.35.2, SMW 3.2.3, Chameleon 3.1.0

Morne Alberts (talkcontribs)

The fix for this is available in Chameleon 3.2 and later.

TheCatchyName (talkcontribs)

For the component "cell" the current implementation for the span attribute has been disabled. Is there any way to work around this? I want to divide my page asymmetrically using the grid with cells, but I can't specify the width of cells since the aforementioned span attribute is currently not working.


Issue 217 on the Chameleon GitHub mentions this issue and their workaround, but didn't specify how they did it. Any suggestions on how to implement custom widths?

Morne Alberts (talkcontribs)

The span functionality was removed a long time ago, although the documentation still referred to it. In the latest Chameleon 3.3 those references have been removed and all the structure components (Grid, Row, Cell, Container) now allow id and class attributes.

You can now just add the normal Bootstrap column classes (e.g. col-md-3) to the Cell components to create an asymmetric layout.

Reply to "Cell span hack"

MW 1.35.2 Warning with Chameleon Version 3.1.0

1
Summary last edited by Morne Alberts 16:24, 20 June 2021 3 days ago

Tracked on GitHub with issue 256 Fixed in Chameleon 3.2 and later

GMShimokura (talkcontribs)

After upgrading MW to 1.35.2 I get this warning in the Page Source Code / console:

mw.log.warn("This page is using the deprecated ResourceLoader module \"mediawiki.skinning.content\".\nYour default skin ResourceLoader class should use ResourceLoaderSkinModule::class");

Is this of any concern?

Summary by TimoKausK

I restarted from scratch and solved the problem.

TimoKausK (talkcontribs)

Hi,

i googled myself to death and cant find any suitable or even working solution for my problem.

Everything seems to on the right place.

- Special:Version said the Bootstrap is loaded and active

- Skin chameleon is also active and the right layout file is loaded (i tested that with some debug html output)


The only weird thing is that the 'link rel ' for mw-css is in between the body tag not head.

I tried to compoare with other active chameleon sites and the have more css link rel which are not showing up on my installation.


Anyway. No CSS (even MW-css or Bootstrap) is loded and i only have a "Times New Roman" Page without any style.


It is driving me nuts and would appreciate any help.

Bug with orientation changes on mobile devices

1
Chrishel (talkcontribs)

There appears to be a bug with how the skin handles refilling the screen after orientation changes on mobile devices. We are using a customized skin using Chameleon as a basis on our wiki. The issue is slightly different (but always present in some form) depending on the device and browser used.

As an example (on an iPhone 12 Pro running IOS 14.4.2), if the page is initially loaded in portrait, rotating to landscape introduces a substantial white margin on the left and the right which persists when rotating back to portrait and is only resolved by refreshing the page. In Safari, rotating to landscape introduces the same margins, but they disappear when rotating back to portrait. Orientation changes in Chrome on an iPad Pro result in the page not shrinking to fit the window.

I'm fairly confident this is a bug in the underlying skin and not my modifications, since I can reproduce this behavior in all of the example wikis linked from the skin page.

Does anyone have an idea of how this could be fixed?

Reply to "Bug with orientation changes on mobile devices"

mediawiki 1.35 blank page enabling it

3
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

70.105.249.242 (talkcontribs)

Did you have any luck for this problem?

70.105.249.242 (talkcontribs)

If you update to the latest version of Chameleon skin, this error goes away.

Reply to "mediawiki 1.35 blank page enabling it"

Re-enable Sticky Header

9
Summary by DesignerThan

By changing the structure a bit in the Layout-XML File it was possible to get it working. For more information look here.

Z929669 (talkcontribs)

I have modified the sticky header XML. In doing so, I have broken the sticky effect. Can someone point me to the relevant CSS and Js that I need to tweak? Guessing a modification to a negative margin in Js.

DesignerThan (talkcontribs)

Normally it should be possible to enable the sticky effect again in the XML. Is that not possible anymore?

You should be able to do that with the Modification Sticky. For Example like that:

<component type="NavbarHorizontal">

<modification type="Sticky"/>

...

...

...

</component>

Z929669 (talkcontribs)

Yes, that's still there, but it's broken, because I modified the xml to use a custom container above the header bar. Doing so probably requires juxtaposing the sticky js variables somehow or tricking things by using top and margin via css. Just not sure how to make the edits or where.

My altered xml:

<structure xmlns="https://ProfessionalWiki.github.io/chameleon/schema/3.0/layout.rng">

	<grid class="content">
		<grid class="header">
			<cell span="12" class="banner">
				<component type="Container" class="content-container">
					<component type="Logo" class="logo" addLink="yes" />
				</component>
			</cell>
			<cell span="12" class="navbar banner">
				<component type="NavbarHorizontal">
					<modification type="Sticky"/>
					<component type="Html"><![CDATA[<a class="nav-link" href="https://stepmodifications.org/forum" target="_self">Forum</a>]]></component>
					<component type="NavMenu" flatten="no"/>
					<component type="Html"><![CDATA[<a class="nav-link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=N5TLCEMXY7KQU" target="_blank"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif"></a>]]></component>
					<component type="Toolbox" class="dropdown" flatten="no" position="right"/>
					<component type="PageTools" class="flex-row" position="right" hideSelectedNameSpace="yes"/>
					<component type="PersonalTools" position="right"/>
					<component type="SearchBar" class="order-first order-cmln-0" position="right" buttons="go"/>
				</component>
			</cell>
		</grid>

		<grid class="body-content-container">
			<row>
				<cell>
					<component type="SiteNotice"/>
				</cell>
			</row>

			<row>
				<cell>
					<component type="MainContent"/>
				</cell>
			</row>
		</grid>

		<grid class="mb-2 mt-4" mode="fluid">
			<row>
				<cell>
					<component type="NavbarHorizontal" collapsible="no" class="small mb-2" >
						<component type="LangLinks" flatten="no" class="dropup"/>
					</component>
				</cell>
			</row>

			<row>
				<cell>
					<component type="FooterInfo"/>
					<component type="FooterPlaces"/>
				</cell>
				<cell>
					<component type="FooterIcons" class="justify-content-end"/>
				</cell>
			</row>
		</grid>

		<component type="NavbarHorizontal" class="small bg-darker">
			<component type="Menu" message="secondary-menu"/>
		</component>
	</grid>
</structure>
DesignerThan (talkcontribs)

Okay. Maybe it is possible to add the sticky-Modification to the grid with the class="header". If not, do you have a link to the wiki? Maybe I'll find a solution that way. Also you could have a look at the CSS property position: sticky; that is what most likely is used in that case. --DesignerThan (talk) 20:10, 16 February 2021 (UTC)

Z929669 (talkcontribs)

Sure, the link is: https://stepmodifications.org I thought the sticky mod could only reside under the navbar component, but I could be wrong. If you can figure it out, I'd be in your debt. ~z929669 Talk 19:34, 24 February 2021 (UTC)

DesignerThan (talkcontribs)

Sadly I can't test it, if it is possible to add the modification to the grid. Just try it in the Layout XML-File, you are always able to revert it ;). But I was able to test which CSS settings would be needed to do it manually. position: sticky; //makes the container sticky top: 0; //set's the position of the navigation at the top z-index: 9999; // if that is not set, the navigation will get hidden behind the content

I hope that will help you.

Z929669 (talkcontribs)

You were right! It does indeed work inside the grid 'header' container . Now I just need to figure out how to apply ONLY to the navbar. On scroll downward, the image/logo should roll up and 'stick' at the top of the navbar. This keeps the nav present without wasting all that space for the header.

Alas, the sticky mod ONLY seems to work in this grid element. You can see the behavior here: https://stepmodifications.org/wikidev

Any other ideas for that (regardless, your thoughts have proven helpful!).

DesignerThan (talkcontribs)

Did you already get it to work? Because as I had a look at the site the logo went up and only the navbar was sticky (visible), seemed very nice. --DesignerThan (talk) 01:24, 1 March 2021 (UTC)

Z929669 (talkcontribs)

Yep. I figured it out. I had to modify the Chameleon XML such that all header content is now contained in <grid>, and navbar had to be in its own separate grid as such:

<structure xmlns="https://ProfessionalWiki.github.io/chameleon/schema/3.0/layout.rng">

	<grid class="content">
		<grid class="header">
			<grid class="banner">
				<component type="Container" class="content-container">
					<component type="Logo" class="logo" addLink="yes" />
				</component>
			</grid>
		</grid>
		<grid class="navbar banner">
			<modification type="Sticky"/>
			<component type="NavbarHorizontal">
				<component type="Html"><![CDATA[<a class="nav-link" href="https://stepmodifications.org/forum" target="_self">Forum</a>]]></component>
				<component type="NavMenu" flatten="no"/>
				<component type="Html"><![CDATA[<a class="nav-link" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=N5TLCEMXY7KQU" target="_blank"><img src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif"></a>]]></component>
				<component type="Toolbox" class="dropdown" flatten="no" position="right"/>
				<component type="PageTools" class="flex-row" position="right" hideSelectedNameSpace="yes"/>
				<component type="PersonalTools" position="right"/>
				<component type="SearchBar" class="order-first order-cmln-0" position="right" buttons="go"/>
			</component>
		</grid>

		<grid class="body-content-container">
			<row>
				<cell>
					<component type="SiteNotice"/>
				</cell>
			</row>

			<row>
				<cell>
					<component type="MainContent"/>
				</cell>
			</row>
		</grid>

		<grid class="mb-2 mt-4" mode="fluid">
			<row>
				<cell>
					<component type="NavbarHorizontal" collapsible="no" class="small mb-2" >
						<component type="LangLinks" flatten="no" class="dropup"/>
					</component>
				</cell>
			</row>

			<row>
				<cell>
					<component type="FooterInfo"/>
					<component type="FooterPlaces"/>
				</cell>
				<cell>
					<component type="FooterIcons" class="justify-content-end"/>
				</cell>
			</row>
		</grid>

		<component type="NavbarHorizontal" class="small bg-darker">
			<component type="Menu" message="secondary-menu"/>
		</component>
	</grid>
</structure>

Thanks for the tips!

Hcadby (talkcontribs)

Hi all,

I was just wondering if it is possible to move the toolbox menu from the bottom of the page and put it at the top with the main navigation menu. I am running MW 1.35.1 and Chameleon 3.1

Many thanks

DesignerThan (talkcontribs)

Hi Hcadby,

that should be possible. Have a look into the layout files of the Chameleon Skin. If you add the component Toolbox to the NavbarHorizontal it should work out. Here another link where some things on customization are explained. Hopefully I could help you with that. If you have further questions, just ask. --DesignerThan (talk) 20:28, 22 February 2021 (UTC)

Hcadby (talkcontribs)

Thank you, Very Helpful. managed to get it working.

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)"