HowTo: Integrate MediaWiki with Community Server and FrontPage Webs

Look and Feel

By Eric Hartwell - last updated March 16, 2006

While Community Server 2.0 is an excellent knowledge management and collaboration platform, it doesn't come with a Wiki engine. I wanted to add a wiki to my FrontPage web, using the Community Server 2.0 look and feel (see "HowTo: Integrate FrontPage Webs With Community Server").

I decided to use Mediawiki, the open-source wiki program used by Wikipedia (see "HowTo: Install MediaWiki on IIS"). MediaWiki is written in PHP; it uses a combination of dynamic page construction through PHP with CSS styles.

Rendering MediaWiki

MediaWiki renders HTML using the "PHPTal" template engine which mostly separates the code from the layout of the pages. The default skin is MonoBook. The code is defined in the /skins/MonoBook.php file and the format in the /skins/monobook/main.css style sheet.

InfoDabble Skin

Fortunately, most of the work has already been done in setting up the shared borders and styles for the FrontPage pages.

I started with a copy of the MonoBook skin.

Copy skins/MonoBook.php to InfoDabble.php
Copy skins/monobook/ to skins/infodabble

Class Definitions

Edit InfoDabble.php to rename the skin definition classes:

class SkinInfoDabble extends SkinTemplate {
	/** Using monobook. */
	function initPage( &$out ) {
		SkinTemplate::initPage( $out );
		$this->skinname  = 'infodabble';
		$this->stylename = 'infodabble';
		$this->template  = 'InfoDabbleTemplate';
	}
}
class InfoDabbleTemplate extends QuickTemplate {

Styles

Edit InfoDabble.php to use the web site's global style sheet WebStyles.css in addition to the custom wiki style sheet InfoDabbleMain.css.

<link rel="stylesheet" type="text/css" href="/WebStyles.css">
<link rel="stylesheet" type="text/css" href="/wiki/skins/InfoDabble/InfoDabbleMain.css">

Header

The InfoDabble.php script builds the page HTML based on the wiki definitions. In this case, the header is mostly fixed HTML using the same code as the top.htm shared border we already built for the FrontPage part of the site.

<div id="Common"><div id="CommonHeader">

<div class="CommonTitleBar"><div class="CommonTitleBarImage">
<table cellpadding="0" cellspacing="0" border="0">
 ... [Site Header] ...
</table>
</div></div>

<div class="CommonTabBar">
...
<table cellspacing="0" cellpadding="0" border="0">
...
<td id="wikiTab" class="CommonSimpleTabStripSelectedTab" onmouseover="tabOver(this);" 
    onmouseout="tabOut(this);" nowrap><a href="../wiki/">Wiki</a></td>
...
</table>
</div>

</div></div>

Since the wiki page header is only built when a wiki page is displayed, the wiki tab is permanently marked with the SelectedTab attribute instead of needing the navigation script used for the FrontPage parts of the web.

Body

As with the FrontPage pages, the body needs to be inside the CommonContentArea div:

<div class="CommonContentArea">
...
[MediaWiki page script]
...
</div>

Footer

The footer is mostly fixed HTML using the same code as the bottom.htm shared border we already built for the FrontPage part of the site.

<div id="CommonFooter">
<table border="0" cellspacing="0" cellpadding="0"><tr>

<td>
  ... [Site License] ...
 <?php if($this->data['credits'   ]) { ?>  |  <?php    $this->html('credits')    ?><?php } ?>
 <?php if($this->data['disclaimer']) { ?>  |  <?php $this->html('disclaimer') ?><?php } ?>
</td>

<td>
    <?php if($this->data['poweredbyico']) { ?><div id="f-poweredbyico"><?php $this->html('poweredbyico') ?></div><?php } ?>
</td>
</table>
</div>

Navigation, Toolbox, Search

Skinning the wiki this way preserves most of the wiki's layout while wrapping it with the site's borders.

Previous Step: Install MediaWiki on IIS Shared Hosting

References

Revision History

20060316 - Initial version

Eric Hartwell's InfoDabble