Difference between revisions of "MediaWiki/Theming"
Jump to navigation
Jump to search
(Add section on OOUI) |
(adds info about customizing the navigation box) |
||
| (28 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 | + | |
| + | == How to chage 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 14: | ||
</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 18: | Line 21: | ||
</pre> | </pre> | ||
| + | == How to change the navigation == | ||
| + | The navigation system is a system message like many 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. (e.g. <nowiki>http://example.com/wiki/index.php/MediaWiki:Sidebar</nowiki>) There are rules and conventions which apply here, and you can [http://www.mediawiki.org/wiki/Manual:Navigation_bar find more help in the documentation]. In case you are going to change the location of blocks like the search box or toolbox in your theme, you'll want to edit them out of the default navigation box. | |
| − | |||
| − | == | + | == How to make your own skin == |
| − | + | A skin generally has it's own directory, plus two setup files. | |
| − | + | If you wanted to create a skin called 'Happy' you would have | |
| − | + | <pre> | |
| − | + | happy | |
| − | + | Happy.php | |
| − | + | Happy.deps.php | |
| − | + | </pre> | |
| − | + | in the 'skins' directory. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | If you | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | The easiest way to create your skin is to copy the monobook skin and start from there. | |
| − | + | You can create a skin all by yourself by following the steps provided below: | |
| − | + | # Go to your mediawiki 'skins' directory; | |
| − | + | # Copy the monobook directory and name it with the name of your skin: happy; | |
| + | # Copy the MonoBook.php file and name it with the name of your skin: Happy.php; | ||
| + | # Edit Happy.php and change the class name to SkinHappy: <source lang="php">class SkinHappy extends SkinTemplate;</source> | ||
| + | # In Happy.php, change the template class to have your skin name together with the word 'Template': <source lang="php">class HappyTemplate extends QuickTemplate;</source> | ||
| + | # Also in Happy.php, make the references to the skin match the names: | ||
| + | <source lang="php"> | ||
| + | $this->skinname = 'happy'; // matches the physical directory name | ||
| + | $this->stylename = 'happy'; // matches the physical directory name | ||
| + | $this->template = 'HappyTemplate'; // matches the template class name | ||
| + | </source> | ||
| + | # In your happy directory edit the image and CSS files until your heart is content; | ||
| + | # Edit and customise Happy.php as you please; | ||
| − | ==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. | ||
| − | == | + | == Nice Examples == |
| − | + | The skin used on this site is based on [http://paulgu.com/wiki/Mediawiki_Skins the excellent work of Paul Gu] | |
| − | + | 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: | |
| − | I've | + | # 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 I'm fairly certain without checking the wayback machine that 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. | |
| − | + | == Resources == | |
| − | + | The [http://meta.wikimedia.org/wiki/Layout_design_document Layout Design Document] might cover some relevant info, but a quick glance makes it seem that it's circa 2004. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
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 [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/ the code in the 'skins' directory]. | 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 [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/ the code in the 'skins' directory]. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 20:03, 5 October 2008
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
How to chage 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";
[edit | edit source]
The navigation system is a system message like many 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. (e.g. http://example.com/wiki/index.php/MediaWiki:Sidebar) 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 in your theme, you'll want to edit them out of the default navigation box.
How to make your own skin[edit | edit source]
A skin generally has it's own directory, plus two setup files. If you wanted to create a skin called 'Happy' you would have
happy Happy.php Happy.deps.php
in the 'skins' directory.
The easiest way to create your skin is to copy the monobook skin and start from there.
You can create a skin all by yourself by following the steps provided below:
- Go to your mediawiki 'skins' directory;
- Copy the monobook directory and name it with the name of your skin: happy;
- Copy the MonoBook.php file and name it with the name of your skin: Happy.php;
- Edit Happy.php and change the class name to SkinHappy:
class SkinHappy extends SkinTemplate;
- In Happy.php, change the template class to have your skin name together with the word 'Template':
class HappyTemplate extends QuickTemplate;
- Also in Happy.php, make the references to the skin match the names:
$this->skinname = 'happy'; // matches the physical directory name
$this->stylename = 'happy'; // matches the physical directory name
$this->template = 'HappyTemplate'; // matches the template class name
- In your happy directory edit the image and CSS files until your heart is content;
- Edit and customise Happy.php as you please;
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.
Nice Examples[edit | edit source]
The skin used on this site is based on the excellent work of Paul Gu
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 I'm fairly certain without checking the wayback machine that 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.
Resources[edit | edit source]
The Layout Design Document might cover some relevant info, but a quick glance makes it seem that it's circa 2004.
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.
