Extension:SkinCustomiser

MediaWiki extensions manual

SkinCustomiser Release status: stable
Implementation	Skin , MyWiki , Hook
Description	Customises existing skins . Add Scripts and Meta data just before the ‎</head> tag of the wiki.
Author(s)	WikiMANNia (WikiForMentalk)
Latest version	2.0.1 (2024-05-02)
MediaWiki	1.25+
PHP	5.4+
Database changes	No
License	GNU General Public License 2.0 or later
Download	GitHub: project page git repository URL [help ] commit history Note: No localisation updates are provided by translatewiki.net .
Parameters $wgSkinCustomiserHeadItems $wgSkinCustomiserMetaItems $wgSkinCustomiserDisplayBottom $wgSkinCustomiserScripts
Hooks used BeforePageDisplay

The SkinCustomiser customises existing skins for a complete wiki family . It adds Scripts and Meta data just before the ‎</head> tag of the wiki; and it translates individual entries in the sidebar .

Background

Customising Skins

MediaWiki skins can be customised in the files MediaWiki:Cologneblue.css, MediaWiki:Modern.css, MediaWiki:Monobook.css, MediaWiki:Timeless.css, MediaWiki:Vector.css, MediaWiki:Mobile.css, MediaWiki:Common.css respectively. However, if a wiki farm is operated, it is impractical to set up and maintain these files in every wiki on that farm.

Instead, all these CSS instructions can be collected centrally in this extension and included globally in all wikis of the wiki farm.

Customising Sidebars

Customisation also includes further entries via the sidebar , which on the one hand are to be managed centrally in a wiki farm and on the other hand are also to be translated into other languages .

This can be done by entering these labels and their translations in the i18n files of this extension.

Installation

• Download and place the file(s) in a directory called SkinCustomiser in your extensions/ folder.
• Add the following code at the bottom of your LocalSettings.php file:

  wfLoadExtension( 'SkinCustomiser' );
  

• Configure as required.
•  Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Configuration

Unlike the vast majority of extensions, this one cannot be used in its original state, but must first be adapted for a specific wiki farm .

Skins

MediaWiki skins can be customised in files MediaWiki:Cologneblue.css, MediaWiki:Modern.css, MediaWiki:Monobook.css, MediaWiki:Vector.css, MediaWiki:Mobile.css, MediaWiki:Common.css respectively. However, if a wiki farm is operated, it is impractical to set up and maintain these files in each wiki of this farm.

If a different skin is used, the AnotherSkin.css file must be renamed accordingly and this change must also be made in the extension.json file.

1. In the file tree:

   * resources
   **css
   ***Common.css       // <=== put the stuff from the file "MediaWiki:Common.css" inside here (or let it be empty)
   ***Mobile.css       // <=== put the stuff from the file "MediaWiki:Mobile.css" inside here (or let it be empty)
   ***Cologneblue.css  // <=== put the stuff from the file "MediaWiki:Cologneblue.css" inside here (or let it be empty)
   ***Modern.css       // <=== put the stuff from the file "MediaWiki:Modern.css" inside here (or let it be empty)
   ***Monobook.css     // <=== put the stuff from the file "MediaWiki:Monobook.css" inside here (or let it be empty)
   ***Vector.css       // <=== put the stuff from the file "MediaWiki:Vector.css" inside here (or let it be empty)
   ***AnotherSkin.css  // <=== 1. rename this to "'YourSkin'.css" for supporting other skins
   **images            // <=== You may add some (background) images here
   

2. In the extension.json file:

   	"ResourceModules": {
   		"ext.skincustomiser.common": {
   			"styles": "css/Common.css"
   		},
   		"ext.skincustomiser.mobile": {
   			"styles": "css/mobile.css"
   		},
   		"ext.skincustomiser.cologneblue": {
   			"styles": "css/Cologneblue.css"
   		},
   		"ext.skincustomiser.modern": {
   			"styles": "css/Modern.css"
   		},
   		"ext.skincustomiser.monobook": {
   			"styles": "css/Monobook.css"
   		},
   		"ext.skincustomiser.vector": {
   			"styles": "css/Vector.css"
   		},
   		"ext.skincustomiser.anotherskin": {  // <=== 2. rename this to "ext.skincustomiser.'yourskin'"
   			"styles": "css/AnotherSkin.css"  // <=== rename this to "css/'YourSkin'.css"
   		}
   	},
   

3. In the includes/Hooks.php file:

   	private static function isSupported( $skinname ) {
   
   		// Add another supported skin here:
   		$mySkin = 'anotherskin';  // <=== 3. remember to rename this
   		return in_array( $skinname, [ 'cologneblue', 'modern', 'monaco, 'monobook', 'vector', $mySkin ] );
   	}
   

Logo

$wgLogos   = [ '1x' => "$wgResourceBasePath/extensions/SkinCustomiser/resources/images/logo.png" ];
$wgFavicon = "$wgResourceBasePath/extensions/SkinCustomiser/resources/images/favicon.ico";

Skin vector-2022

$wgLogos = [
	'1x' => "$wgResourceBasePath/extensions/SkinCustomiser/resources/images/logo.png",
	'icon' => "$wgResourceBasePath/extensions/SkinCustomiser/resources/images/logo-icon.svg",
	'wordmark' => [
		"src" => "$wgResourceBasePath/extensions/SkinCustomiser/resources/images/logo-wordmark.svg",
		"width" => 160,
		"height" => 24
	],
	'tagline' => [
		"src" => "$wgResourceBasePath/extensions/SkinCustomiser/resources/images/logo-tagline.svg",
		"width" => 160,
		"height" => 14
	]
];
$wgFavicon = "$wgResourceBasePath/extensions/SkinCustomiser/resources/images/favicon.ico";

Sidebar

A wiki farm can be customised in the sidebar . The customised labels and their translations can be managed in this way:

* i18n
**en.json  // <=== add the labels from the "MediaWiki:Sidebar" here
**de.json  // <=== add the German translations of the custom labels from the "MediaWiki:Sidebar" here
**es.json  // <=== add the Spanish translations of the custom labels from the "MediaWiki:Sidebar" here
**fr.json  // <=== add more translation files if needed

In addition, some standard messages from mediawiki can also be customised there.

Customising the i18n/en.json file:

{
	"@metadata": {
		"authors": [ "YOU" ]
	},
	"about": "About your wiki",           // <==== You may have an individual "about" link in the Sidebar
	"projectpage": "Project page",        // <==== You may link to an individual project page
	"registrate": "Ask for account",      // <==== You may have a link to an individual registration form
	"contact": "Contact",                 // <==== You may have a link to an individual contact form
	"interaction": "Interaction",         // <==== Custom translation for an "Interaction" portlet
	"portals": "Portals",                 // <==== Custom portlet for some custom portal pages
	"portal-1": "Your personal portal 1", // <==== Custom portal page 1
	"portal-2": "Your personal portal 2", // <==== Custom portal page 2
	"portal-3": "Your personal portal 3", // <==== Custom portal page 3
	"createacct-benefit-heading": "{{SITENAME}} is made by individuals like you." // <==== Customise a mediawiki message
}

For more details see: Localisation file format

Head data

Disable with: $wgSkinCustomiserHeadItems = [];

Scheme

To configure the head data, add the following to LocalSettings.php after the installation line:

$wgSkinCustomiserHeadItems = [
		[ "key1", "content1" ],
		[ "key2", "content2" ]
	];

Meta data

Disable with: $wgSkinCustomiserMetaItems = [];

Scheme

To configure the head meta data, add the following to LocalSettings.php after the installation line:

$wgSkinCustomiserMetaItems = [
		[ "name1", "content1" ]
		[ "name2", "content2" ],
	];

Examples

Example (from Extension:AgeClassification ):

$wgSkinCustomiserMetaItems = [
		[ "age-de-meta-label", "age=0 hash: yourdigitalcode v=1.0 kind=sl protocol=all" ],
	];

Scripts

One or more head scripts can be added to the wiki. The head scripts can consist of any HTML and/or JavaScript .

Disable with: $wgSkinCustomiserScripts = "";

Scheme

To configure the head script, add the following to LocalSettings.php after the installation line:

$wgSkinCustomiserScripts = <<<'START_END_MARKER'
<script></script>
START_END_MARKER;

Leave untouched the first and last line with START_END_MARKER stuff, this is a special syntax of PHP (without it, it would be tricky to deal with apostrophes inside the script). Do not add whitespaces around the last line’s marker, it would break it (more details about this syntax). Do add new line after.

To add additional scripts, simply include them between the markers:

$wgSkinCustomiserScripts = <<<'START_END_MARKER'
<script></script>
<script></script>
<script></script>
START_END_MARKER;

You may specify a name for the script too if needed, add the following after the installation line:

$wgSkinCustomiserScripts = 'add_your_script_name_here';

Examples

Example (from Extension:Google Analytics Integration ):

$wgSkinCustomiserScripts = <<<'START_END_MARKER'
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-xxxxxxxx-xx', 'auto');
  ga('set', 'anonymizeIp', true);
  ga('send', 'pageview');
</script>
START_END_MARKER;
$wgHeadScriptName = 'googleanalytics';

Bottom Display

$wgSkinCustomiserDisplayBottom adds items at the end of a page, at the bottom but still within the content frame.

Disable with: $wgSkinCustomiserDisplayBottom = "";

Example

$wgSkinCustomiserDisplayBottom =
    '<p>Something at the bottom of every page.</p>';

See also

The extension SkinCustomiser combines functionality from

• Extension:HeaderExtension
• Extension:PCR GUI Inserts
• Extension:WimaAdvertising