Jason, thanks for this experience! We follow similar scheme when making our scheme: we even outsourced the design (Photoshop images) and html design (psd to html) steps.
1) Can you integrate it into Skinning tutorial? This way more people will read it. 2) can you create a page for your skin in Skin namespace?
P.S. I'm not sure that such discussions are appropriate HERE. I thought it's the mailing list of announcements and MediaWiki.org admins only. Anyway I don't think that anybody will be unhappy with the crossposting to wikitech-l list: https://lists.wikimedia.org/mailman/listinfo/wikitech-l ----- Yury Katkov, WikiVote
On Mon, May 20, 2013 at 8:26 PM, Jason Lewis jason.lewis1991@gmail.com wrote:
I'm not exactly after attention I'm more just documenting my experience in hope that others can benefit from it in some way.
On Tue, May 21, 2013 at 2:14 AM, Kaseluris-Nikos-1959 < kaseluris.nikos@gmail.com> wrote:
At the end of 2011 I have created the synagonism-mw skin [1] with similar FUNCTIONALITY (no coding) but got NO attention of the community.
[1] http://synagonism-mw.sourceforge.net/
On Mon, May 20, 2013 at 6:56 PM, Jason Lewis <jason.lewis1991@gmail.com
wrote:
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@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
-- Kaseluris-Nikos-1959 Synagonism = ALL winners, Antagonism = ONE winner _______________________________________________ MediaWiki-l mailing list MediaWiki-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
MediaWiki-l mailing list MediaWiki-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l