Let's say I have installed the latest (currently 1.38.2) MediaWiki.
How do I make my website responsive to mobile displays?
Welcome to the MediaWiki Support desk, where you can ask MediaWiki questions!
(Read this message in a different language)
|
Text is available under the Creative Commons Attribution-ShareAlike License; additional terms may apply. See Terms of Use for details.
Let's say I have installed the latest (currently 1.38.2) MediaWiki.
How do I make my website responsive to mobile displays?
This wasn't enough:
# Skin settings wfLoadSkin( 'Vector' ); $wgDefaultSkin = "vector"; wfLoadSkin( 'MinervaNeue' ); $wgDefaultMobileSkin = "minerva";
Are you loading MobileFrontend? $wgDefaultMobileSkin = "minerva" wont do anything without it.
I didn't load it. I should load it.
I thank you for clarifying that here:
I upgraded 1.36.0 to 1.38.2 and all went well, but I knew I would have to deal with a lot of spam account requests over the last few months. After the upgrade when I click "Confirm Account Requests" I get the error:
[YvX5Ud3_A3YQ4t5wzV-CqAAAAAk] 2022-08-12 06:55:13: Fatal exception of type "Error"
I hope someone can point me in the right direction here.
I'm running this on FreeBSD 13.1.
Set $wgShowExceptionDetails = true; and report back the more detailed error message
Site is warning me that this is harmful or unconstructive. If I'm not submitting this properly, please let me know. I do appreciate the help.
[YvZ6fQayAYYB7SUqTjm6cQAAAAM] /wiki/index.php/Special:ConfirmAccounts Error: Undefined constant "DB_SLAVE"
Backtrace:
from /usr/local/www/apache24/data/wiki/extensions/ConfirmAccount/backend/ConfirmAccount.class.php(148)
#0 /usr/local/www/apache24/data/wiki/extensions/ConfirmAccount/frontend/specialpages/actions/ConfirmAccount_body.php(209): ConfirmAccount::getOpenRequestCount(integer)
#1 /usr/local/www/apache24/data/wiki/extensions/ConfirmAccount/frontend/specialpages/actions/ConfirmAccount_body.php(109): ConfirmAccountsPage->showQueues()
#2 /usr/local/www/apache24/data/wiki/includes/specialpage/SpecialPage.php(671): ConfirmAccountsPage->execute(NULL)
#3 /usr/local/www/apache24/data/wiki/includes/specialpage/SpecialPageFactory.php(1378): SpecialPage->run(NULL)
#4 /usr/local/www/apache24/data/wiki/includes/MediaWiki.php(315): MediaWiki\SpecialPage\SpecialPageFactory->executePath(string, RequestContext)
#5 /usr/local/www/apache24/data/wiki/includes/MediaWiki.php(912): MediaWiki->performRequest()
#6 /usr/local/www/apache24/data/wiki/includes/MediaWiki.php(563): MediaWiki->main()
#7 /usr/local/www/apache24/data/wiki/index.php(53): MediaWiki->run()
#8 /usr/local/www/apache24/data/wiki/index.php(46): wfIndexMain()
#9 {main}
Dont worry about the warning. Sometimes the spam filters are a bit aggressive.
I think your version of ConfirmAccount is too old. Can you try updating it, to match the version of mediawiki you are using?
Thanks so much. I had completely forgotten that I had ever added anything third party.
MediaWiki 1.38.2.
I understand that since version 1.35 it is no longer required to install Extension:MobileFrontend to use Skin:Minerva Neue as a mobile-display skin.
It's not clear to me from the documentation how than to use Minerva_Neue as a mobile-display skin? How to enable it alongside Vector?
> I understand that since version 1.35 it is no longer required to install Extension:MobileFrontend to use Skin:Minerva Neue as a mobile-display skin.
This is incorrect. It is not required to use it as a skin. It is still required if you want to use it as a mobile only skin.
MediaWiki 1.38.2 website without any non-core extensions or skins installed.
Skin:Vector not responsive by default but I understand from its webpage that there is an experimental way to make responsive.
1) Should I just add wgVectorResponsive = true;
to LocalSettings.php?
2) Is this experimental option SEO friendly from your experience? Would you recommend not using it and preferring another approach to get screen-responsivness?
Adding $wgVectorResponsive = true;
to LocalSettings.php didn't make the website responsive.
I don't use Vector and have to upgrade my skin when I upgrade mediawiki. It sounds from what you said that this isn't relevant to you.
@Jonathan3 What do you mean by upgrade your skin?
As far as I know, skins are upgraded (or not, it depends if there is anything in the skin to upgrade) whenever you upgrade MediaWiki.
@Jonathan3 Of course, I meant only to core skins.
Anyway I misunderstand the point you were trying to make even after visiting that link.
It's one of the dumber design aspects of MediaWiki and Wikipedia and their skins that the site fills 100% of the screen width, regardless of resolution, leading to a ridiculous appearance on high resolution monitors.
Short of a grid layout or other sophisticated approaches, what is required is a sensible max-width for the entire site layout, in the order of 1000 - 1300 px I suggest, allowing the site to scale horizontally below that but freeze on decent res screens.
I had a bunch of CSS modifications for Monobook that worked well, but they made use of the #globalWrapper which is not present in Vector. I am trying to migrate my old Monobook styling across to Vector.
I played around with adding styles to the various page elements in Vector, and even the <body> tag, but ended up frustrated trying to get the header and sidebar elements to cooperate.
Has anyone worked out some CSS for Vector that does the trick?
This is as close as I can get:
/* upper blue line */
#mw-head-base {
margin-left: auto !important;
margin-right: auto !important;
max-width: 1000px !important;
}
/* lower blue line + footer content */
#footer {
margin-left: auto !important;
margin-right: auto !important;
max-width: 1000px !important;
}
/* main content */
#content {
margin-left: auto !important;
margin-right: auto !important;
max-width: 1000px;
}
Yep I got about as far myself.
Just came up with something I like a little better:
/* upper blue line */
#mw-head-base {
margin-left: auto !important;
margin-right: auto !important;
max-width: 1000px !important;
}
/* lower blue line + footer content */
#footer {
margin-left: auto !important;
margin-right: auto !important;
max-width: 1000px !important;
}
/* main content */
#content {
margin-left: auto !important;
margin-right: auto !important;
max-width: 1000px;
}
#bodyContent {
z-index: 10;
}
#mw-navigation {
margin-right: auto !important;
max-width: 1190px;
min-width: 1000px;
position: absolute;
top: 0;
left: 50%;
margin-left: -500px;
}
div#mw-panel {
position: relative;
left: 0;
margin-left: -190px;
width:160px;
}
div#mw-head {
position: relative;
right: 0;
margin-right: 0;
max-width: 1000px;
}
I don't have time to do more now. And I still don't understand why you don't adjust your window to make it look better. But maybe someone else can offer more help.
For me, I want to do this because my browser window has other tabs that conform to modern browsing standards, so I don't want to resize my window every time I switch to or from a wikipedia tab.
If someone is able to help, I think I almost have it, on a very vanilla vector-skinned site: http://www.aerenamasters.com/wiki/index.php?title=MediaWiki:Common.css
I can't figure out how to make the navigation behave well:
/* working ... */
#content{
margin-left:auto !important;
margin-right:auto;
max-width: 950px;
}
#footer {
margin-left: auto !important;
margin-right: auto;
max-width: 950px;
}
/* testing */
#mw-navigation {
margin-left: auto !important;
margin-right: auto;
max-width: 1140px;
top: 0;
}
Thanks for any help!
For anyone who wants to try this but doesn't know how, you need to put it on your common.css page.
I entirely disagree. One of the attributes of the 2022 redesign of Vector is that it does not adapt to the size of my screen past a certain amount.
For Vector skin put next lines into MediaWiki:Vector.css
or into
your custom vector.css.
/* set max width and fix the background */ html, body { position: relative; margin-left: auto !important; margin-right: auto !important; max-width: 1280px; background-position: top left; background-repeat: repeat-x; background-size: 100% 5em; background-image: url(/skins/Vector/images/page-fade.png); background-color: #f6f6f6; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#ffffff),color-stop(100%,#f6f6f6)); background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%); background-image: -moz-linear-gradient(top,#ffffff 50%,#f6f6f6 100%); background-image: linear-gradient(#ffffff 50%,#f6f6f6 100%); } /* set blue right border */ .mw-body { border-right: 1px solid #A7D7F9; } /** fix the position of: personal user menu search bar the pop-up indicator of language selector search suggestions **/ #p-personal { right: 3pt; } #p-search { margin-right: 3pt; } .imeselector { position: fixed; } .suggestions { right: 3pt !important; }
If you want to apply this CSS for the restricted pages, write down next line into your `LocalSettings.php`, but first check this comment:
$wgAllowSiteCSSOnRestrictedPages = true;
The problem that I can not solve completely is the behaviour of some pop ups as these of Extension:Popups.
Spas.Z.Spasov's CSS causes some offset problems (with Extension:Popups, with some unfolding combobox and with some dialogs). This alternative option seems to cause less offsets.
/* set max width and fix the background, see skinVector.patch */ #wikirouge-bodycontent-wrapper { position: relative; margin-left: auto !important; margin-right: auto !important; max-width: 1100px; } html, body { background-position: top left; background-repeat: repeat-x; background-size: 100% 5em; background-image: url(/skins/Vector/images/page-fade.png); background-color: #f6f6f6; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#ffffff),color-stop(100%,#f6f6f6)); background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%); background-image: -moz-linear-gradient(top,#ffffff 50%,#f6f6f6 100%); background-image: linear-gradient(#ffffff 50%,#f6f6f6 100%); } /** fix the position of: personal user menu search bar the pop-up indicator of language selector search suggestions **/ #p-personal { right: 3pt; } #p-search { margin-right: 3pt; } .imeselector { position: fixed; } .suggestions { right: 3pt !important; }
But it needs to be combined with this patch :
--- skins/Vector/includes/templates/index.mustache (date 1571250157017) +++ skins/Vector/includes/templates/index.mustache (date 1571250157017) @@ -1,4 +1,5 @@ {{{html-headelement}}} +<div id="wikirouge-bodycontent-wrapper"> <div id="mw-page-base" class="noprint"></div> <div id="mw-head-base" class="noprint"></div> <div id="content" class="mw-body" role="main"> @@ -32,5 +33,6 @@ {{! html-unported outputs <div id="mw-navigation"> and <div id="footer"> }} {{{html-unported}}} {{{html-printtail}}} +</div> </body> </html>
You have to edit this file
skins/Vector/includes/templates/index.mustache
And add the lines marked with a " + " (here, just a div tag) at the right place.
(This syntax enables you to make it automatically using some tools)
The idea provided by @Varlin is great, except the part we need to edit some core files that would cause some additional actions on update. So the another way to add such wrapper is by using the a hook in the LocalSttings.php
file:
/** * Skin Vector Max Width Wrapper **/ $wgHooks['AfterFinalPageOutput'][] = 'skinVectorWidthWrapper::onAfterFinalPageOutput'; class skinVectorWidthWrapper{ public static function onAfterFinalPageOutput( $output ) { $out = ob_get_clean(); // change final html in $out ob_start(); /* split the string contained in $html in three parts: * everything before the <body> tag * the body tag with any attributes in it * everything following the body tag * Ref.: https://stackoverflow.com/a/2216352/6543935 */ $matches = preg_split('/(<body.*?>)/i', $out, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE); echo $matches[0] . '<div id="skin-vector-maxwidth-wrapper">' . $matches[1] . $matches[2] . '</div>'; return true; } }
Then the CSS code in Vector.css
should be similar as the sown above:
/** * Skin Vector Max Width, see skinVectorWidthWrapper::onAfterFinalPageOutput **/ #skin-vector-maxwidth-wrapper { position: relative; margin-left: auto; margin-right: auto; max-width: 1460px; } html, body { background-position: top left; background-repeat: repeat-x; background-size: 100% 5em; background-image: url(/skins/Vector/images/page-fade.png); background-color: #f6f6f6; background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#ffffff),color-stop(100%,#f6f6f6)); background-image: -webkit-linear-gradient(top,#ffffff 50%,#f6f6f6 100%); background-image: -moz-linear-gradient(top,#ffffff 50%,#f6f6f6 100%); background-image: linear-gradient(#ffffff 50%,#f6f6f6 100%); } @media print { #skin-vector-maxwidth-wrapper { position: relative; margin-left: 0; margin-right: 0; max-width: 100%; } html, body { background:none; } } /** * Skin Vector Max Width: fix the position of: * personal user menu * search bar * add right blue border **/ #p-personal { right: 3pt; } #p-search { margin-right: 3pt; } .mw-body { border-right: 1px solid #A7D7F9; }
When I have enough time, I will create a small extension in order to provide this functionality in more elegant way.
If your standards are low enough, simply adding a max-width to Mediawiki:Vector.css as below will at least keep the content constrained. It's not centered and the interface links will be way out to the right, but you won't have to look at sprawling content on your colleagues monitor.
#bodyContent { font-size: 0.81em; max-width:1000px; }
Hello !!
I need to change the login page (so that the sidebar and the headerbar don't appear) but i can't find the page to change that.
You can use css in mediawiki:common.css if $wgAllowSiteCSSOnRestrictedPages is set to true
I have an issue with short URLs, despite trying to follow the guide there.
My server is running Ubuntu 22.04.1 "jammy" and can be reached at https://ornans.wiki
. I installed MediaWiki with apt install mediawiki
and have the following software versions:
- dpkg -s mediawiki | grep Version
returns Version: 1:1.35.6-1
- apache2 -v
returns Server version: Apache/2.4.52 (Ubuntu)
- mysql --version
returns mysql Ver 8.0.30-0ubuntu0.22.04.1 for Linux on x86_64 ((Ubuntu))
My MediaWiki install is located at /var/lib/mediawiki/
(so this is the location of my LocalSettings.php
) and I made a symlink from /var/www/html
to that folder (with the command ln -s /var/lib/mediawiki /var/www/html
).
In my LocalSettings.php
, wgScriptPath
is set to "/mediawiki"
.
My Apache HTTPS config, located at /etc/apache2/sites-available/000-default.conf
is:
<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
RewriteEngine on
RewriteCond %{SERVER_NAME} =www.ornans.wiki [OR]
RewriteCond %{SERVER_NAME} =ornans.wiki
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
# Short URL for wiki pages
RewriteRule ^/?w(/.*)?$ %{DOCUMENT_ROOT}/mediawiki/index.php [L]
# Redirect / to Main Page
RewriteRule ^/*$ %{DOCUMENT_ROOT}/mediawiki/index.php [L]
</VirtualHost>
The HTTPS config, located at /etc/apache2/sites-available/000-default-le-ssl.conf
is:
<IfModule mod_ssl.c>
<VirtualHost *:443>
any further virtual host explicitly.
ServerAdmin webmaster@localhost
DocumentRoot /var/www/html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
Alias /w /var/lib/mediawiki/index.php
# Enable the rewrite engine
RewriteEngine On
# Redirect / to Main Page
RewriteRule ^/*$ %{DOCUMENT_ROOT}/mediawiki/index.php [L]
ServerName www.ornans.wiki
Include /etc/letsencrypt/options-ssl-apache.conf
ServerAlias ornans.wiki
SSLCertificateFile /etc/letsencrypt/live/www.ornans.wiki/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/www.ornans.wiki/privkey.pem
</VirtualHost>
</IfModule>
I would like my wiki to be accessed at w
, without any browser URL rewriting. This means that I would like to write ornans.wiki/w/My_Page
and it should show the page "My Page" while the URL displayed in the URL bar in the browser stays the same.
Does anyone know what I need to change in order for my MediaWiki install to work as I expect?
Your apache config looks fine.
I think that your $wgArticlePath in LocalSettings.php is wrong. Try setting it to '/w/$1'
In "Page information", I can see "Recent number of edits". The interval for recent edits is the same as the maximum allowed value for "Days to show in recent changes" and "Days to show in watchlist" in Special:Preferences. The interval for recent edits is set 30 days on Wikimedia projects, and 5 years on translatewiki.net. Is it defined in $wgRCMaxAge, or another configuration setting?
See Manual:Installing MediaWiki. If you have specific questions, please ask specific questions. Thanks!
Very helpful. Problem solved. Many Thanks.
Hello, I created a template infobox in my wiki. If I insert the info box with brackets in the lemma, the template appears correctly. After inserting the data, I save the lemma, but the info box remains empty (no data). How do I have to program the template so that the template is inserted into the lemma (without using subst) and the info box filled with data becomes visible in the lemma after saving? LG Abrape
I guess lemma is a word for page.
Copy and paste your page (at least the part calling the template) and your template here and we'll see!
[[Datei:<Name>.png|thumb|center|<Berg>]] |
Name = |
Höhe in m ü. NHN = |
Lage = |
Gebirge = |
Breitengrad = |
Längengrad = |
Typ = |
Gestein = |
Bauwerke = |
Could you also copy and paste your page?
In the template, you need to add the parameters. E.g. it might have Name = {{{Name|}}}
if your page has {{Templatename|Name=Joe Bloggs}}
.
Done. Thank you for your help!
[[Datei:<Name>.png|thumb|center|<Berg>]] |
Name = |
Höhe in m ü. NHN = |
Lage = |
Gebirge = |
Breitengrad = |
Längengrad = |
Typ = |
Gestein = |
Bauwerke = |
That looks like the Template page rather than the content page. Could you send both?
It's surrounded by noinclude tags. That tells mediawiki not to include the text between the tags when the template is used. You could change them to includeonly and see what difference it makes.
Also I wonder whether template parameters are case sensitive. I can't remember.
The copy of the side box has no reference here and therefore only Template:Testberg appears here. Sorry!
I don't know what that means.
If you mean how it appears on this website, don't worry - I can click "edit" to see what you copy/pasted.
It would be good to see two things:
1. The name and content of the page containing the template code, e.g. Template:Testberg is the name and <includeonly>...</includeonly>
is the content.
2. The content of the call to the template, e.g. {{Testberg|name=Berlin}}
.
{{Infobox Test |NAME=Testberg |BILD= |BILDBESCHREIBUNG= |HÖHE=708 |HÖHE-BEZUG=DE-NHN |LAGE=[[Bayern]], [[Deutschland]] |GEBIRGE=[[Fichtelgebirge]] |BREITENGRAD=49/56/49/N |LÄNGENGRAD=12/08/10/E |REGION-ISO=DE-BY |TYP= |GESTEIN=Basalt |ALTER= |ERSTBESTEIGUNG= |BESONDERHEITEN= }}