Skin talk:Minerva Neue

how to increase max width on desktop

i tried the following with no luck:

@media screen and ( min-width: @width-breakpoint-desktop ) .banner-container, .header, .page-header-bar, .overlay-header, .content, .overlay-content, .content-unstyled, .pre-content, .post-content, #mw-content-text > form { margin-right: auto; margin-left: auto; width: 100%; max-width: 70em; }

Try a fixed width breakpoint such as (min-width:960px).

Did you ever find out how to do this? TIA

I finally figured this out. I could not fix this with CSS mods. I edited the skin file responsible which I realise is considered bad practice. If anyone knows how to incorporate what I have posted below into a CSS mod please comment.

The file I changed was in $IP/skins/MinervaNeue/resources/skins.minerva.content.styles/tablet/common.less

At the end of the file is a section that reads:

@media screen and ( min-width: @width-breakpoint-desktop ) {

        // stylelint-disable-next-line selector-max-id

        .banner-container,

        /* FIXME: Generic header class needed me-thinks! */

        .header,

        .page-header-bar,

        .overlay-header,

        /* FIXME: Generic content class needed? */

        .content,

        .overlay-content,

        .content-unstyled,

        .pre-content,

        .post-content,

        /* Form only pages e.g. Special:MobileOptions */

        #mw-content-text > form {

                margin-left: auto;

                margin-right: auto;

                width: 90%;

                max-width: @contentMaxWidthTablet;

        }

        .header {

                // Make sure the main menu and secondary button icon images are$

                // with the content.

                max-width: @contentMaxWidthTablet + 2 * @iconGutterWidth;

        }

Modify the section under #mw-content-text > form

        #mw-content-text > form {

                margin-left: 5%;

                margin-right: 5%;

                width: 90%;

                max-width: 90%;

        }

You can of course enter whatever margins you wish and also a max-width. I tried setting max-width: none; but this caused a horizontal scrollbar with a tiny scrolling area. The value above seem to work fine on many screen sizes.

Hi Everyone,

We recently updated to Mediawiki 1.36. I'm testing some of our installed skins under it.

Minerva Neue is causing this warning to be printed on the top of each page:

Deprecated: Use of SkinTemplateOutputPageBeforeExec hook (used in HitCounters\Hooks::onSkinTemplateOutputPageBeforeExec) was deprecated in MediaWiki 1.35. [Called from MediaWiki\HookContainer\HookContainer::run in /var/www/html/w/includes/HookContainer/HookContainer.php at line 137] in /var/www/html/w/includes/debug/MWDebug.php on line 376

I have no idea why we are running debug code on a production server. I guess that's a separate issue for the Mediawiki folks.

My apologies if this is not a Minerva Neue issue.

Our mediawiki information can be found here.

This is not caused by Minerva skin; the extension causing the issue is already mentioned in the deprecation message, which is Extension:HitCounters.

Using MW 1.31. When using Minerva Neue in desktop or mobile and I try to edit any page containing one template, for example this one: https://lsj.gr/wiki/superabundance then the round animation keeps going on. (The header in my template is in the actual template). When there is more than one template, then there is no problem, i.e. https://lsj.gr/wiki/communis

Which version of Minerva are you using? If you are using MW 1.31 you must be using Minerva 1.31.

Correct, Minerva 1.31.

Are there any errors in your developer console? I suspect the API request is failing but cannot edit on that wiki so cannot confirm.

I get these (but I get them also in pages which can be edited)

JQMIGRATE: Migrate is installed with logging active, version 3.0.1

Use of "done" is deprecated. Use Promise compatible methods `then` and `catch` instead.

Use of "fail" is deprecated. Use Promise compatible methods `then` and `catch` instead.

Hmmm not sure what's going on here. I don't have much memory of problems with the 1.31 version. I'd advise upgrading as the best option here.

I see you are using Timeless. Have you considered dropping MobileFrontend and Minerva from that wiki? Perhaps you don't need either of them? Timeless works pretty well on a mobile device. Are you using any of the other mobilefrontend features?

No other mobile frontend features apart from standard functionality. I only started using MobileFrontend recently for better mobile support. Minerva is quite good on small devices. MW upgrade is too complex for now given that Elasticsearch will also need to be upgraded and I am not sure that this issue will go away in an upgrade; it could be that it is a bug related to my usage of headers in the templates, as it was this one Topic:W0trv6gw7uhng0u8. Would it make sense testing a later version of Minerva?

I am using the Minerva Neue skin in a self hosted wiki and want to change the colors in the header. Background should be #ff6600 and the navigational elements (burger menu, title, search field etc.) should be white. Where do I have to make these changes in the skin?

@Simon.dueckert: were you able to get it done?

You can make the changes in the following CSS file:

https://yourwikidomain.org/wiki/MediaWiki:Common.css

How can this be added? I use MW 1.31

Found it. I added this:

var timer = setInterval(function() {
     if ($('.menu ul:first').length) {
         console.log("mobile menu exists");
         clearInterval(timer);
         $('.menu ul:first').after(
             '<ul> \
                    <li> \
                    <a href="/wiki/Special:RecentChanges" \
                    class="mw-ui-icon mw-ui-icon-before mw-ui-icon-wikimedia-star-base20"> \
                    <span>Recent changes</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

How to make the main menu of Minerva neue open inwards, instead of outwards ?, as in version mw 1.33, when clicking on open menu it will open inwards after mw 1.34 but I didnt like it

At the bottom of each page there is a link to "Desktop". Is there any way to add more links to this footer area?

Using Minerva Neue in Desktop mode, as Page/Discussion tabs are not displayed above the title, there is no return link (i.e. link bringing you back to the original Page) on the following pages :

- Visual editor or wikitext editor in Desktop view (the "X" back command is present in Mobile view but not in Desktop view, this difference in behavior coming from core Mediawiki, not from Minerva Neue skin)

- History page when not using Special:History pages ($wgMFUseDesktopSpecialHistoryPage set to true)

What would be the best way to add a return link at the top of these pages?

I add examples of what I mean, using Wikipedia. On these pages forcing Minerva Neue Desktop mode, there is no return link bringing you back to the original "MediaWiki" page:

- WIkitext editor: https://en.wikipedia.org/w/index.php?title=MediaWiki&action=edit&useskin=minerva

- Visual editor: https://en.wikipedia.org/w/index.php?title=MediaWiki&veaction=edit&useskin=minerva

- History: https://en.wikipedia.org/w/index.php?title=MediaWiki&action=history&useskin=minerva

I really like using Minerva Neue to access my wiki on my phone. However, I find myself frequently having to switch to desktop mode just to be able to press the "Move" button to rename an article.

I know in the past I was able to enable the "History" button with $wgMinervaHistoryInPageActions. Is there a similiar option to enable Move?

https://phabricator.wikimedia.org/T231291 patch is welcome.

Thank you very much, I'll check that out.

Does anyone have some CSS for that? Thanks.

Seems there is no Dark Mode for hte Minerve_Neue skin yet, but there seems to be two for the Timeless skin (for example https://www.mediawiki.org/wiki/Skin:Timeless-DarkCSS although I couldn't make it work yet on my wiki) so you may want to use that one instead (IMO it is offer way better functions than Minerva_Neue).

If wfLoadSkin( 'Timeless' ); throws an error on your wiki, be sure to add $wgMFDefaultSkinClass = "SkinTimeless"; to your LocalSettings.php as well.

https://phabricator.wikimedia.org/T206094 has some code you can try.