Hello,
Let me start off by introducing myself. My name is Jason Lewis and I'm a
developer and (some kind of) designer from Australia. I play a role in the
community side of things for a PHP framework called Laravel.
Over the last few days I've developed a skin for the Laravel community wiki
that fits in with the overall theme of the other community sites. The idea
was to make it blend, but to also keep some sort of wiki "feel" to it. On
the surface it looks very fresh but at its core it is still very much Media
Wiki. You can check the skin out here:
http://wiki.laravel.io
The purpose of this thread is to give you an overview of how I went about
skinning Media Wiki from the point of view of someone who has never
attempted it before. I've used Media Wiki in the past but never done
anything besides changing the default logo.* *During the process of
skinning I used the following tutorial as a reference for some of the
inner-workings of Media Wiki:
http://www.mediawiki.org/wiki/Manual:Skinning/Tutorial
*The Design
*
Before I even started looking at how to skin Media Wiki I drafted up a
design with just standard HTML/CSS. I used the Wikipedia site as a
reference here for some of the required elements but also referred to the
linked tutorial above as it mentions some design considerations. During
this designing stage I didn't used my own markup and gave my classes my own
names. I didn't think of the Media Wiki class names or IDs, that would come
later. Once I was happy with my design I begun the skinning process.
*The Skinning
*
This wasn't as hard as I was imagining it to be. There aren't a lot of
quality resources out there that go through skinning Media Wiki. Most just
say copy "MonoBook" and change it to fit your needs. I don't like that.
That, to me, feels very hacky. It was good to see the tutorial linked above
actually go through the setup procedure and the required files. What's even
better about this tutorial is that everything seemed separated. There were
a few tutorials that I briefly skimmed over that seemed to do everything in
the actual "skin" file.
I essentially copied the first part of that tutorial word-for-word, as I
had no idea how Media Wiki handled it all.
Once I got to the meat of my skin I only focused on the main elements. The
first part was the navigation bar. The only dynamically generated part of
that navigation bar is the "Toolbox" and the user section ("request
account", "login", then the actual user navigation). Everything else uses
static links and text. This was my first hurdle. How do I make a link with
Media Wiki? Luckily I got some help in the #mediawiki IRC. The "Linker" and
"Title" classes were what I was after. Here's an example.
<?php echo Linker::link(Title::newFromText('Laracon')); ?>
Next up I need to get the logged in user. I can't remember where but I
managed to stumble upon the $wgUser global variable (shudders). Using this
variable I could check if the user was logged in, if so output the users
menu, or if not show the login or register links.
After the navigation bar I went straight to the content and got that all
sorted. Once I had both these main sections completed I moved on to other
sections, like the "new talk" notifications and search box. There were a
few things I had to adjust slightly, such as the "action links" that appear
above a page ("edit", "discussion", etc). But for the most part it
was
pretty easy.
The last little hurdle I had to jump was pulling the table of contents from
the page and sticking it to the left so that it scrolls with you.
Originally I wanted to somehow pull it on the server side and do it that
way. After a little trial and error and trawling through the API (plus some
tips from the IRC guys, thanks!) I decided to just use a jQuery approach.
Using jQuery I just pull the ToC out, and insert it before the main content
then use CSS for the rest.
That pretty much covers my experience and case study. The source of the
skin is available on GitHub for those interested:
https://github.com/jasonlewis/laravel-io-wiki-skin
Thanks for reading. I'd be happy to answer any further questions.
Jason