Extension talk:MobileFrontend/2021

If you have a feature request just request it here you'll get a much quicker reply :-) We are also around in #wikimedia-mobile if you want a quicker answer!

If you are trying to replicate behaviour you see on Wikimedia sites, please be sure to read through the configuration options before asking a question here.

Update on Google Ads

Is anyone able to update the header code on this site to the current version? Thanks!

(It wont let me link, so here is the code)

First, take your Google Analytics and Adsense code and convert all the single quotes to double quotes.

In SkinMinerva.php, find the getHeaderHtml() function, and replace the following code:

protected function getHeaderHtml() {

$title = $this->getOutput()->getPageTitle(); if ( $title ) { return Html::rawElement( 'h1', array( 'id' => 'section_0' ), $title ); } return '';

}

to the following:

protected function getHeaderHtml() { $title = $this->getOutput()->getPageTitle(); if ( $title ) { $result = 'INSERT AD CODE'; $result .= Html::rawElement( 'h1', array( 'id' => 'section_0' ), $this->getOutput()->getPageTitle() ); return $result; } return ''; } 120.17.231.57 (talk) 01:22, 4 January 2021 (UTC)

hey, I also need help in adding AdSense in header. Have you been able to get it solved? Davidsmeltzer07 (talk) 18:47, 31 March 2021 (UTC)

Fontawesome icons not showing up on mobile

I googled but couldn't find anything related to this issue, so seems just happening to me? I have below in LocalSettings.php to use MinervaNeue skin and MobileFrontend for mobile view. The icons shows up well on desktop browser but not in mobile view for some reason..

$wgDefaultSkin = "vector";

wfLoadSkin( 'MinervaNeue' );

$wgMFAutodetectMobileView = true;

wfLoadExtension( 'MobileFrontend' ); Paulxu20 (talk) 02:18, 7 January 2021 (UTC)

how to change color of header?

I want to change color of header(or navbox? I don't know exact name of it) which is the top area of page.

I somehow changed it by put below code in mobile.css and common.css.

.header-container.header-chrome, footer, .navbox, .navbox-subgroup{ background-color: #000000; }

but it is wierd because it takes so much time to change it from original color to modified color when someone enter my wiki.

Besides, color become light when I use this method. (which is weird because footer color looks clear with this method)

So I think It is wrong way and I have to edit some kind of php files or something.

Could you help me to change header color? 118.8.15.212 (talk) 06:24, 23 January 2021 (UTC)

Talk page notifications for anonymous users

Since enabling MobileFrontend, I've had a noticeable increase in anonymous editing (was previously using Refreshed). However there is no way to speak to these editors. Is there a workaround I can implement to get talk page notifications to these users? Garuda3 (talk) 22:15, 25 January 2021 (UTC)

V.T.E. showing up wonky on mobile

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Hello,

I have the MobileFrontEnd installed and am mostly happy with the changes it makes for mobile users. But I am not able to figure out what to tweak to correct how the VTE Navbar is showing up vertically as an unordered list.

Here is my site on desktop: https://jfwiki.org/nw/dotd.jpg

vs mobile: https://jfwiki.org/nw/dotm.jpg

Many thanks for any clues. Jackson Mornard (talk) 23:00, 6 March 2021 (UTC)

Found it, adding

.mini.navbar.hlist.plainlinks { display: none; }

to Mediawiki:Mobile.css

hides that div, which is fine. Jackson Mornard (talk) 20:37, 8 March 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Headers don't collapse when placing headers in div-elements

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Hi! First, thanks for providing the MobileFrontend extension, it works great!

I would like to enhance the look of portal pages by placing sections in boxes (see code below).

However, MobileFrontend then no longer collapses the headers and no longer shows a TOC. The headers are still styled as headers though. Is there a fix or workaround for this?

Placing the headers outside the div-element works of course, but that defies the purpose of enhancing the page look, as the page then looks more cluttered than in the first place. I've tried providing no CSS and separate CSS in Mobile.css, as well as adding a @media tag to Common.css, but neither worked.

Would appreciate tips if someone has an idea for solving this :)

Cheers,

Lucas

---

MediaWiki:Common.css:

.portalbox {
border: 1px solid;
margin-top: 0.5em;
padding: 0 0.5em 0.5em 0.5em;
}

Article source code:

__TOC__

<div class="portalbox">
== Foo ==
Lorem ipsum dolor
</div>

<div class="portalbox">
== Bar ==
Lorem ipsum dolor
</div>

KenTechVAW (talk) 16:19, 8 March 2021 (UTC)

Update: I realized this setup can't work because there would be no headers to tap on :D. Solved the situation by moving the boxes right underneath the header (with margin-top: -6px; for desktop and margin-top: -12px; for Mobile, which gives nice results. KenTechVAW (talk) 17:36, 8 March 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Menu button hide title

Hi! I installed a new mediawiki 1.35.1 today and also installed the MobileFrontend as the only extension to the Wiki. In principle it works great but at some widths in Desktop-Browser on Mobile-View and also at the Standard iPhone-Width the right editting menu drops below the diskussion-menu and hides the title which looks bad.

When I deactivate the Extension the right menu collapses to a openable menu if the width gets too small. Is it just a bug or do I have to configure something, so the menu is collapsing correctly?

Best regards

Julian GURKEdeluxe (talk) 10:47, 28 March 2021 (UTC)

Hiding only from desktop on a Wikimedia wiki

How can I hide text only from desktop on a Wikimedia wiki (Romanian Wikipedia)? In other words, that text should be visible only from mobile, but from desktop no. The context is ro:Special:Diff/14156938. --Paloi Sciurala (talk｜contribs) 10:16, 18 April 2021 (UTC)

An answer? --Paloi Sciurala (talk｜contribs) 18:12, 18 April 2021 (UTC)

You'll have to define a custom CSS class in your wiki's MediaWiki:Common.css file, with display: none;. For my wikis, I've used the class name mobile-show, but given the nomobile class included in the default styles (via Ext:MobileFrontend? I'm not actually sure), a class name such as nodesktop might make more sense/be easier to remember. 「ディノ奴千？！」^{☎ Dinoguy1000} 22:33, 18 April 2021 (UTC)

@Dinoguy1000: But what is the text that I should add in MediaWiki:Common.css? --Paloi Sciurala (talk｜contribs) 11:42, 19 April 2021 (UTC)

.your_class_name {
    display: none;
}

Replace your_class_name with whatever name you decide to use for the class (note that the period before the name is not a mistake; this is what identifies it as a class to your browser). 「ディノ奴千？！」^{☎ Dinoguy1000} 19:16, 19 April 2021 (UTC)

@Dinoguy1000: ro:Utilizator:NGC 54/Teste and ro:Utilizator:NGC 54/PP1/Mobil/common.css. It does not work. Does it is possible to display Utilizator:NGC 54/PP1 as the Main Page for desktop and ro:Utilizator:NGC 54/PP1/Mobil as the Main Page for mobile without using tags like "nomobile", "mobileonly", "nodesktop", "mobile-show"...? --Paloi Sciurala (talk｜contribs) 11:34, 20 April 2021 (UTC)

The CSS page you linked is not being applied to the test page you linked. In order to do that, you need to use Extension:TemplateStyles instead of putting the page name in a class attribute. 「ディノ奴千？！」^{☎ Dinoguy1000} 19:44, 20 April 2021 (UTC)

@Dinoguy1000: The content is now hidden both from mobile and desktop. --Paloi Sciurala (talk｜contribs) 10:35, 21 April 2021 (UTC)

Yes, because your CSS file is being applied both on desktop and mobile. My original advice was based on putting the CSS in your wiki's MediaWiki:Common.css file, since that page is only loaded on desktop. If you instead intend for the CSS to be used via TemplateStyles, you'll have to add extra selectors to prevent it being applied when on mobile; unfortunately, I don't really know how to do this beyond vague ideas. 「ディノ奴千？！」^{☎ Dinoguy1000} 02:42, 22 April 2021 (UTC)

Collapsible

"[arată]" from ro:Utilizator:NGC 54/PP1/MobilSubiecte it is not displayed on mobile. How can I fix this issue? --Paloi Sciurala (talk｜contribs) 13:52, 23 April 2021 (UTC)

Adding new entries to mobile menu - JS solution

Hi guys, adding new entries in the mobile menu isn't straightforward. Basing on two previous ideas, I developed a new one, in my opinion the most universal:

1. Menu entry is added via JavaScript code, using MediaWiki libraries.
2. Due to existing bug (https://phabricator.wikimedia.org/T240910), my solution includes a workaround (JS+CSS).
3. You can use any OOUI icon (but they are black, not gray. I didn't realize how fix it).

So, two parts. In MediaWiki:Mobile.js add:

/* Add some links to the menu */
$.when( mw.loader.using(['mediawiki.util', 'oojs-ui.styles.icons-interactions']), $.ready ).then( function() {
   var styleClasses = ["menu-list-item__button", "mw-ui-icon", "mw-ui-icon-before"]

   // Repeat following part for every link you want to add
   var helpUrl = mw.util.getUrl( '<page title>' ); // Here put the page title to get the valid URL
   
   // pt-preference is a section where add the link, more you find on 
   // https://en.wikipedia.org/wiki/Help:Customizing_toolbars
   var helpNode = mw.util.addPortletLink( 'pt-preferences', helpUrl, '<link name>').getElementsByTagName("a")[0];

   // Here you decide which icon to use. You can select any from the page below:
   // https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=mobile
   // In this example, I choose "helpNotice" from section "interactions". 
   // To use it, I needed to load "oojs-ui.styles.icons-interactions"
   // in the first line of the script, and build the class name as below. 
   // As an alternative, use icons referenced in previous solutions (links at the end).
   helpNode.classList.add("mw-ui-icon-helpNotice");
   styleClasses.map(function(x) {helpNode.classList.add(x)});
} );

Then, in MediaWiki:Mobile.css add:

/* Workaround for wrong menu rendering */
#mw-mf-page-left ul li a {
   font-size: 0.875em;
   font-weight: bold;
   vertical-align: middle;
}

#mw-mf-page-left ul li a span {
   font-size: 1em !important;
}

You can see an example how it works on https://wiki.fnin.eu/

Reference for other solutions: Extension talk:MobileFrontend/2020#h-How_to_Customize_Mobile_Menu_Links-2020-07-27T20:33:00.000Z and Extension talk:MobileFrontend/2017#h-MODIFY_THE_MAIN_MENU-2017-01-04T02:24:00.000Z Kam193 (talk) 11:18, 24 April 2021 (UTC)

div.thumbcaption:before

I've just noticed that some templatestyles don't work the same on different pages. The example is:

This templatestyle works fine to number figures on a template page but not on other pages (e.g. user sandbox)

I can't work out what is causing it. Is there some difference in image div naming between pages?

Any ideas for a fix? T.Shafee(Evo﹠Evo)^talk 05:47, 3 May 2021 (UTC)

I'm not seeing any difference between the linked pages; as far as I can tell, they display identically. What differences specifically are you seeing? Have you tried viewing the pages while logged out, in a different browser, or using a different device? 「ディノ奴千？！」^{☎ Dinoguy1000} 06:48, 3 May 2021 (UTC)

Apologies - I needed to specify! The figure numbering is different. Specifically on this page, the text keeps repeating as "Figure 1"

What should happen is that:

• the text "Figure " counter(figure-n-counter) should display at the start of the caption
• then counter-increment: figure-n-counter; should increment up by one after each image T.Shafee(Evo﹠Evo)^talk 09:24, 3 May 2021 (UTC)

Aah, you're not the only one who needs to apologize. When I first looked, I de-mobile-ified your links before comparing them; opening and comparing them again without any twiddling, I see the same issue you're reporting here. So whatever's going on, it's a desktop-mobile skin difference. I haven't investigated any further than this, though. 「ディノ奴千？！」^{☎ Dinoguy1000} 09:45, 3 May 2021 (UTC)

Thanks! Also, feel free to let me know if there's a more logical place than here to ask for ideas! T.Shafee(Evo﹠Evo)^talk 11:31, 3 May 2021 (UTC)

Browser detection missing from installation guide

FYI: Installing this extension per the instructions doesn't do anything. The user will not see any difference in their website. One needs to also add `$wgMFAutodetectMobileView = true;` to LocalSettings.php or do some fancy additional configuration. Neither are mentioned here, and almost certainly should be. I would add it but... I have no clue how. I tried but there's some translate format I don't understand. TrustworthyPerson (talk) 06:00, 11 May 2021 (UTC)

You can make the additions without worrying about the translation formatting (that's the recommended method for making edits here, as I understand), and someone who knows how to handle the formatting will follow along and add it for you. 「ディノ奴千？！」^{☎ Dinoguy1000} 11:05, 11 May 2021 (UTC)

Cache

Mobilefrontend does not retrieve items from the filecache, nor does it trigger the generation of a cached version of an article on first viewing. Opening articles on the desktop skin does this. I realise that there is a section on using Varnish, but for those of us that like to keep things simple, is there a way (i.e. a line to add to LocalSettings.php) that would trigger the generation of cached copies of articles for mobile devices? I don't much care if there has to be two cached files, one for desktop and one for mobiles, or one cached file with both data in.

Thanks for any pointers. Polymath uk (talk) 11:49, 21 May 2021 (UTC)

Hello! I am also looking for that functionallity, nothing is possible? I can see that load time for desktop version is much quicker than the mobile version, that doesn't make any sense in today's mobile world. CloudFlare doesn't cache the mobile version, either. A2323545 (talk) 09:06, 11 January 2022 (UTC)

[Suggestion] Using collapsible sections outside of mobile

MobileFrontend provides a feature that makes sections collapsible. I think it is also useful in the desktop as well as mobile, especially for the very long references section.

But I don't think MobileFrontend is responsible for the desktop. It would be nice if collapsible sections are splited out from MobileFrontend into a standalone extension. Lens0021 (talk) 18:36, 16 June 2021 (UTC)

How can I add something between headings tags?

The following discussion is closed. Please do not modify it. Subsequent comments should be made on the appropriate discussion page. No further edits should be made to this discussion.

---

Hi, I would like to know how it is possible to insert something (text, image or even script) between the "sections" of the headings tags.

From this image it is easier to understand what I mean.

https://ibb.co/tKH2Kkr

Please, I've been trying for hours but can't find a solution. Xsteeplol (talk) 01:22, 22 June 2021 (UTC)

The discussion above is closed. Please do not modify it. No further edits should be made to this discussion.

Is there a way to default mobile users to desktop?

For our site, we feel that the desktop version of the site still works better for mobile users, so we'd like to default them to it. However, rather than disabling the mobilefrontend entirely, I'd like to still have it available as an option (link at the bottom of the page saying "mobile view") for them to select if they'd like.

Is there a way to force all visitors to default to the desktop view, but still have the option of using the mobile version? Thank you! OncMD (talk) 16:06, 22 July 2021 (UTC)

Possible to have a default uncollapsed header (with the rest being collapsed)

Hello! My wiki has a navbox on the bottom of the page, which ideally should be displayed on the bottom of the page at all times. However, due to the structure of Mediawiki, what ends up happening is that it ends up being part of the last section and then collapsing under that section.

Is it possible to keep one section uncollapsed by default, while having the rest be collapsed? If not, is it possible to make a part of the page "sectionless" (like how the lead section isn't under a section)? Thanks in advance! Kiwibasket (talk) 02:18, 11 August 2021 (UTC)

Extension not works as expected

how to use these extension properly? just show desktop version on desktop and mobile version on mobile devices

show a mobile version while on mobile and show a desktop version on desktop?

$wgVectorResponsive = true; - this not looks clean and good

$wgVectorResponsive = false; - this looks responsive version of my vector themes but still not looks good

$wgVectorDefaultSkinVersion = '1'; this make desktop view as default on mobile while 2 is make mobile as default view on desktop?

am i missing something ? 110.137.102.198 (talk) 15:27, 26 August 2021 (UTC)

Special:MobileDiff is not shown in color anymore

I upgraded my MediaWiki from 1.31 to 1.35 and updated MobileFrontend together with the Minerva skin but Special:MobileDiff doesn't show any color. When I compare it to another wiki on 1.31, the whole HTML structure is different. I'm missing all "mw-diff-inline-added" classes for example and so the diffs don't get styled. Does anyone have any idea? Brawl345 (talk) 13:06, 24 September 2021 (UTC)

I have the same issue and hopefully this can bump it up. Please, if someone knows the solution, mention me here as well.--Mario-WL (talk) 21:06, 24 August 2023 (UTC)

MobileFrontendHooks issue

When I upgrade from 1.27 to 1.36.2 today, I have issue after upgrade completed.

Deprecated: Registering handler for AuthChangeFormFields before MediaWiki bootstrap complete was deprecated in MediaWiki 1.35 [Called from MobileFrontendHooks::onRegistration in /home/customer/www/xxx.com/public_html/wiki/extensions/MobileFrontend/includes/MobileFrontend.hooks.php at line 1420] in /home/customer/www/xxx.com/public_html/wiki/includes/debug/MWDebug.php on line 376

Deprecated: Premature access to service container [Called from Hooks::register in /home/customer/www/xxx.com/public_html/wiki/includes/Hooks.php at line 54] in /home/customer/www/xxx.com/public_html/wiki/includes/debug/MWDebug.php on line 376

Deprecated: Premature access to service 'HookContainer' [Called from MediaWiki\MediaWikiServices::getInstance in /home/customer/www/xxx.com/public_html/wiki/includes/MediaWikiServices.php at line 252] in /home/customer/www/xxx.com/public_html/wiki/includes/debug/MWDebug.php on line 376

Deprecated: Premature access to service 'ObjectFactory' [Called from Wikimedia\Services\ServiceContainer::{closure} in /home/customer/www/xxx.com/public_html/wiki/includes/ServiceWiring.php at line 535] in /home/customer/www/xxx.com/public_html/wiki/includes/debug/MWDebug.php on line 376

Deprecated: Premature access to service 'MainConfig' [Called from RequestContext::getConfig in /home/customer/www/xxx.com/public_html/wiki/includes/context/RequestContext.php at line 118] in /home/customer/www/xxx.com/public_html/wiki/includes/debug/MWDebug.php on line 376

Deprecated: Premature access to service 'ConfigFactory' [Called from Wikimedia\Services\ServiceContainer::{closure} in /home/customer/www/xxx.com/public_html/wiki/includes/ServiceWiring.php at line 734] in /home/customer/www/xxx.com/public_html/wiki/includes/debug/MWDebug.php on line 376

Deprecated: Premature access to service 'BootstrapConfig' [Called from Wikimedia\Services\ServiceContainer::{closure} in /home/customer/www/xxx.com/public_html/wiki/includes/ServiceWiring.php at line 277] in /home/customer/www/xxx.com/public_html/wiki/includes/debug/MWDebug.php on line 376

When I enable $wgServer and more bug coming up

/wiki/api.php?action=query&meta=siteinfo&siprop=namespaces&format=yamlfm ConfigException: GlobalVarConfig::get: undefined option: 'ResourceLoaderLESSVars'

Backtrace:

from /home/customer/www/xxx.com/public_html/wiki/includes/config/GlobalVarConfig.php(59)

#0 /home/customer/www/xxx.com/public_html/wiki/extensions/MobileFrontend/includes/MobileFrontend.hooks.php(755): GlobalVarConfig->get(string)

#1 /home/customer/www/xxx.com/public_html/wiki/includes/HookContainer/HookContainer.php(338): MobileFrontendHooks::onBeforePageDisplay(OutputPage, SkinApi)

#2 /home/customer/www/xxx.com/public_html/wiki/includes/HookContainer/HookContainer.php(137): MediaWiki\HookContainer\HookContainer->callLegacyHook(string, array, array, array)

#3 /home/customer/www/xxx.com/public_html/wiki/includes/HookContainer/HookRunner.php(1000): MediaWiki\HookContainer\HookContainer->run(string, array, array)

#4 /home/customer/www/xxx.com/public_html/wiki/includes/OutputPage.php(2629): MediaWiki\HookContainer\HookRunner->onBeforePageDisplay(OutputPage, SkinApi)

#5 /home/customer/www/xxx.com/public_html/wiki/includes/api/ApiFormatBase.php(333): OutputPage->output()

#6 /home/customer/www/xxx.com/public_html/wiki/includes/api/ApiMain.php(1900): ApiFormatBase->closePrinter()

#7 /home/customer/www/xxx.com/public_html/wiki/includes/api/ApiMain.php(700): ApiMain->printResult(integer)

#8 /home/customer/www/xxx.com/public_html/wiki/includes/api/ApiMain.php(624): ApiMain->handleException(ApiUsageException)

#9 /home/customer/www/xxx.com/public_html/wiki/includes/api/ApiMain.php(588): ApiMain->executeActionWithErrorHandling()

#10 /home/customer/www/xxx.com/public_html/wiki/api.php(90): ApiMain->execute()

#11 /home/customer/www/xxx.com/public_html/wiki/api.php(45): wfApiMain()

#12 {main}

Any suggest?

Thanks Jy02239285 (talk) 16:34, 21 October 2021 (UTC)

I downloaded and upgrade MobileFronted from Extension:MobileFrontend, look anything work fine, I'm sorry when I facing the issue, I'm first hand touch this project, someone work before and never provide and transfer any information to me. Jy02239285 (talk) 19:56, 21 October 2021 (UTC)

Can't remove footer wordmark

hello, I have a problem with Mobile Frontend, There are 2 logos when displayed on a mobile device, one logo is in the header and the other in the footer, it looks awful, I've been looking for a logo for 2 days since unsuccessful, but unsuccessful, I'd rather be there only text as on a wikipedia page. I use MinervaNeuer Skin and version 1.35 mediawiki. 178.40.57.86 (talk) 10:10, 27 November 2021 (UTC)

I need remove h2 element and img from this bit of footer code 178.40.57.86 (talk) 14:40, 27 November 2021 (UTC)