Skinning MediaWiki: Difference between revisions

From charlesreid1
No edit summary
Line 1: Line 1:
=General Information=
=General Information=
==Laying It Out==


The basic idea behind skinning MediaWiki is to create PHP/HTML code that will serve as a header and footer for your wiki. You can imagine the page being split into several pieces:
The basic idea behind skinning MediaWiki is to create PHP/HTML code that will serve as a header and footer for your wiki. You can imagine the page being split into several pieces:


{|class="wikitable zebra" style="border-width: 2px; border-style: solid;"
{|class="wikitable zebra" style="border-width: 2px; border-style: solid;"
!Zone
!Description
!Tags
|-
|-
|Page Head and Title
|Page Head and Title
|This is defined by MediaWiki
|This is defined by MediaWiki
 
|<pre>
<pre>
<html>
<html>
<head>
<head>
...
<title>
</title>
</head>
</head>
<body>
<body>
Line 18: Line 23:
|Page Body: Body Header
|Page Body: Body Header
|This is defined by your skin
|This is defined by your skin
|
|-
|Page Body: Wiki Page Content
|This is defined by MediaWiki (and inserted/abstracted by your skin)
|<pre><?php $this->html('bodytext') ?></pre>
|-
|Page Body: Body Footer
|This is defined by your skin
|
|-
|Page End
|This is defined by MediaWiki
|<pre>
</body>
</html>
</pre>
|}
==Create a New Skin==
You can start creating your own skin by starting with an existing skin, such as Simple or Monobook. Starting with the Monobook skin can become kind of involved, but honestly skinning MW is not that involved to begin with.
First, create your copy of a skin. I'm going to name my skin CMR:


<pre>
<pre>
$ cd w/skins/


<div id="banner">A Fancy Banner</div>
$ cp MonoBook.php CMR.php


<div id="navigation">Navigation menu</div>
$ cp -r monobook/ cmr/
</pre>


<div id="mediawiki">MediaWiki links/navigation/buttons</div>
Next, I can set my MW theme to be the new theme by editing <code>w/LocalSettings.php</code> and adding:


[etc...]
<pre>
$wgDefaultSkin = 'cmr';
</pre>


OK, so now you're using your own skin. But now you have to edit CMR.php - where to begin???
==Navigating Your Skin's PHP File==
The place to begin is with CMR.php (or, the php file for whatever your skin is called). Upon perusing the file, you'll see it's a PHP class that defines a PHP object, and that PHP object represents the MediaWiki skin.
The beginning of the class is important to edit - replace instances of "Monobook" with your skin's own name.
Next, look for a function called execute():
<pre>
function execute() {
</pre>
</pre>
|-
|Page Body: Wiki Page Content
|This is defined by MediaWiki (and inserted/abstracted by your skin)


<pre>
This will define the behavior of the skin when someone on the website requests a new page. MediaWiki parses the request, determines what content the user is interested in viewing, retrieves that content from a database, package the content in HTML code, then calls this execute() method to create the HTML code for the very final version of the page - the version that the user will see in their browser when they request a new page.
 
==Creating a Title==
 
The first thing that the execute() function should do is create a title. MediaWiki already has a large amount of functionality operating behind the scenes, and by the time operation reaches the execute() function, a header has already been created.


<!-- begin mediawiki content -->
The header function can be created/inserted by making a call to create the head element:
<?php $this->html('bodytext') ?>
<!-- end mediawiki content -->


<pre>
$this->html( 'headelement' );
</pre>
</pre>
|-
 
|Page Body: Body Footer
This should create content that looks something like this (this is using my website's current skin, called "Dash"):
|This is defined by your skin
|-
|Page End
|This is defined by MediaWiki


<pre>
<pre>
</body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
</html>
<html lang="en" dir="ltr">
<head>
<title>Editing Skinning MediaWiki - Charles Martin Reid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="MediaWiki 1.16.0" />
<meta name="robots" content="noindex,nofollow" />
<link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Skinning_MediaWiki&amp;action=edit" />
<link rel="edit" title="Edit" href="/w/index.php?title=Skinning_MediaWiki&amp;action=edit" />
<link rel="shortcut icon" href="/w/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="/w/opensearch_desc.php" title="Charles Martin Reid (en)" />
<link title="Creative Commons" type="application/rdf+xml" href="/w/index.php?title=Skinning_MediaWiki&amp;action=creativecommons" rel="meta" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-nc-nd/3.0/us/" />
<link rel="alternate" type="application/atom+xml" title="Charles Martin Reid Atom feed" href="/w/index.php?title=Special:RecentChanges&amp;feed=atom" />
<link rel="stylesheet" href="/w/index.php?title=MediaWiki:Common.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=18000&amp;action=raw&amp;maxage=18000" />
<link rel="stylesheet" href="/w/index.php?title=MediaWiki:Print.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=18000&amp;action=raw&amp;maxage=18000" media="print" />
<link rel="stylesheet" href="/w/index.php?title=MediaWiki:Dash.css&amp;usemsgcache=yes&amp;ctype=text%2Fcss&amp;smaxage=18000&amp;action=raw&amp;maxage=18000" />
<link rel="stylesheet" href="/w/index.php?title=-&amp;action=raw&amp;maxage=18000&amp;smaxage=0&amp;ts=20120525033749&amp;gen=css" />
<script>
var skin="dash",
stylepath="/w/skins",
wgUrlProtocols="http\\:\\/\\/|https\\:\\/\\/|ftp\\:\\/\\/|irc\\:\\/\\/|gopher\\:\\/\\/|telnet\\:\\/\\/|nntp\\:\\/\\/|worldwind\\:\\/\\/|mailto\\:|news\\:|svn\\:\\/\\/",
wgArticlePath="/wiki/$1",wgScriptPath="/w",
wgScriptExtension=".php",wgScript="/w/index.php",
wgVariantArticlePath=false,wgActionPaths={},
wgServer="http://charlesmartinreid.com",wgCanonicalNamespace="",
wgCanonicalSpecialPageName=false,wgNamespaceNumber=0,
wgPageName="Skinning_MediaWiki",wgTitle="Skinning MediaWiki",
wgAction="edit",wgArticleId=802,wgIsArticle=false,
wgUserName="Admin",wgUserGroups=["bureaucrat", "cmr", "economist", "journal", "sysop", "writing", "*", "user", "autoconfirmed"],wgUserLanguage="en",wgContentLanguage="en",wgBreakFrames=false,
wgCurRevisionId=3674,wgVersion="1.16.0",wgEnableAPI=true,
wgEnableWriteAPI=true,wgSeparatorTransformTable=["", ""],wgDigitTransformTable=["", ""],wgMainPageTitle="Main Page",
wgFormattedNamespaces={"-2": "Media", "-1": "Special", "0": "", "1": "Talk", "2": "User", "3": "User talk", "4": "Charles Martin Reid", "5": "Charles Martin Reid talk", "6": "File", "7": "File talk", "8": "MediaWiki", "9": "MediaWiki talk", "10": "Template", "11": "Template talk", "12": "Help", "13": "Help talk", "14": "Category", "15": "Category talk", "200": "Writing", "274": "Widget", "275": "Widget talk"},
wgNamespaceIds={"media": -2, "special": -1, "": 0, "talk": 1, "user": 2, "user_talk": 3, "charles_martin_reid": 4, "charles_martin_reid_talk": 5, "file": 6, "file_talk": 7, "mediawiki": 8, "mediawiki_talk": 9, "template": 10, "template_talk": 11, "help": 12, "help_talk": 13, "category": 14, "category_talk": 15, "writing": 200, "widget": 274, "widget_talk": 275, "image": 6, "image_talk": 7},
wgSiteName="Charles Martin Reid",
wgCategories=[],wgRestrictionEdit=[],wgRestrictionMove=[],
wgAjaxWatch={"watchMsg": "Watch", "unwatchMsg": "Unwatch", "watchingMsg": "Watching...", "unwatchingMsg": "Unwatching...", "tooltip-ca-watchMsg": "Add this page to your watchlist", "tooltip-ca-unwatchMsg": "Remove this page from your watchlist"};
</script><script src="/w/skins/common/wikibits.js?270"></script>
<script src="/w/skins/common/edit.js?270"></script>
<script src="/w/skins/common/ajax.js?270"></script>
<script src="/w/skins/common/ajaxwatch.js?270"></script>
<script src="/w/index.php?title=-&amp;action=raw&amp;smaxage=0&amp;gen=js&amp;useskin=dash&amp;270"></script>
 
</head>
<body class="mediawiki ltr ns-0 ns-subject page-Skinning_MediaWiki skin-dash">
 
</pre>
</pre>


|}
Any HTML code generated by the execute() function begins after the <nowiki><body></nowiki> tag.
 
==Modifying Your Skin's PHP File==
 
From here, you just edit the execute() function to do what you want. However, there are a couple of tricks that will be helpful in figuring out how exactly that should be best done.
 
Let us look at a typical Wikipedia page to identify some elements we'll want to arrange when creating our own skin.
 
[[Image:ScreenShotWithBoxes.jpg|400px]]
 
There are three elements of interest here:
 
1. MediaWiki links (e.g. "Main Page", "Random Page", "Special Pages", "Featured Content", etc...) - ''left side of page''
 
2. MediaWiki action links (e.g. search, log in) - ''top right corner of page''
 
3. Page action links (e.g. "Edit", "History", etc...) - ''top edge of page''
 
I will cover how each of these is controlled.
 
===MediaWiki Links===
 
 
 
===MediaWiki Action Links===
 
===MediaWiki Action Links===
 
 
 
 
 
 
[[Category:Programs]]
[[Category:MediaWiki]]

Revision as of 04:12, 25 May 2012

General Information

Laying It Out

The basic idea behind skinning MediaWiki is to create PHP/HTML code that will serve as a header and footer for your wiki. You can imagine the page being split into several pieces:

Zone Description Tags
Page Head and Title This is defined by MediaWiki 
<html>
<head>
<title>
</title>
</head>
<body>
Page Body: Body Header This is defined by your skin
Page Body: Wiki Page Content This is defined by MediaWiki (and inserted/abstracted by your skin) 
<?php $this->html('bodytext') ?>
Page Body: Body Footer This is defined by your skin
Page End This is defined by MediaWiki 
</body>
</html>

Create a New Skin

You can start creating your own skin by starting with an existing skin, such as Simple or Monobook. Starting with the Monobook skin can become kind of involved, but honestly skinning MW is not that involved to begin with.

First, create your copy of a skin. I'm going to name my skin CMR: 

$ cd w/skins/

$ cp MonoBook.php CMR.php

$ cp -r monobook/ cmr/

Next, I can set my MW theme to be the new theme by editing w/LocalSettings.php and adding: 

$wgDefaultSkin = 'cmr';

OK, so now you're using your own skin. But now you have to edit CMR.php - where to begin???

Navigating Your Skin's PHP File

The place to begin is with CMR.php (or, the php file for whatever your skin is called). Upon perusing the file, you'll see it's a PHP class that defines a PHP object, and that PHP object represents the MediaWiki skin.

The beginning of the class is important to edit - replace instances of "Monobook" with your skin's own name.

Next, look for a function called execute(): 

function execute() {

This will define the behavior of the skin when someone on the website requests a new page. MediaWiki parses the request, determines what content the user is interested in viewing, retrieves that content from a database, package the content in HTML code, then calls this execute() method to create the HTML code for the very final version of the page - the version that the user will see in their browser when they request a new page.

Creating a Title

The first thing that the execute() function should do is create a title. MediaWiki already has a large amount of functionality operating behind the scenes, and by the time operation reaches the execute() function, a header has already been created.

The header function can be created/inserted by making a call to create the head element: 

$this->html( 'headelement' );

This should create content that looks something like this (this is using my website's current skin, called "Dash"): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" dir="ltr">
<head>
<title>Editing Skinning MediaWiki - Charles Martin Reid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="MediaWiki 1.16.0" />
<meta name="robots" content="noindex,nofollow" />
<link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Skinning_MediaWiki&action=edit" />
<link rel="edit" title="Edit" href="/w/index.php?title=Skinning_MediaWiki&action=edit" />
<link rel="shortcut icon" href="/w/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="/w/opensearch_desc.php" title="Charles Martin Reid (en)" />
<link title="Creative Commons" type="application/rdf+xml" href="/w/index.php?title=Skinning_MediaWiki&action=creativecommons" rel="meta" />
<link rel="copyright" href="http://creativecommons.org/licenses/by-nc-nd/3.0/us/" />
<link rel="alternate" type="application/atom+xml" title="Charles Martin Reid Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom" />
<link rel="stylesheet" href="/w/index.php?title=MediaWiki:Common.css&usemsgcache=yes&ctype=text%2Fcss&smaxage=18000&action=raw&maxage=18000" />
<link rel="stylesheet" href="/w/index.php?title=MediaWiki:Print.css&usemsgcache=yes&ctype=text%2Fcss&smaxage=18000&action=raw&maxage=18000" media="print" />
<link rel="stylesheet" href="/w/index.php?title=MediaWiki:Dash.css&usemsgcache=yes&ctype=text%2Fcss&smaxage=18000&action=raw&maxage=18000" />
<link rel="stylesheet" href="/w/index.php?title=-&action=raw&maxage=18000&smaxage=0&ts=20120525033749&gen=css" />
<script>
var skin="dash",
stylepath="/w/skins",
wgUrlProtocols="http\\:\\/\\/|https\\:\\/\\/|ftp\\:\\/\\/|irc\\:\\/\\/|gopher\\:\\/\\/|telnet\\:\\/\\/|nntp\\:\\/\\/|worldwind\\:\\/\\/|mailto\\:|news\\:|svn\\:\\/\\/",
wgArticlePath="/wiki/$1",wgScriptPath="/w",
wgScriptExtension=".php",wgScript="/w/index.php",
wgVariantArticlePath=false,wgActionPaths={},
wgServer="http://charlesmartinreid.com",wgCanonicalNamespace="",
wgCanonicalSpecialPageName=false,wgNamespaceNumber=0,
wgPageName="Skinning_MediaWiki",wgTitle="Skinning MediaWiki",
wgAction="edit",wgArticleId=802,wgIsArticle=false,
wgUserName="Admin",wgUserGroups=["bureaucrat", "cmr", "economist", "journal", "sysop", "writing", "*", "user", "autoconfirmed"],wgUserLanguage="en",wgContentLanguage="en",wgBreakFrames=false,
wgCurRevisionId=3674,wgVersion="1.16.0",wgEnableAPI=true,
wgEnableWriteAPI=true,wgSeparatorTransformTable=["", ""],wgDigitTransformTable=["", ""],wgMainPageTitle="Main Page",
wgFormattedNamespaces={"-2": "Media", "-1": "Special", "0": "", "1": "Talk", "2": "User", "3": "User talk", "4": "Charles Martin Reid", "5": "Charles Martin Reid talk", "6": "File", "7": "File talk", "8": "MediaWiki", "9": "MediaWiki talk", "10": "Template", "11": "Template talk", "12": "Help", "13": "Help talk", "14": "Category", "15": "Category talk", "200": "Writing", "274": "Widget", "275": "Widget talk"},
wgNamespaceIds={"media": -2, "special": -1, "": 0, "talk": 1, "user": 2, "user_talk": 3, "charles_martin_reid": 4, "charles_martin_reid_talk": 5, "file": 6, "file_talk": 7, "mediawiki": 8, "mediawiki_talk": 9, "template": 10, "template_talk": 11, "help": 12, "help_talk": 13, "category": 14, "category_talk": 15, "writing": 200, "widget": 274, "widget_talk": 275, "image": 6, "image_talk": 7},
wgSiteName="Charles Martin Reid",
wgCategories=[],wgRestrictionEdit=[],wgRestrictionMove=[],
wgAjaxWatch={"watchMsg": "Watch", "unwatchMsg": "Unwatch", "watchingMsg": "Watching...", "unwatchingMsg": "Unwatching...", "tooltip-ca-watchMsg": "Add this page to your watchlist", "tooltip-ca-unwatchMsg": "Remove this page from your watchlist"};
</script><script src="/w/skins/common/wikibits.js?270"></script>
<script src="/w/skins/common/edit.js?270"></script>
<script src="/w/skins/common/ajax.js?270"></script>
<script src="/w/skins/common/ajaxwatch.js?270"></script>
<script src="/w/index.php?title=-&action=raw&smaxage=0&gen=js&useskin=dash&270"></script>

</head>
<body class="mediawiki ltr ns-0 ns-subject page-Skinning_MediaWiki skin-dash">

Any HTML code generated by the execute() function begins after the <body> tag.

Modifying Your Skin's PHP File

From here, you just edit the execute() function to do what you want. However, there are a couple of tricks that will be helpful in figuring out how exactly that should be best done.

Let us look at a typical Wikipedia page to identify some elements we'll want to arrange when creating our own skin.

ScreenShotWithBoxes.jpg

There are three elements of interest here:

1. MediaWiki links (e.g. "Main Page", "Random Page", "Special Pages", "Featured Content", etc...) - left side of page

2. MediaWiki action links (e.g. search, log in) - top right corner of page

3. Page action links (e.g. "Edit", "History", etc...) - top edge of page

I will cover how each of these is controlled.

MediaWiki Links

MediaWiki Action Links

MediaWiki Action Links

Retrieved from "https://charlesreid1.com/w/index.php?title=Skinning_MediaWiki&oldid=3676"