Difference between revisions of "MediaWiki/Theming"
(Add section on OOUI) |
(updates info on how to make your own skin by referring to Daniel Friesen's tutorials and the manual) |
||
| (2 intermediate revisions by one other user not shown) | |||
| Line 5: | Line 5: | ||
or just dive into all the [http://meta.wikimedia.org/wiki/Gallery_of_user_styles examples of user styles] | or just dive into all the [http://meta.wikimedia.org/wiki/Gallery_of_user_styles examples of user styles] | ||
| − | ==How to change the Logo== | + | == How to change the Logo == |
You can change the Logo of the wiki by altering the $wgLogo variable in LocalSettings.php to the name of the image you want to use as a logo. | You can change the Logo of the wiki by altering the $wgLogo variable in LocalSettings.php to the name of the image you want to use as a logo. | ||
Please note that this logo should be placed in the /skins/common/images/ folder. | Please note that this logo should be placed in the /skins/common/images/ folder. | ||
| Line 12: | Line 12: | ||
</pre> | </pre> | ||
| − | ==How to change the favicon== | + | == How to change the favicon == |
You can change the icon that is displayed in the address bar of your browser by setting a value for $wgFavicon in the LocalSettings.php file | You can change the icon that is displayed in the address bar of your browser by setting a value for $wgFavicon in the LocalSettings.php file | ||
<pre> | <pre> | ||
| Line 19: | Line 19: | ||
| − | ==Styling== | + | == Styling == |
A user can completely affect the styling of the wiki they are using by applying user-defined styling to the site. [[meta:Help:User_style]] | A user can completely affect the styling of the wiki they are using by applying user-defined styling to the site. [[meta:Help:User_style]] | ||
| − | ==This wiki== | + | == This wiki == |
This wiki uses the [[Chameleon]] skin, which is based on [[Bootstrap]] and the Bootstrap extension. [https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa That is not synonymous with HTML5]. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit. The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. In short, they can (and probably should) be used together. | This wiki uses the [[Chameleon]] skin, which is based on [[Bootstrap]] and the Bootstrap extension. [https://www.quora.com/Is-Bootstrap-a-complement-or-an-alternative-to-HTML5-Boilerplate-or-viceversa That is not synonymous with HTML5]. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit. The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. In short, they can (and probably should) be used together. | ||
| − | ==HTML5== | + | == HTML5 == |
If you want to use HTML5 in your wiki, then you need at least version 1.16.0 of MediaWiki, which is the first version that includes the <code>$wgHtml5</code> setting. See http://www.initializr.com/ in general and also Richard Carter's website <ref>http://www.earlgreyandbattenburg.co.uk/extras/mediawiki-html5-skin/</ref> for information specific to MediaWiki | If you want to use HTML5 in your wiki, then you need at least version 1.16.0 of MediaWiki, which is the first version that includes the <code>$wgHtml5</code> setting. See http://www.initializr.com/ in general and also Richard Carter's website <ref>http://www.earlgreyandbattenburg.co.uk/extras/mediawiki-html5-skin/</ref> for information specific to MediaWiki | ||
| − | + | == Icons and Graphics == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | ==Icons and Graphics== | ||
For aspiring artists who want to create icons, see the [http://wiki.kde.org/tiki-index.php?page=Icon+Guide Icon Guide] on KDE.org | For aspiring artists who want to create icons, see the [http://wiki.kde.org/tiki-index.php?page=Icon+Guide Icon Guide] on KDE.org | ||
If you know the ropes of creating good graphics, see the Nuvola2 project, which appears to be an effort in the mediawiki community to bring a whole set of scalable graphics to the project. | If you know the ropes of creating good graphics, see the Nuvola2 project, which appears to be an effort in the mediawiki community to bring a whole set of scalable graphics to the project. | ||
| − | + | # http://commons.wikimedia.org/wiki/Nuvola_icons_for_KDE_3.x | |
| − | #http://commons.wikimedia.org/wiki/Nuvola_icons_for_KDE_3.x | + | # http://commons.wikimedia.org/wiki/Commons:Project_Nuvola_2.0%2B |
| − | #http://commons.wikimedia.org/wiki/Commons:Project_Nuvola_2.0%2B | ||
If you just want to have a bunch of good graphics available for use in your wiki, then there are image administration tools that you can use to batch import collections of graphics. Mediawiki can now handle Scalable Vector Graphics (SVG) so with a little configuration, you can import a group of SVGs and use that as a basis for your theme. | If you just want to have a bunch of good graphics available for use in your wiki, then there are image administration tools that you can use to batch import collections of graphics. Mediawiki can now handle Scalable Vector Graphics (SVG) so with a little configuration, you can import a group of SVGs and use that as a basis for your theme. | ||
| Line 60: | Line 40: | ||
As for complete icon sets, there are a few well-known sets in the Free Software community. | As for complete icon sets, there are a few well-known sets in the Free Software community. | ||
| − | + | ; Crystal : The KDE crystal set is nice, and you can find out more at [http://everaldo.com/crystal/ Everaldo's website]. | |
| − | ;Crystal :The KDE crystal set is nice, and you can find out more at [http://everaldo.com/crystal/ Everaldo's website]. | + | ; Oxygen : The standard icon theme for KDE4 You can also get scalable vector graphics from the oxygen set. If you <source lang="bash">sudo apt-get install kde-icons-oxygen </source>, you should find them on your system in /usr/lib/kde4/share/icons/oxygen/ Note that you need an application (like Konqueror, Dolphin, Gwenview or Inkscape - but not Gqview) that can display SVG to view the svgz files. http://www.oxygen-icons.org/ |
| − | ;Oxygen :The standard icon theme for KDE4 You can also get scalable vector graphics from the oxygen set. If you <source lang="bash">sudo apt-get install kde-icons-oxygen </source>, you should find them on your system in /usr/lib/kde4/share/icons/oxygen/ Note that you need an application (like Konqueror, Dolphin, Gwenview or Inkscape - but not Gqview) that can display SVG to view the svgz files. http://www.oxygen-icons.org/ | + | ; Tango : http://tango.freedesktop.org/Tango_Desktop_Project |
| − | ;Tango :http://tango.freedesktop.org/Tango_Desktop_Project | ||
Once you have all these graphics at your disposal, you'll probably want to use some of them as interface elements, rather than just as decoration / illustration of your articles. In that case, you'll want to use something like the [[Icons|Icon extension]]. | Once you have all these graphics at your disposal, you'll probably want to use some of them as interface elements, rather than just as decoration / illustration of your articles. In that case, you'll want to use something like the [[Icons|Icon extension]]. | ||
| − | ==How to use Templates for information design, consistency, and utility== | + | == How to use Templates for information design, consistency, and utility == |
The [[Templates|template]] system allows you to create re-usable interface elements such as 'sidebars', 'callouts' or 'info boxes' and almost limitless utility. The [[Wikipedia:Template:Ambox|Ambox template]] is an example of a template that you'll probably want to use in your local wiki system. | The [[Templates|template]] system allows you to create re-usable interface elements such as 'sidebars', 'callouts' or 'info boxes' and almost limitless utility. The [[Wikipedia:Template:Ambox|Ambox template]] is an example of a template that you'll probably want to use in your local wiki system. | ||
| − | ==How to change the navigation== | + | == How to change the navigation == |
The navigation system is setup through a special type called an 'interface message'. (The interface message system is also used for many other aspects of the Mediawiki system.) This means that you don't actually have to change 'code' to affect the menu. You can simply edit a special page in the mediawiki system. Edits to this page get stored in the database like every other page edit which provides built-in versioning etc. However, it can also mean that pushing changes from a development machine to a server can be more challenging than pushing 'code' changes. | The navigation system is setup through a special type called an 'interface message'. (The interface message system is also used for many other aspects of the Mediawiki system.) This means that you don't actually have to change 'code' to affect the menu. You can simply edit a special page in the mediawiki system. Edits to this page get stored in the database like every other page edit which provides built-in versioning etc. However, it can also mean that pushing changes from a development machine to a server can be more challenging than pushing 'code' changes. | ||
| Line 77: | Line 56: | ||
It is possible, using JavaScript, to customize the '''search''' or '''toolbox'''. (We did this for the [https://www.mediawiki.org/wiki/Extension:Html2Wiki Html2Wiki extension].) See the article here on [[MediaWiki/Toolbox]]. | It is possible, using JavaScript, to customize the '''search''' or '''toolbox'''. (We did this for the [https://www.mediawiki.org/wiki/Extension:Html2Wiki Html2Wiki extension].) See the article here on [[MediaWiki/Toolbox]]. | ||
| − | ==Interface Messages== | + | == Interface Messages == |
At [[Special:AllMessages]], you can see the interface messages (sometimes referred to as System Messages) for the MediaWiki system. See [[mw:Help:System message]] | At [[Special:AllMessages]], you can see the interface messages (sometimes referred to as System Messages) for the MediaWiki system. See [[mw:Help:System message]] | ||
In MediaWiki 1.18 and above, you can find a message key by browsing a wiki in the special pseudo-language code <code>'''qqx'''</code>, which can be done by appending <code>?uselang=qqx</code> to the URL, or <code>&uselang=qqx</code> if the URL already contains a <code>?</code> character ([{{fullurl:{{FULLPAGENAME}}|uselang=qqx}} example]). All the messages will then be replaced by their message keys, so you can identify which message is responsible. Messages that are always in the content language will not be shown using qqx. | In MediaWiki 1.18 and above, you can find a message key by browsing a wiki in the special pseudo-language code <code>'''qqx'''</code>, which can be done by appending <code>?uselang=qqx</code> to the URL, or <code>&uselang=qqx</code> if the URL already contains a <code>?</code> character ([{{fullurl:{{FULLPAGENAME}}|uselang=qqx}} example]). All the messages will then be replaced by their message keys, so you can identify which message is responsible. Messages that are always in the content language will not be shown using qqx. | ||
| − | Aside from changing the Navigation bar, this is how we customized the ISBN message that is used in the 'Book Sources' special page e.g. [[ | + | Aside from changing the Navigation bar, this is how we customized the ISBN message that is used in the 'Book Sources' special page e.g. [[Special:BookSources/1594200068]]. All these messages are in the '''MediaWiki''' namespace. So, if the message key is 'Requestaccount-acc-text', then you can change the content of the message by editing 'MediaWiki:Requestaccount-acc-text'. |
| − | + | == How to make your own skin == | |
| − | |||
| − | ==How to make your own skin== | ||
[[mw:User:Dantman|Daniel Friesen]] offers a [https://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/ good tutorial] on how to subclass the [[mw:Skin:Vector|Vector skin]] to create a new derivative skin. And his [https://blog.redwerks.org/2012/02/08/mediawiki-skinning-tutorial/ MediaWiki skinning tutorial] is the basis for the [[mw:Manual:Skinning Part 1|official manual on skinning]]. | [[mw:User:Dantman|Daniel Friesen]] offers a [https://blog.redwerks.org/2012/02/28/mediawiki-subskin-tutorial/ good tutorial] on how to subclass the [[mw:Skin:Vector|Vector skin]] to create a new derivative skin. And his [https://blog.redwerks.org/2012/02/08/mediawiki-skinning-tutorial/ MediaWiki skinning tutorial] is the basis for the [[mw:Manual:Skinning Part 1|official manual on skinning]]. | ||
| − | ==Making your Skin Available== | + | == Making your Skin Available == |
To make your skin available sitewide, and the default skin, set it in LocalSettings.php e.g. set $wgDefaultSkin = 'happy'. | To make your skin available sitewide, and the default skin, set it in LocalSettings.php e.g. set $wgDefaultSkin = 'happy'. | ||
To let your users decide which skin they can use, you can enable user preferences. | To let your users decide which skin they can use, you can enable user preferences. | ||
| − | ==Offering/Using multiple skins== | + | == Offering/Using multiple skins == |
If you have multiple skins available, you can preview and switch between them by [[Special:Preferences|visiting your user preferences]]. Since a given skin can be specified in the querystring, you can even bookmark a certain 'look' for easy comparison with a new theme. e.g. http://freephile.com/wiki/index.php?title=Main_Page&useskin=monobook | If you have multiple skins available, you can preview and switch between them by [[Special:Preferences|visiting your user preferences]]. Since a given skin can be specified in the querystring, you can even bookmark a certain 'look' for easy comparison with a new theme. e.g. http://freephile.com/wiki/index.php?title=Main_Page&useskin=monobook | ||
| − | ==Nice Examples== | + | == Nice Examples == |
| − | + | The skin used on this site is based on [http://paulgu.com/wiki/Mediawiki_Skins the excellent work of Paul Gu] Developers should check out [[Wiki developers]] for more sites of people like Paul who develop wikis. | |
| + | |||
| + | There are countless examples of mediawiki installations across the Internet. Some of the ones that have actually bothered to customize the "look and feel" include | ||
| + | # the [http://linuxfoundation.org/ Linux Foundation] site is powered by Mediawiki, but rumor is that they are moving more content to drupal. | ||
| + | * the [http://techbase.kde.org/ KDE Techbase] is Mediawiki. The http://techbase.kde.org/Development/Software_Engineering_Framework article explains all their tech platform tools. | ||
| + | * The [http://tango.freedesktop.org/Tango_Desktop_Project Tango] project (see "icons" above) runs their website on a customized MediaWiki. | ||
| + | * The [http://wiki.blender.org/index.php/Main_Page Blender] project has a nice custom skin | ||
| + | * The [http://wiki.eclipse.org/Main_Page Eclipse project] uses MediaWiki for their wiki site | ||
| + | * [http://amarok.kde.org/wiki/Main_Page Amarok] rocks with MediaWiki | ||
| + | * [http://wiki.creativecommons.org/Main_Page Creative Commons] | ||
| + | * [http://fedoraproject.org/wiki/Special:Version Fedora Project wiki] | ||
| + | * [http://ubuntuguide.org/wiki/Main_Page Ubuntu Guide] | ||
| + | * [http://kubuntuguide.org/Intrepid Kubuntu Guide] | ||
| − | |||
| − | + | I've seen some other projects that have nice Mediawiki skins, but I never bothered to write them down. A quick search reveals several projects by Suse: | |
| − | + | # http://en.opensuse.org/Welcome_to_openSUSE.org | |
| − | + | # http://www.mono-project.com/Main_Page | |
| − | + | # http://beagle-project.org/Main_Page | |
| − | + | # http://en.opensuse.org/Welcome_to_openSUSE.org | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| + | I hesitate to call it a 'nice example' because it doesn't seem all that compelling, but there is the mozilla project wiki https://wiki.mozilla.org/Main_Page http://developer.mozilla.org used to run Mediawiki, with a very nice theme and lots of custom templates and graphics. Now they are running a commercial opensource wiki product called "deki" which is apparently trying to compete in the "enterprise wiki" market. | ||
| − | ==Resources== | + | == Resources == |
{{Highlight | | {{Highlight | | ||
|text = For Extension Developers, there is now an object-oriented [[JavaScript]] library included in MediaWiki core [[mw:OOjs UI]]}} | |text = For Extension Developers, there is now an object-oriented [[JavaScript]] library included in MediaWiki core [[mw:OOjs UI]]}} | ||
Revision as of 10:08, 19 July 2016
You can change the look and layout of your Mediawiki site. The place to start is the wikimedia groups' meta pages.
There is the design document and the info on skins or just dive into all the examples of user styles
Contents
- 1 How to change the Logo
- 2 How to change the favicon
- 3 Styling
- 4 This wiki
- 5 HTML5
- 6 Icons and Graphics
- 7 How to use Templates for information design, consistency, and utility
- 8 How to change the navigation
- 9 Interface Messages
- 10 How to make your own skin
- 11 Making your Skin Available
- 12 Offering/Using multiple skins
- 13 Nice Examples
- 14 Resources
- 15 References
How to change the Logo[edit | edit source]
You can change the Logo of the wiki by altering the $wgLogo variable in LocalSettings.php to the name of the image you want to use as a logo. Please note that this logo should be placed in the /skins/common/images/ folder.
$wgLogo = "$wgStylePath/common/images/freephile_sm_logo.gif";
How to change the favicon[edit | edit source]
You can change the icon that is displayed in the address bar of your browser by setting a value for $wgFavicon in the LocalSettings.php file
$wgFavicon = "http://www.freephile.com/images/logos/favicon.ico";
Styling[edit | edit source]
A user can completely affect the styling of the wiki they are using by applying user-defined styling to the site. meta:Help:User_style
This wiki[edit | edit source]
This wiki uses the Chameleon skin, which is based on Bootstrap and the Bootstrap extension. That is not synonymous with HTML5. Bootstrap is a specialized, modular, HTML/CSS/JS toolkit. The HTML5 Boilerplate (H5BP) is a starting project template that is designed to be adapted to your needs. In short, they can (and probably should) be used together.
HTML5[edit | edit source]
If you want to use HTML5 in your wiki, then you need at least version 1.16.0 of MediaWiki, which is the first version that includes the $wgHtml5 setting. See http://www.initializr.com/ in general and also Richard Carter's website [1] for information specific to MediaWiki
Icons and Graphics[edit | edit source]
For aspiring artists who want to create icons, see the Icon Guide on KDE.org
If you know the ropes of creating good graphics, see the Nuvola2 project, which appears to be an effort in the mediawiki community to bring a whole set of scalable graphics to the project.
- http://commons.wikimedia.org/wiki/Nuvola_icons_for_KDE_3.x
- http://commons.wikimedia.org/wiki/Commons:Project_Nuvola_2.0%2B
If you just want to have a bunch of good graphics available for use in your wiki, then there are image administration tools that you can use to batch import collections of graphics. Mediawiki can now handle Scalable Vector Graphics (SVG) so with a little configuration, you can import a group of SVGs and use that as a basis for your theme.
In this wiki, I imported the Oxygen graphics (see below). Importing is handled by a 'maintenance' script. See details about how image assets are managed at mw:Manual:Image_Administration
As for complete icon sets, there are a few well-known sets in the Free Software community.
- Crystal
- The KDE crystal set is nice, and you can find out more at Everaldo's website.
- Oxygen
- The standard icon theme for KDE4 You can also get scalable vector graphics from the oxygen set. If you , you should find them on your system in /usr/lib/kde4/share/icons/oxygen/ Note that you need an application (like Konqueror, Dolphin, Gwenview or Inkscape - but not Gqview) that can display SVG to view the svgz files. http://www.oxygen-icons.org/
sudo apt-get install kde-icons-oxygen
- Tango
- http://tango.freedesktop.org/Tango_Desktop_Project
Once you have all these graphics at your disposal, you'll probably want to use some of them as interface elements, rather than just as decoration / illustration of your articles. In that case, you'll want to use something like the Icon extension.
How to use Templates for information design, consistency, and utility[edit | edit source]
The template system allows you to create re-usable interface elements such as 'sidebars', 'callouts' or 'info boxes' and almost limitless utility. The Ambox template is an example of a template that you'll probably want to use in your local wiki system.
[edit | edit source]
The navigation system is setup through a special type called an 'interface message'. (The interface message system is also used for many other aspects of the Mediawiki system.) This means that you don't actually have to change 'code' to affect the menu. You can simply edit a special page in the mediawiki system. Edits to this page get stored in the database like every other page edit which provides built-in versioning etc. However, it can also mean that pushing changes from a development machine to a server can be more challenging than pushing 'code' changes.
In any case, to change the nav, you will want to edit the MediaWiki:Sidebar page. The right to edit this page is normally restricted to administrators, so if you want to delegate the responsibility for this, you will want to look at the user permissions system. There are rules and conventions which apply here, and you can find more help in the documentation. In case you are going to change the location of blocks like the search box or toolbox (which normally show up in the sidebar) by making a custom theme, you'll want to coordinate those changes with the sidebar.
It is possible, using JavaScript, to customize the search or toolbox. (We did this for the Html2Wiki extension.) See the article here on MediaWiki/Toolbox.
Interface Messages[edit | edit source]
At Special:AllMessages, you can see the interface messages (sometimes referred to as System Messages) for the MediaWiki system. See mw:Help:System message
In MediaWiki 1.18 and above, you can find a message key by browsing a wiki in the special pseudo-language code qqx, which can be done by appending ?uselang=qqx to the URL, or &uselang=qqx if the URL already contains a ? character (example). All the messages will then be replaced by their message keys, so you can identify which message is responsible. Messages that are always in the content language will not be shown using qqx.
Aside from changing the Navigation bar, this is how we customized the ISBN message that is used in the 'Book Sources' special page e.g. Special:BookSources/1594200068. All these messages are in the MediaWiki namespace. So, if the message key is 'Requestaccount-acc-text', then you can change the content of the message by editing 'MediaWiki:Requestaccount-acc-text'.
How to make your own skin[edit | edit source]
Daniel Friesen offers a good tutorial on how to subclass the Vector skin to create a new derivative skin. And his MediaWiki skinning tutorial is the basis for the official manual on skinning.
Making your Skin Available[edit | edit source]
To make your skin available sitewide, and the default skin, set it in LocalSettings.php e.g. set $wgDefaultSkin = 'happy'.
To let your users decide which skin they can use, you can enable user preferences.
Offering/Using multiple skins[edit | edit source]
If you have multiple skins available, you can preview and switch between them by visiting your user preferences. Since a given skin can be specified in the querystring, you can even bookmark a certain 'look' for easy comparison with a new theme. e.g. http://freephile.com/wiki/index.php?title=Main_Page&useskin=monobook
Nice Examples[edit | edit source]
The skin used on this site is based on the excellent work of Paul Gu Developers should check out Wiki developers for more sites of people like Paul who develop wikis.
There are countless examples of mediawiki installations across the Internet. Some of the ones that have actually bothered to customize the "look and feel" include
- the Linux Foundation site is powered by Mediawiki, but rumor is that they are moving more content to drupal.
- the KDE Techbase is Mediawiki. The http://techbase.kde.org/Development/Software_Engineering_Framework article explains all their tech platform tools.
- The Tango project (see "icons" above) runs their website on a customized MediaWiki.
- The Blender project has a nice custom skin
- The Eclipse project uses MediaWiki for their wiki site
- Amarok rocks with MediaWiki
- Creative Commons
- Fedora Project wiki
- Ubuntu Guide
- Kubuntu Guide
I've seen some other projects that have nice Mediawiki skins, but I never bothered to write them down. A quick search reveals several projects by Suse:
- http://en.opensuse.org/Welcome_to_openSUSE.org
- http://www.mono-project.com/Main_Page
- http://beagle-project.org/Main_Page
- http://en.opensuse.org/Welcome_to_openSUSE.org
I hesitate to call it a 'nice example' because it doesn't seem all that compelling, but there is the mozilla project wiki https://wiki.mozilla.org/Main_Page http://developer.mozilla.org used to run Mediawiki, with a very nice theme and lots of custom templates and graphics. Now they are running a commercial opensource wiki product called "deki" which is apparently trying to compete in the "enterprise wiki" market.
Resources[edit | edit source]
The skinning manual http://www.mediawiki.org/wiki/Manual:Skinning is probably the most comprehensive and best introduction to how the skin system works aside from digging into the code in the 'skins' directory.
http://www.softwarekombinat.de/wiki/Customize_mediawiki has one of the best 'howto's that I found.
The Layout Design Document might cover some relevant info, but a quick glance makes it seem that it's circa 2004.
