Skins

From Eugene Neighbors
Jump to: navigation, search
{{#if: |Template loop detected: Template:H:h|

{{#if:|Other languages:}} Template:H-langs: {{#if: ||}}}} The overall appearance and layout of MediaWiki pages is dictated by skins. Users can each choose to use different skins (and further customize User styles), and a site administrator can change the default skin for a wiki. The default skin packaged with every MediaWiki install is MonoBook, famous as the default on various WikiMedia projects. When a site administrator creates a custom skin, it is easiest for them to work with an existing skin such as MonoBook.

The latest default skins are mainly based on CSS, so you don't have to change the page source to get a very different look.

  • User styles -- many tweaks you can try in MediaWiki:Monobook.css or in your user stylesheet
  • Gallery of user styles -- different skins for your browsing and copy&paste pleasure

Note: There is also a more in-depth walkthrough on MediaWiki.org.

Contents

Generic CSS classes for content

You can reference CSS classes from articles. To allow better and more uniform styling for content elements (infoboxes for example) you should define a global set of css classes that can be referenced from the content. For example: espaƱa

Creating a Skin based on MonoBook (1.6.x)

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

1 - copy the file skins/MonoBook.php to skins/FooBar.php

2 - create a directory skins/foobar and copy the directory skins/monobook to skins/foobar

3 - edit skins/FooBar.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 SkinFooBar extends SkinTemplate {
       /** Using foobar. */
       function initPage( &$out ) {
               SkinTemplate::initPage( $out );
               $this->skinname  = 'foobar';
               $this->stylename = 'foobar';
               $this->template  = 'FooBarTemplate';
       }
}

3b - FIND:

class MonoBookTemplate extends QuickTemplate {

REPLACE WITH:

 class FooBarTemplate extends QuickTemplate {

3c - FIND:

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

REPLACE WITH:

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

Your skin is now ready to be plugged in and modified. At this point you can zip up your FooBar.php and foobar 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...

cd /path/to/mediawiki/
vi LocalSettings.php

4a - FIND:

$wgDefaultSkin = 'monobook';

REPLACE WITH:

$wgDefaultSkin = 'foobar';

Warnings

  • Even though a user changing their skin preference will be presented with a list containing 'FooBar', the default must be 'foobar'. (The capitalisation is different). Getting this wrong will mean that the default skin is invalid (and displays as a badly formated 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 (FooBar, foobar), namely the CSS paths.

Done!

Remove Skins

(for MediaWiki 1.6.7)

To remove specific skin choices from the User Preferences skin choices, put this in LocalSettings.php:

# To remove various skins from the User Preferences choices
$wgSkipSkins = array("chick", "cologneblue", "myskin", "nostalgia", "simple", "standard");

"standard" is the skin called Classic. Omit skins from above line that you want to remain as choices.

Remove Skin tab from User Preferences

(for MediaWiki 1.6.7)

To remove the Skin link/tab from User Preferences so that users do not have to be bothered with it at all, go in includes\SpecialPreferences.php and comment out (put another # at the beginning of each line, or enclose them in /*....*/) these lines:

               # Skin
               #
               $wgOut->addHTML( "<fieldset>\n<legend>\n" . wfMsg('skin') . "</legend>\n" );
               $mptitle = Title::newMainPage();
               $previewtext = wfMsg('skinpreview');
               # Only show members of $wgValidSkinNames rather than
               # $skinNames (skins is all skin names from Language.php)
               foreach ($wgValidSkinNames as $skinkey => $skinname ) {
                       if ( in_array( $skinkey, $wgSkipSkins ) ) {
                               continue;
                       }
                       $checked = $skinkey == $this->mSkin ? ' checked="checked"' : ;
                       $sn = isset( $skinNames[$skinkey] ) ? $skinNames[$skinkey] : $skinname;
                       $mplink = htmlspecialchars($mptitle->getLocalURL("useskin=$skinkey"));
                       $previewlink = "<a target='_blank' href=\"$mplink\">$previewtext</a>";
                       if( $skinkey == $wgDefaultSkin )
                               $sn .= ' (' . wfMsg( 'default' ) . ')';
                       $wgOut->addHTML( "<input type='radio' name='wpSkin' id=\"wpSkin$skinkey\" value=\"$skinkey\"$checked /> <label for=\"wpSkin$skinkey\">{$sn}</label> $previewlink
\n" ); } $wgOut->addHTML( "</fieldset>\n\n" );

Ensure users using skipped skins use the default instead

(for MediaWiki 1.9.0)

(modified code by Uriah Anthony Stephenson-Ward | uriah@diyinfo.org | DIYinfo.org)


This piece of code ensures that if you have removed a skin, and have specified this in the $wgSkipSkins array in LocalPreferences.php, users who have previously selected the removed skin, will now use $wgDefaultSkin instead. This is an easy way to ensure all of your users are running the same skin, merely put all of the other skins in $wgSkipSkins.

The middle section needs to be inserted into the "normalizeKey( $key )" function in the "includes/Skin.php" file.

       /**
        * Normalize a skin preference value to a form that can be loaded.
        * If a skin can't be found, it will fall back to the configured
        * default (or the old 'Classic' skin if that's broken).
        * @param string $key
        * @return string
        * @static
        */
       static function normalizeKey( $key ) {
               global $wgDefaultSkin, $wgSkipSkins;
               $skinNames = Skin::getSkinNames();
               if( $key ==  ) {
                       // Don't return the default immediately;
                       // in a misconfiguration we need to fall back.
                       $key = $wgDefaultSkin;
               }
               if( in_array( $key , $wgSkipSkins ) ) {
                       $key = $wgDefaultSkin;
               }
               if( isset( $skinNames[$key] ) ) {
                       return $key;
               }
               // Older versions of the software used a numeric setting
               // in the user preferences.
               $fallback = array(
                       0 => $wgDefaultSkin,
                       1 => 'nostalgia',
                       2 => 'cologneblue' );
               if( isset( $fallback[$key] ) ){
                       $key = $fallback[$key];
               }
               if( isset( $skinNames[$key] ) ) {
                       return $key;
               } else {
                       // The old built-in skin
                       return 'standard';
               }
       }

Hopefully this will be merged with the release version in the future (However I have not submitted it as yet!)


Additionally, the final if-then-else statement appears to default to a specific skin when all else fails. I believe this should try $wgDefaultSkin before using 'standard'. If I were a better man, I would have implemented this whilst I was at it. If enough people want this, they can contact me on the email above, and I will implement it.

Works with 1.6.8 too, just fix global $wgDefaultSkin; at the start to global $wgDefaultSkin, $wgSkipSkins;. Otherwise you'll get a "Warning: in_array(): Wrong datatype for second argument" error message.
Personal tools