MediaWiki Look And Feel

   MediaWiki Look and Feel

This page contains a info about changing the Look & Feel of a MediaWiki website.

About Look & Feel
Changes to the layout are set by editing the skin, usually. Preferences are set by adding code to the file.
 * meta.wikimedia.org Help: Layout Customization — guide to changing the page layout.
 * mediawiki.org Help: FAQ: Changing the Interface — changing the look.
 * meta.wikimedia.org Skins — guide to creating your own skin.

Fishcakes MediaWiki CSS Edits
Edited file skins/monobook/main.css

Adding Horizontal Scroll Bar to Code display
In order to add a horizontal scroll bar to code snippets displayed by the &gt;pre> and &gt;source> formats, edit the Skin css file: skins/monofishcakes/main.css

Find text:

Add the line:

Creating a Skin Based on MonoBook
Assuming you would like to create a new skin called  based on   you would do:

1. Copy the file  to.

2. Copy the directory  to.

3. Edit the file.

3a. Find: class SkinMonoBook extends SkinTemplate { /** Using monobook. */       function initPage( &$out ) { SkinTemplate::initPage( $out ); $this->skinname = 'monobook'; $this->stylename = 'monobook'; $this->template = 'MonoBookTemplate'; } }


 * Replace with:

class SkinMonoFishcakes extends SkinTemplate { /** Using foobar. */       function initPage( &$out ) { SkinTemplate::initPage( $out ); $this->skinname = 'monofishcakes'; $this->stylename = 'monofishcakes'; $this->template = 'MonoFishcakesTemplate'; } }

3b. Find: class MonoBookTemplate extends QuickTemplate {


 * Replace with:

class MonoFishcakesTemplate extends QuickTemplate {

3c. Find: wfRunHooks( 'MonoBookTemplateToolboxEnd', array( &$this ) );


 * Replace with:

wfRunHooks( 'MonoFishcakesTemplateToolboxEnd', array( &$this ) );

Your skin is now ready to be plugged in and modified. At this point you can zip up your  and   directory and consider it a bootstrap for any forthcoming skins you might want to create.

4. Next up is your Mediawiki configuration. We need to modify your  file, changing the default skin to your new one. Find: $wgDefaultSkin = 'monobook';


 * Replace with:

$wgDefaultSkin = 'monofishcakes';

Warnings


 * Even though a user changing their skin preference will be presented with a list containing, the default must be  . (The capitalisation is different). Getting this wrong will mean that the default skin is invalid (and displays as a badly formatted page).


 * Make sure this line isn't commented out either! Remember to clear your browser cache and hit reload. View page source and search for your new style name (MonoFishcakes, monofishcakes), namely the CSS paths.

Skins See Also

 * meta.wikimedia.org Skins step-by-step guide
 * mediawiki.org Manual: Skins guide
 * mediawiki.org Manual: Guide to Skinning (techie)
 * MediaWiki Help:Changing the Interface

Skins from Others

 * See WikiMedia: Gallery of User Styles :
 * Monobook User:Omegatron's fixed sidebar
 * WordPress skin
 * GuMax Bright Professional skin or GuMax skin site or Forum
 * BluWiki's Simple Skin or Instruction page
 * KindofBlue or Download page
 * MistyLook by Sadish Bala MistyLook download
 * Dusk skin (some problems)
 * Rounded Blue Edition skin or Rounded Blue
 * See also Free Media Wiki Skins :
 * Cavendish theme
 * siteground.com Skins Tutorial — step-by-step guide to creating a skin.
 * More than One Way to Skin a Wiki — skins tutorial.

Custom logo
Edit file  and change path to custom logo file: $wgLogo = "../skins/common/images/fishcakes-logo-mediawiki.png"; The log file should be a transparent PNG or GIF 135 pixels x 135 pixels.

Open External URL Links in New Window
This requires core code modification or Javascript. Worth looking into later. See meta.wikimedia.org Opening external links in a new window.

Hiding Main Edit Tabs from Anonymous Users
To hide/remove the article/edit etc tabs from the Top of the page for users who are not logged in modify the skin. For Fishcakes Wiki edit the MonoFishcakes skin in the file skins/MonoFishcakes.php           (file)

Search for this line:

and replace with:

To conditionally hide individual tabs, modify the code to check the value of each $key inside the foreach loop. Or you can write a 'hook' extension (around SkinTemplateXYZ) to modify the tab list.


 * See mediawiki.org Help: FAQ: How Do I remove the article edit tabs — perfect advice.

Hiding Section Edit Tabs from Anonymous Users
To hide/remove the section article/edit etc links from the body of the page for users who are not logged in modify the skin. For Fishcakes Wiki edit the MonoFishcakes skin in the file skins/MonoFishcakes.php           (file)

Search for this line:

and replace with: If you want to hide the links for all users including logged in users, instead edit file: monofishcaes/main.css           (file)

and add:


 * See mediawiki.org FAQ: How can I disable/enable tabs — advice, but not terribly useful.
 * See mediawiki.org Help: FAQ: How do I add/remove tabs in general — modifying tabs.
 * See palaeos.org How do I remove the article edit tabs — excellent guide.
 * See palaeos.org How do I hide the section edit links — excellent guide.

Hiding Main Page Title from Anonymous Users
MediaWiki does not have a built-in option to hide the main page title so you must use CSS.

If that doesn't work, look at the HTML source code to find the correct class to replace "page-Main_Page" with:

If no such class exists, then you cannot use this feature. You may be using a custom or outdated skin.


 * See mediawiki.org FAQ: Hide Main Page Title — guide to hiding title.

Hiding the Toolbox from Anonymous Users
To remove the toolbox for users that are not logged in, Edit the file Replace with:

Then, go down to the bottom of the div block you're editing and find the section that looks like this: add the line (between the two /div's) that closes off your new "if" statement:

Navigational Images
Using images for Navigation.
 * mediawiki.org Help: Navigation Guide
 * wikipedia.org Help: Navigational Images