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 _______________________________________________ MediaWiki-l mailing list MediaWiki-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l

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