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
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.comwrote:
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
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
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
Hi Kaseluris Nikos! Since 2011 we decided to document skin and pay more attention to them. I'm pretty sure that beautiful skins will boost mediawiki popularity. Can you finalize the description of your skin here? I've created the initial version but I don't know some fields, like example of usage, version, etc. http://www.mediawiki.org/wiki/Skin:Synagonism ----- Yury Katkov, WikiVote
On Mon, May 20, 2013 at 8:14 PM, 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.comwrote:
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
That namespace is really exclusively for new skins (well and built-in skins) that follow the skins/skinname/skinname.php, etc... pattern outlined in the tutorial. Not skins still using hacks like modifying core files and placing php files directly into skins/ ((Btw, I have a separate tutorial on creating subskins that skin could probably use http://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/ though I haven't had the time to copy this one over to MediaWiki.org))
Hi Daniel!
As far as I can see "Skin" category+namespace+template is the only good way to describe and promote the skins. I agree however that we should distinguish between clean-written skins and hacking skins. I can create special WARNING template about that but I think that we should describe as many skins as possible with Skin:Skinnname template. ----- Yury Katkov, WikiVote
On Tue, May 21, 2013 at 3:28 PM, Daniel Friesen daniel@nadir-seen-fire.com wrote:
That namespace is really exclusively for new skins (well and built-in skins) that follow the skins/skinname/skinname.php, etc... pattern outlined in the tutorial. Not skins still using hacks like modifying core files and placing php files directly into skins/ ((Btw, I have a separate tutorial on creating subskins that skin could probably use http://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/ though I haven't had the time to copy this one over to MediaWiki.org))
-- ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://danielfriesen.name/]
On Mon, 20 May 2013 09:34:50 -0700, Yury Katkov katkov.juriy@gmail.com wrote:
Hi Kaseluris Nikos! Since 2011 we decided to document skin and pay more attention to them. I'm pretty sure that beautiful skins will boost mediawiki popularity. Can you finalize the description of your skin here? I've created the initial version but I don't know some fields, like example of usage, version, etc. http://www.mediawiki.org/wiki/Skin:Synagonism
Yury Katkov, WikiVote
MediaWiki-l mailing list MediaWiki-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Hello, Jason. Your skin may be good for promotion, but it is not good for presentation of information: the service menu offupy the most of screen, while only small part of the brouser frame is used for the main text.
I am not so skillful in writing scripts; yet I could not make the ShortURL work, nor even make a workable copy of existing skin "Vector". So, I modify "Vector"; you may look at the result at http://mizugadro.mydns.jp/t
This may give you an idea, how the page should be designed: The most of space is reserved for the original text, and only narrow strips at the top and at the left are occupied by the menu.
On Tue, 21 May 2013, Jason Lewis 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
On the topic of wiki skins: we have created a flavor that adheres nicely to the wiki format but with a completely different design. Feel free to check it out (we can provide source on request). http://wiki.step-project.com/Main_Page
-----Original Message----- From: mediawiki-l-bounces@lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Dmitrii Kouznetsov Sent: Monday, May 20, 2013 8:13 PM To: MediaWiki announcements and site admin list Subject: Re: [MediaWiki-l] Case Study: Skinning Media Wiki
Hello, Jason. Your skin may be good for promotion, but it is not good for presentation of information: the service menu offupy the most of screen, while only small part of the brouser frame is used for the main text.
I am not so skillful in writing scripts; yet I could not make the ShortURL work, nor even make a workable copy of existing skin "Vector". So, I modify "Vector"; you may look at the result at http://mizugadro.mydns.jp/t
This may give you an idea, how the page should be designed: The most of space is reserved for the original text, and only narrow strips at the top and at the left are occupied by the menu.
On Tue, 21 May 2013, Jason Lewis 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
_______________________________________________ MediaWiki-l mailing list MediaWiki-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
Hi David!
It looks fabulous! If I request the sources can I then put them online? ----- Yury Katkov, WikiVote
On Tue, May 21, 2013 at 8:42 AM, David Van Winkle dvanwinkle@live.com wrote:
On the topic of wiki skins: we have created a flavor that adheres nicely to the wiki format but with a completely different design. Feel free to check it out (we can provide source on request). http://wiki.step-project.com/Main_Page
-----Original Message----- From: mediawiki-l-bounces@lists.wikimedia.org [mailto:mediawiki-l-bounces@lists.wikimedia.org] On Behalf Of Dmitrii Kouznetsov Sent: Monday, May 20, 2013 8:13 PM To: MediaWiki announcements and site admin list Subject: Re: [MediaWiki-l] Case Study: Skinning Media Wiki
Hello, Jason. Your skin may be good for promotion, but it is not good for presentation of information: the service menu offupy the most of screen, while only small part of the brouser frame is used for the main text.
I am not so skillful in writing scripts; yet I could not make the ShortURL work, nor even make a workable copy of existing skin "Vector". So, I modify "Vector"; you may look at the result at http://mizugadro.mydns.jp/t
This may give you an idea, how the page should be designed: The most of space is reserved for the original text, and only narrow strips at the top and at the left are occupied by the menu.
On Tue, 21 May 2013, Jason Lewis 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
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
On 21/05/13 03:12, Dmitrii Kouznetsov wrote:
Hello, Jason. Your skin may be good for promotion, but it is not good for presentation of information: the service menu offupy the most of screen, while only small part of the brouser frame is used for the main text.
I am not so skillful in writing scripts; yet I could not make the ShortURL work, nor even make a workable copy of existing skin "Vector". So, I modify "Vector"; you may look at the result at http://mizugadro.mydns.jp/t
This may give you an idea, how the page should be designed: The most of space is reserved for the original text, and only narrow strips at the top and at the left are occupied by the menu.
I'm sorry to tell you that your skin is unreadable in Firefox 21 on ubuntu 12.04: the first letter(s) of each line of each menu is (are ?) out of the frame.
It looks as if you're using negative absolute positionning (e.g. "left: -38px;") on the menu ...
As for ShortURL, it seems to be working more or less on your test wiki but you seem to have something wrong in the template $wgShortUrlTemplate.
For instance:
http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/2
is a ShortURL that redirects correctly to http://mizugadro.mydns.jp/q/index.php/Test
Likewise http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/1 redirects to the Mediawiki:Sidebar it seems, and http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/3 to http://mizugadro.mydns.jp/q/index.php/Test1
on each of these pages there is a link "Short URL" in the toolbox. That link is messed up though. I would suggest that something might have to be fixed in $wgShortUrlTemplate.
The Main page does not seem to have that Short URL link, but I don't know if it's a bug or a feature of this extension (Main Page has its own very short url as http://mizugadro.mydns.jp/q/index.php )
Maybe re-run populateShortUrlTable.php ?
Hope it helps,
Alexis ps: I'm absolutely not related to ShortURL extension, just trying to help a bit with whatever I know ;-)
Hello, Alexis. Thank you for your feedback.
On Tue, 21 May 2013, Alexis Moinet wrote:
I am not so skillful in writing scripts; yet I could not make the ShortURL work, nor even make a workable copy of existing skin "Vector". So, I modify "Vector"; you may look at the result at http://mizugadro.mydns.jp/t The most of space is reserved for the original text, and only narrow strips at the top and at the left are occupied by the menu.
I'm sorry to tell you that your skin is unreadable in Firefox 21 on ubuntu 12.04: the first letter(s) of each line of each menu is (are ?) out of the frame. It looks as if you're using negative absolute positionning (e.g. "left: -38px;") on the menu ...
Yes, namely -38px. How do you count these pixels? I change it to -28px; now, looking with Safari, I see few millimeters unused at left. Could you visit http://mizugadro.mydns.jp/t again, does it look better?
As for ShortURL, it seems to be working more or less on your test wiki ..
?? If I try to open http://mizugadro.mydns.jp/q/Main_Page or http://mizugadro.mydns.jp/k/Main_Page i.e., without to mention "index.php/", the answer is "Not Found" So, I would say, the ShortURL does not work at all. The problem is that I do not understand explanations at http://www.mediawiki.org/wiki/Extension:ShortUrl
but you seem to have something wrong in the template $wgShortUrlTemplate.
At the end of LocalSettings.php I have line $wgShortUrlTemplate = "http://mizugadro.mydns.jp/k"; I expected this to enable the short URL http://mizugadro.mydns.jp/k/Main_Page but this does not happen. What shoudd I type there instead of $wgShortUrlTemplate = "http://mizugadro.mydns.jp/k"; ?
For instance: http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/2 is a ShortURL that redirects correctly to http://mizugadro.mydns.jp/q/index.php/Test
Well, how to make it to work, if I skip index.php/ in the URL?
Likewise http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/1 redirects to the Mediawiki:Sidebar
it seems, and http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/3 to http://mizugadro.mydns.jp/q/index.php/Test1
on each of these pages there is a link "Short URL" in the toolbox. That link is messed up though.
How to access the toolbox to add the ShortUrl there?
.. something might have to be fixed in $wgShortUrlTemplate. The Main page does not seem to have that Short URL link,
but I don't know if it's a bug or a feature of this extension (Main Page has its own very short url as http://mizugadro.mydns.jp/q/index.php )
Maybe re-run populateShortUrlTable.php ?
I found ... q/extensions/ShortUrl and I type from the command line: php populateShortUrlTable.php
It answers: 4 titles done Done
But this does not affect anything, again I see message "Not Found". May be, one day someone rewrites the instruction at http://www.mediawiki.org/wiki/Extension:ShortUrl indicating, how to say to the software, that I want http:/mizugadro.mydns.jp/k/Test1 mean http://mizugadro.mydns.jp/q/index.php/Test1 and similar for other pages..
On 22/05/13 04:34, Dmitrii Kouznetsov wrote:
It looks as if you're using negative absolute positionning (e.g. "left: -38px;") on the menu ...
Yes, namely -38px. How do you count these pixels?
using Firebug extension of Firefox
I change it to -28px; now, looking with Safari, I see few millimeters unused at left. Could you visit http://mizugadro.mydns.jp/t again, does it look better?
It looks alright now in firefox, but in chrome it is overflowing on the main text area.
You shouldn't rely on absolute negative positioning for this.
I would suggest to use margins/padding instead and maybe (as little as possible) browser-specific tweakings.
As for ShortURL, it seems to be working more or less on your test wiki ..
?? If I try to open http://mizugadro.mydns.jp/q/Main_Page or http://mizugadro.mydns.jp/k/Main_Page i.e., without to mention "index.php/", the answer is "Not Found" So, I would say, the ShortURL does not work at all.
Oh ... you're making a confusion between the *extension* "Short URL" ( https://www.mediawiki.org/wiki/Extension:ShortUrl ) which does *not* do that and the *URL rewriting* scheme for short URLs as explained in https://www.mediawiki.org/wiki/Manual:Short_URL
Granted, the naming are very confusing if you don't already have some knowledge about URL rewriting and URL shorteners.
what the extension does is making available URLs like http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/1 that points to a specific page
more exactly http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/$1 with '$1' being a code in base-36 (so made of sequence of characters in the ranges [0-9] and [a-z])
That way, you have a so-called "Short URL" to pages with long title. So http://mizugadro.mydns.jp/q/index.php/My_extremely_very_uber_long_title_for_...
is replaced by 'http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/1fg5z, for instance.
It's an URL shortener service like https://goo.gl/ . See https://en.wikipedia.org/wiki/URL_shortening for more information on this.
but if what you want is to remove the index.php so that http://mizugadro.mydns.jp/q/index.php/My_Page_Title becomes http://mizugadro.mydns.jp/q/My_Page_Title, then you need to follow the instructions at
https://www.mediawiki.org/wiki/Manual:Short_URL
which, in summary, is an apache rewriting rule of the URL that says "http://mizugadro.mydns.jp/q/My_Page_Title" redirects to "http://mizugadro.mydns.jp/q/index.php/My_Page_Title".
Hope it helps.
Alexis
The problem is that I do not understand explanations at http://www.mediawiki.org/wiki/Extension:ShortUrl
but you seem to have something wrong in the template $wgShortUrlTemplate.
At the end of LocalSettings.php I have line $wgShortUrlTemplate = "http://mizugadro.mydns.jp/k"; I expected this to enable the short URL http://mizugadro.mydns.jp/k/Main_Page but this does not happen. What shoudd I type there instead of $wgShortUrlTemplate = "http://mizugadro.mydns.jp/k"; ?
For instance: http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/2 is a ShortURL that redirects correctly to http://mizugadro.mydns.jp/q/index.php/Test
Well, how to make it to work, if I skip index.php/ in the URL?
Likewise http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/1 redirects to the Mediawiki:Sidebar
it seems, and http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/3 to http://mizugadro.mydns.jp/q/index.php/Test1
on each of these pages there is a link "Short URL" in the toolbox. That link is messed up though.
How to access the toolbox to add the ShortUrl there?
.. something might have to be fixed in $wgShortUrlTemplate. The Main page does not seem to have that Short URL link,
but I don't know if it's a bug or a feature of this extension (Main Page has its own very short url as http://mizugadro.mydns.jp/q/index.php )
Maybe re-run populateShortUrlTable.php ?
I found ... q/extensions/ShortUrl and I type from the command line: php populateShortUrlTable.php
It answers: 4 titles done Done
But this does not affect anything, again I see message "Not Found". May be, one day someone rewrites the instruction at http://www.mediawiki.org/wiki/Extension:ShortUrl indicating, how to say to the software, that I want http:/mizugadro.mydns.jp/k/Test1 mean http://mizugadro.mydns.jp/q/index.php/Test1 and similar for other pages..
MediaWiki-l mailing list MediaWiki-l@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-l
On Wed, 22 May 2013, Alexis Moinet wrote:
On 22/05/13 04:34, Dmitrii Kouznetsov wrote:
It looks as if you're using negative absolute positionning (e.g. "left: -38px;") on the menu ...
Yes, namely -38px. How do you count these pixels?
using Firebug extension of Firefox
I change it to -28px; now, looking with Safari, I see few millimeters unused at left. Could you visit http://mizugadro.mydns.jp/t again, does it look better?
It looks alright now in firefox, but in chrome it is overflowing on the main text area.
Thank, perhaos, I shold narrow a little bit the frame for teh main text. Anyway, it will be signifivantly wider than the default.
You shouldn't rely on absolute negative positioning for this.
Then I shall have to understand, how does it work!
I would suggest to use margins/padding instead and maybe (as little as possible) browser-specific tweakings.
I shall consider..
As for ShortURL, it seems to be working more or less on your test wiki ..
?? If I try to open http://mizugadro.mydns.jp/q/Main_Page or http://mizugadro.mydns.jp/k/Main_Page i.e., without to mention "index.php/", the answer is "Not Found" So, I would say, the ShortURL does not work at all.
Oh ... you're making a confusion between the *extension* "Short URL" ( https://www.mediawiki.org/wiki/Extension:ShortUrl ) which does *not* do that and the *URL rewriting* scheme for short URLs as explained in https://www.mediawiki.org/wiki/Manual:Short_URL
Yes.
Granted, the naming are very confusing if you don't already have some knowledge about URL rewriting and URL shorteners. what the extension does is making available URLs like http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/1 that points to a specific page more exactly http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/$1 with '$1' being a code in base-36 (so made of sequence of characters in the ranges [0-9] and [a-z]) That way, you have a so-called "Short URL" to pages with long title. So http://mizugadro.mydns.jp/q/index.php/My_extremely_very_uber_long_title_for_...
is replaced by 'http://mizugadro.mydns.jp/q/index.php/Special:ShortUrl/1fg5z, for instance. It's an URL shortener service like https://goo.gl/ . See https://en.wikipedia.org/wiki/URL_shortening for more information on this. but if what you want is to remove the index.php so that http://mizugadro.mydns.jp/q/index.php/My_Page_Title becomes http://mizugadro.mydns.jp/q/My_Page_Title, then you need to follow the instructions at https://www.mediawiki.org/wiki/Manual:Short_URL which, in summary, is an apache rewriting rule of the URL that says "http://mizugadro.mydns.jp/q/My_Page_Title" redirects to "http://mizugadro.mydns.jp/q/index.php/My_Page_Title". Hope it helps.
Not yet. I followed the instructions; the new setting redirects from http://mizugadro.mydns.jp/q/Main_Page to http://mizugadro.mydns.jp/k/Main_Page but still does not show the page, it says Not Found The requested URL /k/Main_Page was not found on this server.
Actually, I already tried to do shotrUrl in this way, earlier, and got similar messages, and I hoped, the extenstion can do the same job; but you explained that it is not the case..
On Mon, 20 May 2013 08:56:00 -0700, 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.
...
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
...
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.
Nice to know that tutorial I wrote was useful.
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.
Directly using the internal classes rather than template keys is a hack from the skinning perspective. So I didn't include any documentation on doing stuff like that. Though maybe we should.
You do not want to use $wgUser to get the user. That should actually be $this->getSkin()->getUser() that'll get the User object from the relevant request context.
But the template actually has some keys in it directly related to the user: username, userpage, userpageurl, loggedin
Besides that you can also access the generated links like the personal urls userpage directly instead of looping over and outputting them all.
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
I guess I forgot about things like custom scripts when I wrote the tutorial. Rather than putting the scripts inline the typical practice is to create a second ResourceLoader module (like the skins.laravel-io-wiki-skin one) as something like 'skins.laravel-io-wiki-skin.js' and instead of defining a 'styles' array define a list of 'scripts' then use $out->addModules( 'skins.laravel-io-wiki-skin.js' ); inside the initPage method in your skin.
This also has the advantage of your JS being minified, combined, cached, and delivered with any dependencies you need.
Some other random tips: * bootstrap.php shouldn't really be the name you use, our practice for extensions and skins is for that file to have the same name as the folder it's in, so `laravel-io-wiki-skin/laravel-io-wiki-skin.php`. In the future when we start auto detecting things for you, providing helpers to make loading skins easier, etc... this is very likely the only pattern we'll support. * The url in $wgExtensionCredits should really just be a url. It's not a link, it's used as a url when turning the 'name' of the extension/skin into a link on Special:Version. So your Special:Version looks a little broken now http://wiki.laravel.io/Special:Version
Thanks for reading. I'd be happy to answer any further questions.
Jason
Directly using the internal classes rather than template keys is a hack from the skinning perspective. So I didn't include any documentation on doing stuff like that. Though maybe we should.
You do not want to use $wgUser to get the user. That should actually be $this->getSkin()->getUser() that'll get the User object from the relevant request context.
But the template actually has some keys in it directly related to the user: username, userpage, userpageurl, loggedin
Besides that you can also access the generated links like the personal urls userpage directly instead of looping over and outputting them all.
Okay that's cool. I did look briefly through some of the classes but didn't realize you could get the user from the skin instance. I'll do some refactoring on the skin later on and fix up some of this.
I guess I forgot about things like custom scripts when I wrote the tutorial. Rather than putting the scripts inline the typical practice is to create a second ResourceLoader module (like the skins.laravel-io-wiki-skin one) as something like 'skins.laravel-io-wiki-skin.**js' and instead of defining a 'styles' array define a list of 'scripts' then use $out->addModules( 'skins.laravel-io-wiki-skin.**js' ); inside the initPage method in your skin.
This also has the advantage of your JS being minified, combined, cached, and delivered with any dependencies you need.
For some reason I thought about this but must have forgotten as I did see something similar in another article. I'll have to add this in to the skin as well.
Some other random tips:
- bootstrap.php shouldn't really be the name you use, our practice for
extensions and skins is for that file to have the same name as the folder it's in, so `laravel-io-wiki-skin/laravel-**io-wiki-skin.php`. In the future when we start auto detecting things for you, providing helpers to make loading skins easier, etc... this is very likely the only pattern we'll support.
- The url in $wgExtensionCredits should really just be a url. It's not a
link, it's used as a url when turning the 'name' of the extension/skin into a link on Special:Version. So your Special:Version looks a little broken now http://wiki.laravel.io/Special:Version
Thanks for the heads up. I don't know why I made it a link like that either, I swear I saw that mentioned somewhere. It's on the list to change.
Thanks very much for the feedback. Your tutorial was very useful during the process.
On Tue, 21 May 2013 04:36:52 -0700, Jason Lewis jason.lewis1991@gmail.com wrote:
- The url in $wgExtensionCredits should really just be a url. It's not a
link, it's used as a url when turning the 'name' of the extension/skin into a link on Special:Version. So your Special:Version looks a little broken now http://wiki.laravel.io/Special:Version
Thanks for the heads up. I don't know why I made it a link like that either, I swear I saw that mentioned somewhere. It's on the list to change.
My guess is that you and a few other people got confused by my pattern of using `[...]` as "A placeholder to replace with relevant data. Instead thinking that the `...` alone was a placeholder and the []'s we're either required or indicated it was a wikilink.
I swapped that out for just `...` inside that specific field on the wiki page.
Ok, it's probably a bit premature, but I thought while we were all happily bashing each others skins I might as well contribute a bit.
As Jason, I do (well, did) not have too much experience regarding skinning, always gave it a wide berth. But since my skin of choice is not very well maintained any more, I finally created my own. For this I also used Daniels manual, which is excellent. So, kudos Daniel. Remind me to get you a beer should we ever meet.
Since I am rather lazy and also have some more plans with this skin, I utilized Twitter's Bootstrap framework which worked great. It allowed me to throw it all together in a few evenings last week. No CSS tweaking needed, thank you very much.
To do this I created two minimal extensions, one for the Bootstrap framework itself[1], one for a php LESS compiler [2].
Out came a skin with horizontal menus with dropdowns/dropups for the sidebar (above the article) and toolbar and language links (below). Alas, I don't have a working wiki to show off, but have a look at the screenshots at [0].
Next steps: * Improve the Bootstrap extension to load stuff selectively * clean up the skin code and refactor stuff into methods * leverage Bootstrap and the less compiler to allow for changing the appearance of the skin; e.g. the colors (Anybody wondered about the name of the skin?)
Cheers, Stephan
[0] https://www.mediawiki.org/wiki/Skin:Chameleon [1] https://www.mediawiki.org/wiki/Extension:Bootstrap [2] https://www.mediawiki.org/wiki/Extension:Less
mediawiki-l@lists.wikimedia.org