Dan and Rebecca

MediaWiki skins updated for 1.18+

by on Jan.25, 2012, under Uncategorized

A while back I’d created a couple MediaWiki skins for my own personal use, based on some WordPress themes that I use, and then put them out on the web for all to enjoy. It turns out that a lot of people tried them out. Then MediaWiki 1.18 came out and had dropped support for their now legacy skinning system. I’d been running version 1.15.2 probably since it came out, so it didn’t bother me, but I realize that doesn’t help anyone, so I recently upgraded to version 1.18 to feel the pain. I’m not a developer, I’m a SysAdmin, so it took a good amount of time, but here they are…


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


This is based on the WPtouch theme (version 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

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.

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.

36 Comments for this entry

  • Steve

    On 1.18, using Pixeled I get the following error. Please help. I am not a programmer.

    Fatal error: Call to undefined method SkinPixeled::getOutput() in /var/www/wiki.serviceobjects.net/skins/Pixeled.php on line 32

    • Dan

      Nor am I. :) The core logic of the function, getCategoryLinks, was taken from “includes/Skin.php”. The original function starts at line 500 in my MediaWiki installation. It may be that your copy of that file somehow differs, and that it does not use the “$this->getOutput();” syntax. It may also be that the “includes/SkinTemplate.php” that is called at line 9 of Pixeled.php is not able to be located or loaded. Hopefully this little identify the issue.

    • Demetre

      Found the issue with “$this-getOutput()”, looks like that is no longer available. Change it to use removed it and use $out and instead used global $wgOut instead anywhere is saw $out being used as outlined below, but now I get this error, any ideas why:

      fatal error: call to undefined method pixeledtemplate::titleattrib() in /includes/linker.php on line 2027

      Code Changes:

      function getCategoryLinks() {
      global $wgOut, $wgUseCategoryBrowser;

      if ( count( $wgOut->mCategoryLinks ) == 0 ) {
      return ”;

      $embed = “”;
      $pop = “”;

      $allCats = $wgOut->getCategoryLinks();

  • Dan Wright

    I love the look of your template, but it doesn’t work for long pages. The background image cuts off and you’re left with an ugly black background when you scroll past the background image.

    Any ideas?

  • Stitch

    Just installed it, looks really good. Using it now :)

    Just so you know: the search might not work with rewriting. We use index.php?…. for searching, anything else makes a 404.

    The new WikiEditor has some problems (doesn’t show up)

    The search preferences form (with the checkboxes) isn’t completely skinned (unreadable). Information above images is unreadable.

    And the preferences page looks a bit messy.

    Do we care? no we do not since we got this for free :)… We’ll be switching to another template in a few months, but where extremely bored by the default vector skin.

  • Paul Littlefield

    Hi Dan

    Thanks for developing WPouch.

    I am missing the icons and menu button for the top-right drop-down on our site – http://wiki.indie-it.com

    What am I doing wrong?

    Also, do you accept cash donations?




  • alkopedia

    I’ve installed the WPtouch skin on my wiki and there are two issues:
    1. The logo icon obviously is not found because it wants to load src=”/apple-touch-icon.png”. I’ve hardcoded this to an image inside my wiki dir, but better idea would be to set it in Localsettings.php, too. Of course it must be a different logo than with the default skin. BTW: what is the correct size for the WPtouch logo? I’ve used 48px.
    2. The categories pages use 3 columns, which don’t fit on my phone’s display in portrait mode. My phone has a resolution of 1280×720 px so I guess it will be even worse on smaller phones. Could this somehow be changed to 2 colums view?

  • Sean

    Hey Dan, I use a modified version of your skin at http://wiki.fomportal.com the problem is that no matter what I do, I cant get the sidebar to change!
    Its set up correctly in the sidebar page but its not changing.
    Could you get in contact with me at 06sean@gmail.com ?

  • Jonathan

    Hey Dan,
    I’m not a very experienced wiki skin programmer but I was loving pixeled for my Star Trek group but do you have anything that identifies what elements are named what. I was trying to get the sidebar to be constantly on the left side of the main content area and remove it from the footer area. Any help you can offer would be greatly appreciated.


  • Jenn

    Loving the pixeled skin, but I’ve had a few problems.

    I managed to fix up main.css so that wikitable tables would be readable, with your stylesheet they are not. (the headers are white on white…)

    The “Printable version” of any page is very, very, very much not printable, it’s a horror show that I don’t want to touch yet, but I’ll have to because that feature is needed on my wiki

    And last but not least, I like the way wikis in general differentiate between links to pages that do or do not exist via colour… but I can’t for the life of me figure out how to put that feature back into your skin, rather than white all the time.

    Thanks for a great looking skin though!

  • Justin

    Having trouble getting the WPTouch skin to work with maps/semanticmaps extension. https://www.mediawiki.org/wiki/Maps . Anyone else having this problem, or know of a fix. Guessing it’s a javascript error, but no idea how to fix. LOVE this skin for mobile, but can’t use it on my http://www.wikiwhereis.com site without maps :-\ Thanks

    • Justin

      Ended up being a problem with the static header that the skin used. Copied over a dynamic header from one of the main skins, and it’s loading the necessary javascript for the extensions now. Thanks

  • Bomyne

    Is there a way to make pixeled flexible width (So that it takes up the whole browser screen no matter the resolution) rather then fixed? Thanks. Awesome skin.

  • atyu30

    Classified information can not be displayed

    • atyu30

      WPtouch.php Add this line:

      html( ‘catlinks’ );?>

      wptouch/css/main.css Add this line:
      /* Footer */
      div#footer {
      margin-left: 10em;
      margin-top: 0;
      padding: 0.75em;
      /* @embed */
      background-position: top left;
      background-repeat: repeat-x;
      direction: ltr;
      div#footer ul {
      list-style: none;
      list-style-image: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      div#footer ul li {
      margin: 0;
      padding: 0;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      color: #333;
      font-size: 0.7em;

  • Guilherme

    Hello everyone!
    I’m using the WPTouch for MediaWiki 1.19.2 and I need to know a few things: is there a way to make the main page content of the mobile version be different from the desktop version? If so, how can I do it?
    Thanks and sorry for any english mistakes.

  • Michael Greis

    Hi! I use WPTouch for several blog sites and I’d really like to use it for my wikis. I’m running into a couple of problems. Can anyone help?

    I’m running MW 1.20.2.

    1) I get the following message at the top of every screen:

    Strict Standards: Declaration of SkinWPtouch::initPage() should be compatible with that of Skin::initPage() in /var/www/vhosts/michaelgreis.org/httpdocs/wiki/skins/WPtouch.php on line 21

    There’s a reference to this problem as a comment to the original post announcing these skins, but no solution.

    2) Unable to enable content actions

    I set $Display_Actions = true; in the WPTouch.php file, but nothing changes (even after clearing the iPhone cache).

    Either way, I just get a single screen with all the main window contents. The pull-down at the top of the screen has the navigation that was formerly on the left side. There is nothing else at the top (where the Edit/History/etc. should presumably be).

    There is nothing at the bottom past the content. Is there supposed to be a “switch to regular view” as there is in the WordPress implementation?

    Thanks for any help you can provide!


    • datguy

      I installed WPTouch on MediaWiki 1.19.2, and I ran into the initPage problem you mentioned. Find out how I fixed it on my blog (http://dat.bz/XFq57a). I also successfully enabled Display_Actions, but the actions were a bit hidden in portrait mode. Check out my blog for pictures.

  • Michael Greis

    Thanks for the suggestion, Datguy. It worked for me as well.

    Your suggestion worked as advertised – thanks!

    The portrait mode display was a bit of a problem. The last item (Actions) wasn’t accessible because it was underneath the items in the pull-down list. I suspect that CSS is the proper place to fix that, but that’s more than I want to tackle now. So my workaround was to move “Actions” above “Personal Tools”, since I don’t need those as much. But then I changed the text for “Personal Tools” to “PTools”. Now all four items fit on the screen in portrait mode.

  • Matt

    Love WPTouch, thank you. However, is there a way to change it so that activating navigation on a mobile device doesn’t open up a new tab each time? For instance, when returning to the home page, my mobile browser (Dolphin) will automatically open a new tab. This obviously creates a lot of tabs after awhile.


  • Kang Pilmo

    First of all, thank you for providing great skin.
    I have one problems. Code syntax highlight does not work well on the Wptouch. I use syntaxhighlight tag, and the ‘Vector’ skin shows good, but Wptouch skin shows red text for all code text. I want to see colorful syntaxhighlighted codes. Could help me which code modifying?
    I installed Mediawiki 1.20.6 and Wptouch 1.18_and_later version and GeSHi SyntaxHighlightor
    And the sample page URL is this.

    Thank you.

  • Steve

    Re wptouch for mediawiki. Can anyone with CSS skills tell me how to differentiate between links to existing pages and links to non-existing pages? 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. I think a link to a non-existing page is tagged ‘a.new’ in the standard skin on a computer but that’s as far as I can get.

  • linjun

    HI,I use wptouch,I want to know what licesne it is? GPL?

  • buy soundcloud followers

    The steps as follows will show you how to use this software:.
    Sound – Cloud as well provides users with the ability to make and connect groups that furnish a vernacular infinite for
    contentedness to be self-contained and divided. The reason for this is that it’s most effective to
    have other people talk about your music, especially people in positions
    of authority, such as music and mp3 bloggers, writers for magazines,
    podcasters and internet radio hosts.

  • Paul Littlefield


    Can you please update the WPtouch skin for MediaWiki 1.23.0?

    Many thanks.



  • visa vietnam online

    WOW just what I was searching for. Came here by searching for visa

  • Sean Kurth

    I’ve purplified the whole thing ( http://www.kgcrittersitters.com/wiki/index.php/Main_Page ), but the overflow background (the area after bgbody.jpg), as you can see, is still black. I went through main.css nd changed all the #080808’s that I could to purple, but it still won’t change. What CSS attribute should I change? I’ve already changed #wrapper and it didn’t help.

    • Sean Kurth

      NVM I fixed it. I just find and replace’d #000 and #000000 with #55258B in Notepad++. This way it doesn’t really matter which CSS value I’m changing.

  • pdf converter to jpg

    Thanks for your personal marvelous posting! I actually enjoyed reading it,
    you may be a great author.I will be sure to bookmark your blog and
    will come back someday. I want to encourage you to continue
    your great job, have a nice holiday weekend!

  • Keith Curtis

    Hello, Thanks for the great skin. My wiki is so much more readable and usable on my phone. However, I would like to use the desktop version on my iPad (or any tablet). Is there an easy change to the If-Then selector code to allow for this kind of differentiation?

  • Matthew

    Hello I love the pixeled skin im using it, it works good but I want to remove the navigation bar, and the tool box how can I do that? only because I have no use for it can someone help me?

1 Trackback or Pingback 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!