Create Mediawiki Template
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
We can change the layout of the wiki's new skin. You can use your own classes and ids in your template, but it is better to use MediaWiki's default names for them, because:
- If others edit your skin's template file or CSS, it will make it easier for them to work out what's going on, if they are familiar with MediaWiki.
- Some class and id names (for example, the navigation list items) are automatically generated by MediaWiki, by default.
- It is more consistent, as the other skins for your wiki are presented with those names. As a result, it is easier to make cross-skin changes.
Contents |
[edit] Ordering Elements
As we have used the MonoBook template as the basis for our new skin, the ordering of the elements within the page is not quite right for our JazzMeet skin's layout. In MonoBook, the ordering within the body is as follows:
- The page's primary content:
- Page title
- Your wiki's tagline
- "New message" notification, if needed
-
jump-to-navlinks, to skip to either the wiki's navigation or the search feature - The content itself
- The category links, if any
- The print footer
- The interface:
- Views (for example, edit page, view page history)
- Personal tools (for example, log in, log out, preferences)
- The logo
- Navigation
- Search
- Toolbox
- The wiki's footer
The following order needs to be adopted to produce the layout required for JazzMeet:
- The page's header, which contains the wiki's logo and the personal tools element
- The column content, including links to JazzMeet's sponsors, and the search feature
- The views and navigation elements
- The page's primary content (this remains the same as mentioned earlier)
- Page title
- Your wiki's tagline
- "New message" notification, if needed
-
jump-to-navlinks, to skip to either the wiki's navigation or the search feature - The content itself
- The category links, if any
- The print footer
- The toolbox
- The footer
[edit] Content Ordering
Ideally, we want each page's primary content to be as close to the top of the page as possible. This is not only good for the search engines, as they can instantly see what your page is about, but is also better for those who use text-only Internet browsers.
[edit] Layouts with CSS
To create the basic two-column layout that is required for JazzMeet's design, we can use the following:
<div id="globalWrapper"> <div id="content"> <!-- main content here --> </div> <div id="column-one"> <!-- column content here --> </div> <div style="clear: both !important;"></div> </div>
By assigning widths to the content and the column divs and making them float left, we can easily create a two-column layout that positions the primary content higher in the page's structure than the content in the column. Thus, the CSS would be as follows:
#globalWrapper {
margin: 0 auto; /* centre the layout */
width: 950px;
}
#content {
float: left;
width: 710px;
}
#column-one {
float: left;
width: 215px;
}
| More CSS-based Layouts:
There are a lot of CSS resources on the Internet. Two of the best are Bluerobot's Layout Reservoir (http://www.bluerobot.com/web/layouts/), and Position is Everything ( |
[edit] Moving Blocks Around
Currently, the JazzMeet wiki's content is in a single column, with the page's primary content displayed above other elements such as the toolbox and navigation links, and the search feature.
| Back up your skin template frequently:
Moving the content around in the template can become messy. So make sure you create copies of your skin template frequently, just in case! |
JazzMeet's design means that we will need two columns, with the primary content to the left, and the other content, such as the search feature and our sponsors to the right, as we demonstrated earlier.
[edit] The Header
We have already dealt with the <head> elements. First in the page's <body> are the #p-personal element and the wiki's logo, which we need to enclose in a new div to style them more effectively. We can insert the following existing div inside:
<div id="header">
<div class="portlet" id="p-personal">
<h5><?php $this->msg('personaltools') ?></h5>
<div class="pBody">
<ul>
<?php foreach($this->data['personal_urls'] as $key => $item) { ?>
<li id="pt-<?php echo Sanitizer::escapeId($key) ?>"<?php
if ($item['active']) { ?> class="active"<?php } ?>><a href="<?php
echo htmlspecialchars($item['href']) ?>"<?php echo $skin->tooltipAndAccesskey('pt-'.$key) ?><?php
if(!empty($item['class'])) { ?> class="<?php
echo htmlspecialchars($item['class']) ?>"<?php } ?>><?php
echo htmlspecialchars($item['text']) ?></a></li>
<?php} ?>
</ul>
</div>
</div>
<img src="jazzmeet_logo.png" alt="JazzMeet logo" />
</div><!--end header-->
To correctly display the above div, we need to specify some style rules:
#header {
background: #FFFFFF url("header_bg.png") no-repeat top right;
height: 85px;
}
#header img {
float: left;
}
#globalWrapper needs a little styling in order to create a fixed width design, and to use a background color for the right-hand column in accordance with our JazzMeet design. The height of the page content does not matter.Refer to the following code:
#globalWrapper {
background: #D9D5C3;
margin: 0 auto;
padding: 0;
width: 950px;
}
The #content area needs a defined width, and has to float to the left, alongside the column to its right:
#content {
background: #E6E4D8 url("content_bg.gif") repeat-y top left;
color: #000000;
float: left;
font-family: georgia, "times new roman", times, serif;
padding: 0px 5px 10px 35px;
width: 710px;
}
As we have inserted the JazzMeet logo in the header, we can remove the PHP that generates it further down the skin. This code is identified as follows:
<div class="portlet" id="p-logo"> <a style="background-image: url(skins/common/images/wiki.png);" href="index.php/Main_Page" title="Visit the Main Page [z]" accesskey="z"></a> </div> <script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
[edit] The Content Column: #column-one
The JazzMeet design has a column along the right-hand side of the page's primary content that displays JazzMeet's sponsors, and some advertisements. In the order of our page for JazzMeet, this content comes before the page's primary content.
Beneath the closing tag for our new header, we can now add the necessary content for our column that includes the search feature:
<div id="column-one">
<div id="p-search" class="portlet">
<h5><label for="searchInput"><?php $this->msg('search') ?></label> </h5>
<div id="searchBody" class="pBody">
<form action="<?php $this->text('searchaction') ?>" id="searchform"><div>
<input id="searchInput" name="search" type="text"<?php echo $skin->tooltipAndAccesskey('search');
if( isset( $this->data['search'] ) ) {
?> value="<?php $this->text('search') ?>"<?php } ?> />
<input type='submit' name="go" class="searchButton" id="searchGoButton" value="<?php $this->msg('searcharticle') ?>" />
<input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="<?php $this->msg('searchbutton') ?>" />
</div>
</form>
</div>
</div>
</div><!-- end column-one-->
Above the closing tag for the #column-one div, we can include our sponsor's logos, as well as a header in preparation for the advertisements that will be displayed:
<h5 class="sponsors"><span>Sponsors</span></h5> <img src="wiki-install-path/sponsor_packt.png" alt="Sponsor: Packt" /> <img src="wiki-install-path/sponsor_peacock-carter.png" alt="Sponsor: Peacock Carter" /> <h5 class="advertisements"><span>Advertisements</span></h5> </div><!-- end column-one-->
These images need styling, because we have previously styled images in the content area:
#column-one img {
border: 2px #BEB798 solid;
margin: 7px;
}
We also need to replace the header's text with an image of the text, because most people will not have Hick Design's "Hill House", the font used in the JazzMeet logo:
h5.sponsors, h5.advertisements {
height: 21px;
border-bottom: 1px #BEB798 solid;
border-top: 1px #BEB798 solid;
width: 195px;
}
h5.sponsors {
background: transparent url("h5_sponsor.png") no-repeat top left;
}
h5.advertisements {
background: transparent url("h5_advertisement.png") no-repeat top left;
}
h5.sponsors span, h5.advertisements span {
display: none !important;
}
| The above-mentioned technique is useful for displaying headings and small amounts of text in a font that many of your visitors may not have. But beware that its overuse could result in search engine penalties. The best practice is to use this technique sparingly, and replicate the exact text within the heading in the image that is replacing it. |
[edit] The Content Body
We need to make changes to the content body's order, such as the wiki's navigation, that appears above the #content div, inside #column-content. Because we have defined these links in MediaWiki:Sidebar, we need to have them inserted in to the template dynamically:
<div id="column-content">
<div class='portlet' id='p-<?php echo Sanitizer::escapeId($bar) ?>'<?php echo $skin->tooltip('p-'.$bar) ?>>
<h5>
<?php $out = wfMsg( $bar ); if (wfEmptyMsg($bar, $out)) echo $bar; else echo $out; ?>
</h5>
<div class='pBody'>
<ul>
<?php foreach($cont as $key => $val) { ?>
<li id="<?php echo Sanitizer::escapeId($val['id']) ?>"<?php
if ( $val['active'] ) { ?> class="active" <?php }?>>
<a href="<?php echo htmlspecialchars($val['href']) ?>"<?php echo $skin->tooltipAndAccesskey($val['id']) ?>>
<?php echo htmlspecialchars($val['text']) ?></a></li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
<div id="content">
The toolbox in the PHP template file (look for <code><div class="portlet" id="p-tb"></code>) should be moved to just above the closing tag for #bodyContent, in order to insert it at the bottom of the primary content area. In the next few chapters, we will learn how to insert social-bookmarking links and a printable stylesheet for MediaWiki.
[edit] The Footer
The footer for the JazzMeet skin is located just outside the #content div. Refer to the following code:
</div><!-- end content-->
<div id="footer">
<ul id="f-list">
<?php
$footerlinks = array(
'about', 'disclaimer',
);
foreach( $footerlinks as $aLink ) {
if( isset( $this->data[$aLink] ) && $this->data[$aLink] ) {
?>
<li id="<?php echo$aLink?>"><?php $this->html($aLink) ?></li>
<?php }
}
?>
<li id="f-poweredby">Powered by <a href="http://www.mediawiki.org/" title="MediaWiki">MediaWiki</a> from the cool
dudes at <a href="http://www.wikimedia.org/" title="Wikimedia">Wikimedia</a></li>
<li id="f-top"><a href="#top" title="Return to the top of this page">Top of this page</a></li>
</ul>
</div>
This dynamically inserts links to the "about" and "disclaimers" pages of our wiki, and statically inserts a link back to MediaWiki and Wikimedia.
[edit] End Of The Template File
Be sure to include the code <script type="text/javascript">if (window.runOnloadHook) runOnloadHook();</script> just above the </body> tag in your template file. Some of the functions in MediaWiki rely on it. You will also need to restore warnings (wfRestoreWarnings()) in the PHP file, once your template has been created:
<?php $this->html('bottomscripts'); /* JS call to runBodyOnloadHook */ ?>
</div>
<?php $this->html('reporttime') ?>
<script type="text/javascript">if (window.runOnloadHook) runOnloadHook();</script>
</body>
</html>
<?php
wfRestoreWarnings();
} // end of execute() method
} // end of class
?>
<?php $this->html('reporttime') ?> creates commented text at the bottom of your wiki's page.
[edit] The Result
The resulting pages, and the associated style and images generated with the template, resemble our vision for JazzMeet a lot more closely.
[edit] Additional References
- For instructions on Installing MediaWiki, click here
- For instructions on Customizing MediaWiki, click here
- For instructions on Troubleshooting Browser Issues with MediaWiki, click here
[edit] Source
The source of this content is Chapter 4: Changing the Layout of MediaWiki Skins Design by Richard Carter (Packt Publishing, 2008).
