Difference between revisions of "MediaWiki/Theming"
| Line 40: | Line 40: | ||
# Edit Happy.php and change the class name to SkinHappy: <source lang="php">class SkinHappy extends SkinTemplate;</source> | # 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> | # 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"> | + | # 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->skinname = 'happy'; // matches the physical directory name | ||
$this->stylename = 'happy'; // matches the physical directory name | $this->stylename = 'happy'; // matches the physical directory name | ||
$this->template = 'HappyTemplate'; // matches the template class 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; | # In your happy directory edit the image and CSS files until your heart is content; | ||
# Edit and customise Happy.php as you please; | # Edit and customise Happy.php as you please; | ||
| + | |||
| + | == 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 let your users decide which skin they can use, you can enable user preferences. | ||
== 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] | ||
| + | |||
| + | 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://en.opensuse.org/Welcome_to_openSUSE.org | ||
# http://www.mono-project.com/Main_Page | # http://www.mono-project.com/Main_Page | ||
# http://beagle-project.org/Main_Page | # http://beagle-project.org/Main_Page | ||
# http://en.opensuse.org/Welcome_to_openSUSE.org | # http://en.opensuse.org/Welcome_to_openSUSE.org | ||
| − | |||
| − | I'm fairly certain without checking the wayback machine that developer.mozilla.org used to run mediawiki, with a nice theme. Now they are running a commercial opensource product. | + | 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 == | == Resources == | ||
Revision as of 09:41, 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";
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 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.
