MediaWiki Look And Feel

From Fishcakes Wiki

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 skins/monobook. Preferences are set by adding code to the file LocalSettings.php.

• 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

Made h2 headers bold and padded top margin in lines 270 to 271

#bodyContent h1, #bodyContent {
   font-weight: bold;
   margin-top: 1em;
   margin-bottom: .6em;
}

Added padding to h3 headers in line 274

#bodyContent h3, #bodyContent h4, #bodyContent h5 {
margin-top: 1em;

Adding Horizontal Scroll Bar to Code display

In order to add a horizontal scroll bar to code snippets displayed by the >pre> and >source> formats, edit the Skin css file:

skins/monofishcakes/main.css

Find text:

pre {
   padding: 1em;
   border: 1px dashed #2f6fab;
   color: black;
   background-color: #f9f9f9;
   line-height: 1.1em;
   overflow: auto;
}

Add the line:

pre {
   /* etc */
   overflow: auto;
}

Creating a Skin Based on MonoBook

Assuming you would like to create a new skin called MonoFishcakes based on MonoBook you would do:

1. Copy the file skins/MonoBook.php to skins/MonoFishcakes.php.

2. Copy the directory skins/monobook/ to skins/monofishcakes/.

3. Edit the file skins/MonoFishcakes.php.

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 skins/MonoFishcakes.php and skins/monofishcakes/ 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 LocalSettings.php 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 MonoFishcakes, the default must be monofishcakes. (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 LocalSettings.php 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 Content from Anonymous Users

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:

<?php   foreach($this->data['content_actions'] as $key => $tab) {   ?>

and replace with:

<?php   foreach($this->data['content_actions'] as $key => $tab) if($this->data['loggedin']==1) {   ?>

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:

</head>

and replace with:

<?php if(!$this->data['loggedin']) { ?>
      <style>
        <!--
        .editsection { display: none; }
        -->
      </style>
<?php } ?>
</head>

If you want to hide the links for all users including logged in users, instead edit file:

monofishcaes/main.css            (file)

and add:

.editsection { display: none; }

• 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.

body.page-Main_Page h1.firstHeading { display:none; }

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

<body class="mediawiki ns-0 ltr page-Some_title">

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 /skins/MonoBook.php <code/>.

Find the section that looks like this (by searching for p-tb):

<div class="portlet" id="p-tb">
    <h5><?php $this->msg('toolbox') ?></h5>

<div class="portlet" id="p-tb">
    <?php if($this->data['loggedin']) { ?>
      <h5><?php $this->msg('toolbox') ?></h5>

wfRunHooks( 'MonoBookTemplateToolboxEnd', array( &$this ) );
?>
      </ul>
    </div>
  </div>

wfRunHooks( 'MonoBookTemplateToolboxEnd', array( &$this ) );
?>
      </ul>
    </div>
    <?php } ?>		
  </div>