Skin talk:Metrolook

About this board

Using Google Fonts with Metrolook

1
Skalchemist (talkcontribs)

From the Google Fonts pages, I believe this statement would allow Metrolook to use the Ubuntu and Kreon fonts:

@import url(GOOGLE URL FOR KREON AND UBUNTU&display=swap');

I would then like to make Ubuntu the primary sans-serif font, and Kreon the primary serif font.

My problem is, I can't tell which of the many files within the skin is the right place to do this. I think I need to add the font names themselves in variables.less, within these statements:

@font-family-serif: 'Linux Libertine', 'Georgia', 'Times', serif;

@font-family-sans-serif: sans-serif;

But when I added the import statement above into variables.less it seemed to break the skin, it was just pure text with no formatting.

Any help would be appreciated.

NOTE: I was getting linkspam warning for the import statement above, but the Google Fonts seems clear as to how the URL should be formatted.

Reply to "Using Google Fonts with Metrolook"

The content links do not work.

3
Pneuma01 (talkcontribs)

The cause seems to be this javascipt error.

Uncaught TypeError: $(...).lastTabIndex is not a function

    at HTMLDocument.<anonymous> (<anonymous>:8:560)

    at mightThrow (load.php?lang=ja&modules=jquery&skin=metrolook&version=tqh7e:49)

    at process (load.php?lang=ja&modules=jquery&skin=metrolook&version=tqh7e:49)
Pneuma01 (talkcontribs)

When I looked into this problem, I found that the anchors work fine for English strings, but they seem to stop working for Unicode strings such as Japanese.

This is a great skin and I wanted to use it, but I'm a little disappointed.

Does anyone know how to solve this problem?

Thank you.

Pneuma01 (talkcontribs)

I added this code to MediaWiki:Metrolook.js and it worked.

$(function(){
	function hasDoubleByte(str) {
	    for (var i = 0, n = str.length; i < n; i++) {
	        if (str.charCodeAt( i ) > 255) { return true; }
	    }
	    return false;
	}
	/**********************************************************************************************
	 * Fix a bug where clicking on an title in the content did not scroll the screen to that section
	 */
	$(".tocnumber,.toctext").off("click").on("click",function(){
		if (hasDoubleByte(this.textContent)){
			var href = $(this).parent().attr("href");
			window.location.replace(href);
			setTimeout(function() {
				$('html, body').animate({
					scrollTop: '-=50'
				}, 200);
			},100);
		}
	});
	/**********************************************************************
	 * Fix the title being hidden in the menu when jumping to the anchor
	 */
	if(location.hash && window.scrollY < document.documentElement.scrollHeight - document.body.clientHeight){
		$('html, body').animate({
			scrollTop: '-=50'
		}, 200);
	}
});
Reply to "The content links do not work."

Visual Editor toolbar vanishes in MW 1.35 on h.scroll

1
Summary by Revansx

resolved by switching to Skin:Chameleon and actually getting help on the issue (Topic:Wgkokxz80orubz59)

Revansx (talkcontribs)

When scrolling down to edit a long page the visual editor toolbar vanishes under the top banner with Metrolook branch REL1_35. Anyone else experiencing this?

Product Version
Metrolook 7.0 alpha 2 (bbdfc9a) 13:37, 23 July 2021
MediaWiki 1.35.3 (aeda3d3)
PHP 7.4.21 (apache2handler)
MariaDB 5.5.68-MariaDB
ICU 50.2
LuaSandbox 4.0.2
Lua 5.1.4
Elasticsearch 6.8.18

Change .svg icons in skin

1
Summary by Mdyug

I solved this issue - the problem was that I forgot to reduce the layout in Corel

Mdyug (talkcontribs)

I want to change the vector icons that are used in the navigation of the header (ex.user icon). I open .svg in the program Corel Draw, change it, save, upload, but there is an empty space instead of the icon . Please tell me maybe there is some guide on this issue or a guide to settings when saving or anything else that could solve the problem?

SOLVED - hack to get 7.0 alpha 3 (48c1b49) to work in MW 1.34.x

4
Summary by Revansx

change:

skin.json: "MediaWiki": ">= 1.36.0"

to

skin.json: "MediaWiki": ">= 1.34.0"

and then

replace every occurrence of makeMetroLookListItem with makeListItem in /skins/Metrolook/MetrolookTemplate.php

as well as the last line from:

return $this->getSkin()->makeListItem( $key, $item, $options );

to

return parent::makeListItem( $key, $item, $options );
Revansx (talkcontribs)

I'm running:

but i'm having some minor issues and was wondering if the developers would recommend using -b master

Please advise. What is the best version for most up-to-date version compatible with MW 1.34.x. Thansk!

TeeEmCee (talkcontribs)

I've found that the REL1_35 release of Metrolook is incompatible with MW 1.34.x, due to use of Skin::makeListItem() which doesn't exist. (Metrolook commit b8f4807ccc6f3f9b)

Revansx (talkcontribs)

So.. I installed version:REL1_35 in my MW 1.34.4 wiki and then replaced every occurrence of makeMetroLookListItem with makeListItem in /skins/Metrolook/MetrolookTemplate.php and it seems to be working great!

Note - this effectively just "undoes" metrolook commmit b8f4807ccc6f3f9b114ada830d664703e02aee68

Revansx (talkcontribs)

change:

skin.json: "MediaWiki": ">= 1.36.0"

to

skin.json: "MediaWiki": ">= 1.34.0"

and then

replace every occurrence of makeMetroLookListItem with makeListItem in /skins/Metrolook/MetrolookTemplate.php

SOLVED - Sidebar collapsed by default

3
Summary by Revansx

turns out the way to do this is to change 768px to 7680px in the following 2 locations:

components/mobile/mobile.less:@media (max-width: 768px) {
components/mobile/mobile-custom.less:@media (max-width: 768px) {

This will make metrolook keep the left side-bar menu collapsed for all screens less that 7,680 pixels. w00t!

Revansx (talkcontribs)

Hi. I really love this skin. Thank you so much!

Can someone give me a pointer about how to make the Mediawiki:Sidebar (#mw-panel) collapsed by default regardless of screen-size? I see that metrolook uses JS to auto-collapse the sidebar when the main content div gets too crowded.. I'd really like to configure it to have the side bar menu collapsed by default regardless of crowding. Is this easy?

Revansx (talkcontribs)

I found the line, "media": "screen and (min-width: 982px)" in the file skin.json, that seems to be related to what triggers the mw-panel JS, but I'm out of my area of understanding with json and so am leary about tinkering with it there.

Revansx (talkcontribs)

@Paladox, is there a CSS statement I can place in Mediawiki:Metrolook.css that would make the side collapsed by default? (such that the user always sees the hamburger icon regardless of the screen size) Thanks!

Text in the top bar menu not centered

2
Ludost Mlačani (talkcontribs)

Hi, I applied this skin in my wiki and I noticed the text in the top bar (Main Page, Discussion, View etc.) is not centered as it should be and as it is on https://www.pidgi.net/wiki/Main_Page.


But then I was looking at some links here and I see that it is not only my problem, it is the same for other wikis, for instance https://encyclopediaofastrobiology.org/wiki/Main_Page. I thought maybe it is my browser, but it is the same in all browsres and as I said it works correctly on PidgyWiki.


So, how do I center the text?

Silkwood (talkcontribs)

Don't know if you have found a solution but, said that I have the same problem, I realized that at PidgyWiki they use this:

Installed skins

Skin Version License Description Authors
Vector GPL-2.0-or-later Modern version of MonoBook with fresh look and many usability improvements Trevor Parscal, Roan Kattouw and others


Hmmm ....

Reply to "Text in the top bar menu not centered"

I like that these skin must be used in all wikimedia wikis

1
Rodney Araujo (talkcontribs)

Hello, i like that the skin "Metrolook" must be installed and used in all Wikimedia Wikis, thanks

Reply to "I like that these skin must be used in all wikimedia wikis"

Does anyone using Metrolook also use Extension:Page Forms?

1
Revansx (talkcontribs)
  • MW 1.34.1 (b1f6480)
  • Metrolook 7.0 alpha 2 (48c1b49)
  • Page Forms 4.9.4 (c4fb7d3)

I'm experiencing a weird JS focus issue with the "popup" option of the #formlink parser function. I would like to know if anyone else is experiencing it. Basically, the scrollbar *jumps* to the top of the page every time I scroll down and then click on something. Thanks!

Reply to "Does anyone using Metrolook also use Extension:Page Forms?"

Is it possible to use the user's "Real Name" or "DisplayTitle" in the top right of metrolook?

1
Revansx (talkcontribs)

Top right of metrolook is always the user's username. Is it possible to use either the user's RealName (if set) or a Display Title Name (if set)? Thanks!

Reply to "Is it possible to use the user's "Real Name" or "DisplayTitle" in the top right of metrolook?"