MediaWiki Skins

by Dan on Feb.27, 2010, under Uncategorized

I love MediaWiki. MediaWiki is the software that runs Wikipedia, as well as our personal wikis for work and personal use. Unfortunately, if you’ve seen Wikipedia, you know that the appearance is very dull, which is fine for consuming certain types of information, but not really suited for a personal site like this. That said, I’ve adapted a couple WordPress themes for MediaWiki use.

Disclosure: There are a couple instances of hard-coded text in the Pixeled theme that you’ll have to change for your own use/language. It’s the text relating to the search box found in the footer. All other text pulls from the MediaWiki config, but I just couldn’t find any MediaWiki provided messages that fit right. The CSS is also another place you might have issues. There are a few references to /mediawiki/skins/, which will cause issues for you if that’s not what your URI structure looks like.

Feel free to email me or comment on this post with any issues you run into, since I’m likely to run into them as well. Thanks.

Pixeled

This is based on the Pixel theme (version 1.9.2) developed by Sam for WordPress. It’s the dark 2-3 column styled skin that you see on this site if you’re using a non-mobile web browser.	Example
Download for MediaWiki 1.17 and earlier Download for MediaWiki 1.18 and later

WPtouch

This is based on the WPtouch theme (version 1.9.8.3) developed by Dale Mugford & Duane Storey for WordPress. It’s the skin that you see on this site if you’re using a mobile web browser.	Example
Download for MediaWiki 1.17 and earlier Download for MediaWiki 1.18 and later

119 Comments for this entry

bunni
March 4th, 2011 on 9:44 pm
Dan,

Great work! Thanks much for the skin, imfdb.org is looking much better on mobile. I did find one bug, the skin looks for images in the /mediawiki/skins/wptouch/images directory, but my install isn’t in the default directory. If you used the {$IP} variable the skin would work on non-standard installs.

Best,
Chris

Reply
Medical revision blog
March 20th, 2011 on 2:32 am
Hey dude,

Used this to great success on my medical revision wiki at http://www.medrevise.co.uk

One question: any idea how to get a “view the full site instead of mobile” link at the bottom?

Bless,
Chris

Reply
- Jeffrey
  July 17th, 2011 on 8:20 pm
  Wow, yours works great. I have my wiki installed in a sub-folder. Can you help me get it working?
  
  Reply
James Rende
April 26th, 2011 on 9:50 pm
I love this skin, but I have a question… how would a coder go about making the overall skin wider?

Reply
David Mathis
June 4th, 2011 on 5:59 pm
This doesn’t seem to work for 1.16. No navigation options. It just opens to the main page with only a search box.

Reply
Jay
June 4th, 2011 on 9:57 pm
Same issues here that David’s having. Not sure what’s broke.

Reply
Jay
June 4th, 2011 on 11:31 pm
I found a few things wrong, mostly in the compressed css. The paths are wrong, take out the /mediawiki and you’re good. Also, I noticed a holdover from wordpress, and took out the link for the titles in WPtouch.php. It works well on my site now.

I do wish there was some additional colors besides the black.

Reply
Rob
July 4th, 2011 on 3:15 pm
Love the Skin, thanks. As a newbie to MW it was a bit tough to get running based on the instructions, they could be clearer.

Anyways, I noted that in the special Pages (file uploads, etc) the tables are rendered in white text on a white background. I’ve been poking around the CSS to sort out a fix for a little while without success. It’s a small bug but a niggle, nonetheless…

Reply
Niko
July 15th, 2011 on 4:00 am
Hi Dan,

I really like the “Pixeled” theme for MW. By any chance, do you (or someone else reading this blog) have the original PSD file for the background available somewhere?

The previously posted link (http://samk.ca/mememe/bg_pixel_by_samk.ca.zip) does not work anymore

Reply
- TW
  August 22nd, 2011 on 7:57 am
  Niko: The Wayback Machine has a copy of it at http://web.archive.org/web/20090927131341/http://samk.ca/mememe/bg_pixel_by_samk.ca.zip
  
  Reply
K3ndaar
September 1st, 2011 on 5:37 am
Don’t know if anyone found this bug: as I installed mediawiki on http://example.com/wiki i had to modify line 104 of Pixeled.php changing

to

<a href="text(‘scriptpath’) ?>/”>

This way, clicking on the wiki name (sitetitle) I can go back to Main Page.

HTH

Reply
zoglun
October 16th, 2011 on 1:15 pm
Hi, sir!

there are a little problem.

the path to skin’s image should not be

“/mediawiki/skins/wptouch/images/wptouch-menu-dropper.png”

It should be “/skins/wptouch/images/wptouch-menu-dropper.png”

you type more /mediawiki in “style-compressed.css” and other css files

Reply
萌娘百科
October 18th, 2011 on 9:26 am
Here are also another problem:

The category page show beyond the page like these in photo:

http://i.minus.com/isLiVqRPSSV7W.png

The page link is:
http://wiki.moegirl.org/Category:%E6%BC%AB%E7%94%BB

Reply
zkvvoob
November 29th, 2011 on 11:36 am
Hello!

First of all, I want to thank you for porting the WPTouch skins to MediaWiki – when I found a link to it, I knew this was exactly how I wanted my wiki to look like on a mobile device.

That said, I do have a small problem with this particular skin. Namely, this line appears at the top:

Strict Standards: Declaration of SkinWPtouch::initPage() should be compatible with that of Skin_Orig::initPage() in /home/vaklush/public_html/publications/skins/WPtouch.php on line 17

Do you have any idea what might be causing this error and how to correct the problem?

Thanks in advance!

Reply
- datguy
  April 16th, 2013 on 9:11 pm
  I installed WPTouch on the latest version of MediaWiki, and I ran into the initPage problem mentioned by at least one other user. Find out how I fixed it on my blog (http://dat.bz/XFq57a). I also noticed my blog entry linked in the trackbacks at the bottom of this page.
  
  Reply
Alexandre
December 2nd, 2011 on 4:04 pm
Hello all!

I installed MediaWiki 1.18 and now, I have a problem with wptouch.

I have the error: “Call to undefined method SkinWPtouch::tooltipAndAccesskey”

Does someone know what is it?

Thanks a lot!

Alexandre

Reply
- 萌娘百科
  December 7th, 2011 on 7:54 am
  Oh yeah, the same problem.
  
  1.18 re write the way how mediawiki generate the skins.
  
  So this mobile skin need some adjust too.
  
  Reply
MW Santa
December 19th, 2011 on 8:13 am
Here’s an update for the WPTouch for 1.18.0 with fixes and minor improvements.
http://www.2shared.com/file/PDT47NM-/MW_1-18-0_WPTouch.html

Could someone please upload this to a more permanent location and link it on the Mediawiki website?
http://www.mediawiki.org/wiki/Manual:Gallery_of_user_styles#WPtouch

Happy holidays!
- Your mediawiki Santa for this year.

Reply
Deimosfr
December 28th, 2011 on 5:57 am
Hi,

The link does not work on mediawiki website : http://www.mediawiki.org/wiki/Manual:Gallery_of_user_styles#WPtouch

Where could I find a working version please ?

Thanks

Reply
- Alexandre
  January 1st, 2012 on 6:14 am
  On the link that you put, I saw a link for WPTouch and MediaWiki 1.18: http://www.2shared.com/file/PDT47NM-/MW_1-18-0_WPTouch.html
  
  Installed and it is fully functional! Great!
  
  Reply
  - Ovidiu
    January 2nd, 2012 on 2:43 pm
    Hi,
    
    It works pretty nice, but I cannot find how to Edit Main Page when I’m logged in.
    Can you help ?
    
    Reply
MW Santa
January 4th, 2012 on 9:26 pm
Nice that it worked for you guys.
Ovi, I think this skin is only for viewing as far as I know (not editing). Although you can try logging in and see what you get.

Reply
- Ovidiu
  January 6th, 2012 on 5:04 am
  Well, I have to switch back to Monobook for editing of Main Page, while other chapters can be edited on page. Basically, there is no Edit feature for whole page when you’re logged in. Thanks!
  
  Reply
  - Dan
    January 27th, 2012 on 5:26 pm
    I’ve created a new build for MediaWiki 1.18 and later that supports this. There’s a note in the README file on how to enable the function.
    
    Reply
MWSanta
January 8th, 2012 on 6:00 pm
Yea that was how the original skin was too which Dan made. I didnt figure out a way to make an edit link for a page. I guess that link could be right next to the first heading, or in the toolbox section. I’ll probably leave it like that, since I edit stuff mostly from the computer but others are welcome to create that feature if they want to.

Reply
- Ovidiu
  January 9th, 2012 on 6:08 pm
  Thank you for this great skin. I really like it and I’m going to use it. Initially, I thought that Edit link for page might be within Menu. Can you explain how do edit from computer most of stuff via private reply ? Thanks!
  
  Reply
  - Dan
    January 10th, 2012 on 10:33 pm
    Yeah, being that this is a mobile skin, I didn’t add any edit capability to it. Part of the the reason was also that I’d have the calculate the width of the input box, which seemed like a like of work considering the acceptable range would vary per device, and possibly per browser. The code’s out there though, so if anyone using the theme chose to add the functionality, it’s possible they may have re-posted it. Sorry about that. Hope you enjoy the skin otherwise. -Dan
    
    Reply
Mzt
January 18th, 2012 on 1:47 am
Beautiful!
I installed Pixeled skin on mediawiki 1.17 and works like a charm, however it’s not working as well on version 1.18.
As said before, 1.18 rewrite the way how mediawiki generate the skins, and it comes with an error.
Anyone knows if there is any solutions?
Tnx.

Reply
- Dan
  January 18th, 2012 on 9:49 am
  It basically comes down to a re-write of the skin. Version 1.18 got rid of the now legacy skinning system. There’s talk of them bringing back the support with the next release, but I’m also working on rewriting the theme to support the new structure. I’m very close, but there are still a few CSS-related items that need to be addressed. It’ll probably be a week at most before it’s looking like its former glory.
  
  Reply
  - Mzt
    January 22nd, 2012 on 3:38 pm
    Thanks Dan, I’m sure you are getting through it eventually. I’ll stay tuned for more news on the skin then. Thanks a lot, man!
    
    Reply
    - Dan
      January 25th, 2012 on 6:28 pm
      Alright, give this a shot and let me know how it goes. I’ve upgraded to 1.18 and this is what I’m running: Pixeled_1.18_and_later.zip.
      
      Reply
      - Mzt
        January 26th, 2012 on 10:40 am
        Everything goes swimmingly. I made my testing on a clean mediawiki1.18 installation though, so I’ll report any issue to you when I upgrade my “real” mediawiki.
        Thanks very much.
Ryan
January 31st, 2012 on 2:47 pm
I’m curious if you might consider adding support for multiple navigation blocks? That is to say if you modify the sidebar with multiple lists for navigation the additional lists appear with many other skins but not your Pixeled skin. For example, see the main mediawiki.org site and the MediaWiki:Sidebar article for the support, download, development, etc blocks…

Your WPtouch skin does include such additional nav blocks, but you might be able to improve it by doing nested expansion of those blocks…

Great work, TY.

Reply
Ted
February 5th, 2012 on 8:24 pm
I just moved my blog to WordPress this year and installed WPtouch a couple of days ago. Then I found this great skin and installed it on my wiki. Now they are both really easy to read on my iPod touch and I was able to grab them with an offline browser so I have them on the iPod all the time. Thanks so much for your work!

Reply
Neanderthal
February 19th, 2012 on 12:03 pm
Found a small typo(?) in Pixeled.php (skin for mediawiki 1.18). Line 129, “<?" should be changed to "<?php"

Cool skin..!

Reply
- Dan
  March 18th, 2012 on 3:14 pm
  Thanks for pointing that out. I’ve corrected the that in the new build. I have short_open_tag enabled, so I’d have never caught that.
  
  Reply
Thora Grossnickle
April 15th, 2012 on 10:28 am
I don’t know why it took so long to implement such a basic feature, but it is good to have.

Reply
David Copherfield
May 23rd, 2012 on 1:54 pm
Hello guys!
Thanks for this epic theme (the only one i actually found epic for wiki and easy to edit)

I made a version out of it at http://emcwiki.com
I would love to ask you guys which .css line (or php code) reffers to the already existing pages and the ones that doesnt exist yet (there is a difference between them, i just can’t find the right code to change the colours)

What i want to change it’s the little table at the bottom of the page, it has some links to pages that exist/not yet but they are not differenciated yet.

Thanks for this, again!

Reply
atyu30
December 12th, 2012 on 10:38 pm
mediaiwki-1.12.2.tar.gz + WPtouch_1.18_and_later.zip
Problems:
Classified information can not be displayed

Reply
atyu30
December 12th, 2012 on 10:46 pm
sorry,my Environment
mediawiki-1.20.2.tar.gz+WPtouch_1.18_and_later.zip

Reply
url shortener
January 3rd, 2013 on 10:19 am
I know this website presents quality dependent articles and extra information, is there any other web site which gives these kinds
of stuff in quality?

Reply