Jump to content

Extension:SkinCustomiser

From mediawiki.org
Translate this page
Languages:
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:

Note:
No localisation updates are
provided by translatewiki.net .

Parameters

  • $wgSkinCustomiserHeadItems
  • $wgSkinCustomiserMetaItems
  • $wgSkinCustomiserDisplayBottom
  • $wgSkinCustomiserScripts
Hooks used

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

[edit]

Customising Skins

[edit]

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

[edit]

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

[edit]
  • 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.
  • Yes Done – Navigate to Special:Version on your wiki to verify that the extension is successfully installed.

Configuration

[edit]

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

[edit]

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 ] );
	}


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

Skin vector-2022

[edit]
$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";
[edit]

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

[edit]

Disable with: $wgSkinCustomiserHeadItems = [];

Scheme

[edit]

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

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

Meta data

[edit]

Disable with: $wgSkinCustomiserMetaItems = [];

Scheme

[edit]

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

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

Examples

[edit]

Example (from Extension:AgeClassification ): 

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

Scripts

[edit]

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

[edit]

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

[edit]

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

[edit]

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

Disable with: $wgSkinCustomiserDisplayBottom = "";

Example

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

See also

[edit]

The extension SkinCustomiser combines functionality from

Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:SkinCustomiser&oldid=6779769"