Extension talk:MobileFrontend

About this board

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.

Ghybu (talkcontribs)

Hello. There are more and more people posting only on mobile, so is there a way to sign their posts without going through a template or copy and paste? Thanks!

NemesisAT (talkcontribs)

If the talk page already exists, Extension:DiscussionTools will add a signature if the user uses a reply link. I don't think it works when creating a new talk page, however.

Ghybu (talkcontribs)

Thanks! I just tested it. Indeed, when creating pages or adding a new discussion, no signature is added. On mobile, the answer is only added at the bottom of the page. But it always helps. However, it isn't present in Beta in all wikis. Do I have to make a request on Phabricator?

NemesisAT (talkcontribs)

Ah sorry I don't know about using it on a Wikimedia wiki. I'm currently using the reply tool and MobileFrontend on my own installation. It's definitely an improvement over raw editing of talk pages!

Ghybu (talkcontribs)

Your answer helped me :) Thanks

Reply to "Signature"

Talk page notifications for anonymous users

1
NemesisAT (talkcontribs)

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?

Reply to "Talk page notifications for anonymous users"

how to change color of header?

1
118.8.15.212 (talkcontribs)

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?

Reply to "how to change color of header?"

Cannot create a new page in Special:search

2
203.128.212.166 (talkcontribs)

In desktop view, when we search for a page which doesn't exist, we can see a message, "You may create the page "OOO", but consider checking the search results below to see whether the topic is already covered."

However, we cannot see this message in mobile view on Korean Wikipedia. How can we enable it in mobile view?

2001:14BA:21FC:700:FC99:F9C5:CE49:D3C1 (talkcontribs)

add this to css moible :

.mw-search-createlink { display: block !important; }

Reply to "Cannot create a new page in Special:search"

Fontawesome icons not showing up on mobile

1
Paulxu20 (talkcontribs)

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' );

Reply to "Fontawesome icons not showing up on mobile"
120.17.231.57 (talkcontribs)

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 ''; }

Reply to "Update on Google Ads"
NemesisAT (talkcontribs)

Hello, is it possible to set the advanced mode as default for all anonymous editors and logged in users? thanks

Reply to "Advanced mode as default"

Css from MediaWiki:Mobile.css not being applied

4
Spiros71 (talkcontribs)

I am using MW 1.31 and Timeless skin. I added the css in MediaWiki:Mobile.css, purged cache but I cannot see the css being applied. Is there any other way to apply the css?

SchizoidNightmares (talkcontribs)

Okay, so I missed this. Way back down it mentions a fix for this (not sure if this actually works):

Add mw.loader.using('mobile.site.styles') to your MediaWiki:Mobile.js


This solution was by User:Jdlrobson. However, I cannot link to it, since I trigger an abuse filter.

SchizoidNightmares (talkcontribs)

Having this problem too. Mobile.css does not seem to apply, even after several hours and purging the cache.

Spiros71 (talkcontribs)
Reply to "Css from MediaWiki:Mobile.css not being applied"

How to Customize Mobile Menu Links

11
Knomanii (talkcontribs)

Like others have mentioned, the Mobile Menu isn't editable, and the solutions listed elsewhere tend to be somewhat outdated (GetDiscoveryTools() is no longer present in MinervaSkin.php).

So I made a simple Mobile.js script that did the trick for me. I thought I'd share it in case it helps others.

Here's what the custom links look like — there's a dropdown and a regular version that you can customize. To customize the icon, use the icon classes listed below.

Here's the code I added to Mobile.js:


  /* Add to MediaWiki:Mobile.js for custom Mobile Menu links 
  for MW-1.34.2 with MobileFrontend and MinervaNeue 
  Just replace span text and href to add links */
   
  var timer = setInterval(function() {
       if ($('.menu ul:first').length) {
           console.log("mobile menu exists");
           clearInterval(timer);
           $('.menu ul:first').after(
                 '<ul class="level1"> \
                      <li> \
                      <a href="#" \
                            class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
                      <span>Dropdown Links</span> \
                      </a> \
                      </li> \
                      <ul class ="level2"> \
                           <li> \
                           <a href="/wiki/Link_1" \
                                 class="mw-ui-icon mw-ui-icon-before"> \
                           <span>Link 1</span> \
                           </a> \
                           </li> \
                           <li> \
                           <a href="/wiki/Link_2" \
                                 class="mw-ui-icon mw-ui-icon-before"> \
                           <span>Link 2</span> \
                           </a> \
                           </li> \
                           <li> \
                           <a href="/wiki/Link_3" \
                                 class="mw-ui-icon mw-ui-icon-before"> \
                           <span>Link 3</span> \
                           </a> \
                           </li> \
                      </ul> \
                 </ul> \
                 <ul> \
                      <li> \
                      <a href="/wiki/Second_Link" \
                            class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \
                      <span>Second Link</span> \
                      </a> \
                      </li> \
                 </ul>'
            );
            $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
            $(".level1").click(function(event){ 
                 $(this).find(".level2").slideToggle(500);
            }); // if level1 is clicked, dropdown level2
       }
  }, 100); // check every 100ms

Tested on:
MediaWiki 1.34.2 and 1.35.0
MinervaNeue (d0be74a) 06:41, 1 October 2019
MobileFrontend 2.1.0 (383273b) 11:42, 7 January 2020

P.S. Apparently folks are working on an official solution for this using mw.util.addPortletLink (see phab:T65459, phab:T231925 and phab:T240910), but it still has some styling issues and I wasn't able to figure out how to implement it for the Mobile Menu. If you know how implement AddPortletLink for this, please do share!


_________________________________________________________________________

Update 11/19/20:

To customize the MobileMenu Icons, below is a compiled list of Icon classes found by @Lady G2016, @Ianbirtwistle, and myself. If you find more, feel free to share them in this thread.


Here's a list of known icons by version.

To add them, simply add the icon class in place of "mw-ui-icon-minerva-watchlist"


MW-1.34.2 Icon classes

  • Dice: mw-ui-icon-minerva-random
  • Home: mw-ui-icon-minerva-home
  • Settings: mw-ui-icon-minerva-settings
  • Speech Bubbles: mw-ui-icon-minerva-userContributions
  • Watchlist: mw-ui-icon-minerva-watchlist


MW-1.35 Icon classes

  • Bell: mw-ui-icon-wikimedia-bellOutline-base20
  • Dice: mw-ui-icon-minerva-die
  • Download: mw-ui-icon-minerva-download
  • Expand: mw-ui-icon-mf-expand
  • Edit: mw-ui-icon-wikimedia-edit-base20
  • Edit lock: mw-ui-icon-wikimedia-editLock-base20
  • History: mw-ui-icon-wikimedia-history-base20
  • Home: mw-ui-icon-minerva-home
  • Language: mw-ui-icon-wikimedia-language-base20
  • Map pin: mw-ui-icon-minerva-mapPin
  • Search: mw-ui-icon-wikimedia-search-base20
  • Settings: mw-ui-icon-minerva-settings
  • Speech Bubbles: mw-ui-icon-minerva-speechBubbles
  • Star: mw-ui-icon-wikimedia-star-base20
  • Star (solid blue): mw-ui-icon-wikimedia-unStar-progressive
  • Watchlist: mw-ui-icon-minerva-unStar
Lady G2016 (talkcontribs)

I was also unable to figure out how to implement mw.util.addPortletLink and I think some styling issues remain. Your code works perfectly. Thank you.


Tested on localhost as:

MediaWiki 1.35.0-rc.2

MinervaNeue (22bf7fa) 11:06, 11 July 2020

MobileFrontend 2.3.0 (d99e8b1) 10:54, 29 July 2020

Ianbirtwistle (talkcontribs)

I've used your script to add some links. Many thanks for this. The only issue I came across was the icons not loading, perhaps the link has changed since you last wrote this? I simply replaced mw-ui-icon-minerva-watchlist for an active icon. mw-ui-icon-minerva-mapPin and mw-ui-icon-wikimedia-star-base20 both work well.

Script tested on live site

MediaWiki 1.35

MinervaNeue – (bb52d27) 16:16, 21 September 2020

MobileFrontend 2.3.0 (8d06152) 13:42, 21 September 2020

Lady G2016 (talkcontribs)

Using @Ianbirtwistle's suggestion, I found active icons with my browser's debugging tool (Chrome Inspect). Here is a list of icons I have found (and those found by Ianbirtwistle):

  • Bell: mw-ui-icon-wikimedia-bellOutline-base20
  • Download: mw-ui-icon-minerva-download
  • Expand: mw-ui-icon-mf-expand
  • Edit: mw-ui-icon-wikimedia-edit-base20
  • Edit lock: mw-ui-icon-wikimedia-editLock-base20
  • History: mw-ui-icon-wikimedia-history-base20
  • Language: mw-ui-icon-wikimedia-language-base20
  • Map pin: mw-ui-icon-minerva-mapPin
  • Search: mw-ui-icon-wikimedia-search-base20
  • Star: mw-ui-icon-wikimedia-star-base20
  • Star (solid blue): mw-ui-icon-wikimedia-unStar-progressive

The icon size can be reduced by adding the small icon class (mw-ui-icon-small) to the class attribute.

It is important to have a UI that is consistent with the skin. The list contains icons which may not be appropriate as a sidebar menu, but use your judgment.

Drop-down links should use a small "Expand" icon. The additional classes needed to flip the icon vertically when the link is clicked didn't work.

Here's an updated example with the drop-down link icon.

var timer = setInterval(function() {
     if ($('.menu ul:first').length) {
         console.log("mobile menu exists");
         clearInterval(timer);
         $('.menu ul:first').after(
             '<ul class="level1"> \
                    <li> \
                    <a href="#" \
                    class="mw-ui-icon mw-ui-icon-before mw-ui-icon-mf-expand mw-ui-icon-small"> \
                    <span>Dropdown Links</span> \
                    </a> \
                    </li> \
                    <ul class="level2"> \
                         <li> \
                         <a href="/wiki/Link_1" \
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-download"> \
                         <span>Link 1</span> \
                         </a> \
                         </li> \
                         <li> \
                         <a href="/wiki/Link_2" \
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-mapPin"> \
                         <span>Link 2</span> \
                         </a> \
                         </li> \
                         <li> \
                         <a href="/wiki/Link_3" \
                         class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-bellOutline-base20"> \
                         <span>Link 3</span> \
                         </a> \
                         </li> \
                    </ul> \
               </ul>\
               <ul> \
                    <li> \
                    <a href="/wiki/Second_Link" \
                    class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-star-base20"> \
                    <span>Second Link</span> \
                    </a> \
                    </li> \
               </ul>'
          );
          $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked
          $(".level1").click(function(event){ 
               $(this).find(".level2").slideToggle(500);
          }); // if level1 is clicked, dropdown level2
     }
}, 100); // check every 100ms

Tested on localhost
MediaWiki: 1.35.0
MobileFrontEnd: (8d06152) 20:42, 21 September 2020 (info from gitinfo.json)
MinervaNeue: (bb52d27) 23:16, 21 September 2020 (info from gitinfo.json)

Knomanii (talkcontribs)

Thanks @Lady G2016 for compiling the icon list! I'll have to try those out.

@Ianbirtwistle Thanks for sharing that. One thing I've noticed is that icon usability can vary based on MobileFrontend configuration. For example, if I enable MobileFrontend's Beta mode, then some of my icons may stop working while others become available.

I'm not sure if that's why the watchlist icon didn't work for you, but it might be related.

On my wiki, I actually used this info so I could gain access to other icons.

I used $wgMinervaAdvancedMainMenu from the MinevaNeue configuration settings to add the "Recent Changes" section to the mobile menu. Then I was able to use the Recent Changes icon class mw-ui-icon-minerva-recentchanges.

Here are my full MobileFrontend and Minerva settings:

wfLoadExtension( 'MobileFrontend' );
$wgMFAutodetectMobileView = true;
$wgMFDefaultSkinClass = "SkinMinerva";
wfLoadSkin( 'MinervaNeue' );
$wgMinervaAdvancedMainMenu = [
   'beta' => false,
   'base' => true,
   'amc' => true,
 ];
$wgMinervaPersonalMenu = [
   'beta' => false,
   'base' => true,
   'amc' => true,
 ];

Using these $wgMinervaAdvancedMainMenu settings, the following Icons became available:

  • mw-ui-icon-minerva-recentchanges
  • mw-ui-icon-minerva-specialpages
  • mw-ui-icon-minerva-communityportal

Here's a screenshot showing how I customized the icons for my mobile menu.

(Tested on MW-1.34.2)

Knomanii (talkcontribs)

@Ianbirtwistle I just upgraded to MW-1.35.0 and encountered the same issue! All the icon class names have changed slightly with the latest update.

The class name of the following icons changed between 1.34.2 and 1.35.0.

  • Watchlist
    • 1.34.2: mw-ui-icon-minerva-watchlist
    • 1.35.0: mw-ui-icon-minerva-unStar
  • Speech Bubbles (with $wgMinervaAdvancedMainMenu settings only)
    • 1.34.2: mw-ui-icon-minerva-communityportal
    • 1.35.0: mw-ui-icon-minerva-speechBubbles
  • Dice
    • 1.34.2: mw-ui-icon-minerva-random
    • 1.35.0: mw-ui-icon-minerva-die
  • RecentChanges (with $wgMinervaAdvancedMainMenu settings only)
    • 1.34.2: mw-ui-icon-minerva-recentchanges
    • 1.35.0: mw-ui-icon-minerva-recentChanges
  • User Contributions
    • 1.34.2: mw-ui-icon-minerva-contributions
    • 1.35.0: mw-ui-icon-minerva-userContributions
  • Special Pages: (with $wgMinervaAdvancedMainMenu settings only)
    • 1.34.2: mw-ui-icon-minerva-specialpages
    • 1.35.0: mw-ui-icon-minerva-specialPages

I'll update my original instructions with the new watchlist icon class.

Lady G2016 (talkcontribs)

@Knomanii The first three of your icons do not appear in the menu unless $wgMinervaAdvancedMainMenu is configured with your settings.

  • mw-ui-icon-minerva-recentChanges (not visible)
  • mw-ui-icon-minerva-specialPages (not visible)
  • mw-ui-icon-minerva-speechBubble (not visible)
  • mw-ui-icon-minerva-userContributions (visible in menu)

When I use your configuration, the icons appear, but the Log in link is no longer visible. I must have a visible Log in link.

I recommend updating the original instructions to indicate which icons require the $wgMinervaAdvancedMainMenu settings.

171.246.102.136 (talkcontribs)

@Knomanii thanks so much

ive been looking for the solution for a while

your code been a big help

Knomanii (talkcontribs)
Xsteeplol (talkcontribs)

Hi, thank you all for this post, I found it very useful.

I would like to know if it was possible to change the color of the mobile menu icons or replace them with custom icons

Knomanii (talkcontribs)

@Xsteeplol There might be a way to do that with some custom javascript. You can already use any icon that already has an associated icon class (see discussion above), but I'm not sure how you'd adjust the color or use a custom icon instead. You might try inspecting the element where the icon is inserted and see what you can alter with javascript.

Reply to "How to Customize Mobile Menu Links"

Remove mobileaction=toggle_view_desktop link

1
Yellowcard (talkcontribs)

Is there any option to remove the "Desktop" link in the mobile version, which leads to the same page using mobileaction=toggle_view_desktop?


This seems to create issues with the Google crawler, hat crawls a mobile version and gets to the Dekstop link, still expecting pages in mobile version. See various comments on this page as well. Thanks!

Reply to "Remove mobileaction=toggle_view_desktop link"
Return to "MobileFrontend" page.