Dan and Rebecca

MediaWiki Skins

by 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

122 Comments for this entry

  • bunni

    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

  • Medical revision blog

    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

  • James Rende

    I love this skin, but I have a question… how would a coder go about making the overall skin wider?

  • David Mathis

    This doesn’t seem to work for 1.16. No navigation options. It just opens to the main page with only a search box.

  • Jay

    Same issues here that David’s having. Not sure what’s broke.

  • Jay

    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.

  • Rob

    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…

  • Niko

    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 :-(

  • K3ndaar

    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

  • zoglun

    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

  • 萌娘百科

    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

  • zkvvoob

    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!

    • datguy

      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.

  • Alexandre

    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

  • MW Santa

    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.

  • Deimosfr

    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

  • MW Santa

    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.

  • MWSanta

    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.

    • Ovidiu

      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!

      • Dan

        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

  • Mzt

    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.

    • Dan

      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.

  • Ryan

    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.

  • Ted

    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!

  • Neanderthal

    Found a small typo(?) in Pixeled.php (skin for mediawiki 1.18). Line 129, “<?" should be changed to "<?php"

    Cool skin..! :)

    • Dan

      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. :)

  • Thora Grossnickle

    I don’t know why it took so long to implement such a basic feature, but it is good to have.

  • David Copherfield

    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!

    • Steve

      Re wptouch for mediawiki. Did anyone figure out how to differentiate between links to existing pages and links to non-existing pages in the CSS? I have a load of ‘pages required’ and currently the links to these look the same as links to existing articles when viewed on mobile OS.

  • atyu30

    mediaiwki-1.12.2.tar.gz + WPtouch_1.18_and_later.zip
    Problems:
    Classified information can not be displayed

  • atyu30

    sorry,my Environment
    mediawiki-1.20.2.tar.gz+WPtouch_1.18_and_later.zip

  • url shortener

    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?

  • Enrique

    I read a lot of interesting posts here. Probably you spend a
    lot of time writing, i know how to save you a lot of time,
    there is an online tool that creates unique, SEO friendly articles in minutes, just search
    in google – laranitas free content source

  • url shortener custom keyword

    May I simply say what a comfort to discover someone who
    actually understands what they are discussing on the web.
    You actually understand how to bring a problem to light and make it important.
    More and more people must check this out and understand this side of the story.
    I was surprised you’re not more popular given that you certainly have the gift.

9 Trackbacks / Pingbacks for this entry

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!