User:Koinu/Koinu's Iconic Tabs
Koinu's Iconic Tabs! I'm glad you're interested in the script! Please e-mail me at john.d.mann@gmail.com and let me know that you're using my script. I'm just curious as to how many people will use it.
Well, I was reading over in Skin projects that one thing people were looking for were replacement of menu text with icons. So I sat down earlier today and got to work on them. I made eight icons - just enough for an admin view of the upper tab on the page, and threw down a little JavaScript (inline) to swap out the words for the icons. The bulk of the action there is generated by a simple HTML parser at the top of the template file. Yeah, you only have to edit ONE file for this tweak. Sorry I'm not better at drawing icons, but they are okay for samples :).
ICONS MUST BE 14 pixels TALL TO WORK!!!!!! (see the discussion of this page) They can be as wide as you want - within reason. Too large, and they will mess up the entire layout. I suggest a maximum width of 28 pixels. Feel free to experiment. I do have some sample icons for you to use, but they are not top quality, i apologize. They are 14x14 transparent .png's.
File:Articleicon.pngFile:Discussionicon.pngFile:Editoricon.pngFile:Lockedicon.pngFile:Unlockedicon.png
File:Moveicon.pngFile:Watchicon.png
(Please note that you will need a few additional images to make a complete set for even the top bar. For example, "Special Page" tab, or "unwatch".)
- NOTE: icons images with my naming conventions are in your wiki root folder. feel free to modify. the source page you modify is the PHP file in the /skins/ root folder, not IN the /monobook/ folder
There are only two main sections I added.
- JavaScript function in the header. it takes the id="foo" value of the item you are changing, and the "/path/image.jpg" as its second paramater. It then waits to be called by the second script I added. When called, updateLink() searches the DOM object on the page with the objID value matching what you passed in. It removes the code from the inside of the HREF located inside of the object, and drops in your image, thus conveniently swapping text for image. To disable this, you simply comment out the second portion of the script.
- function updateLink(objID, imgSrc)
- JavaScript function immediately after the PHP processes the tabs. They call updateLink() with each ID you specify, and replace the text on that tab with the image you specify.
Modified contents of Monobook.php
<?php
/**
* MonoBook with Koinu's Iconic Tabs <john.d.mann@gmail.com> Please e-mail me if you use this script just so I know how many of you actually like it.
*
* Translated from gwicke's previous TAL template version to remove
* dependency on PHPTAL.
*
* @todo document
* @package MediaWiki
* @subpackage Skins
*/
if( !defined( 'MEDIAWIKI' ) )
die();
/** */
require_once('includes/SkinTemplate.php');
/**
* Inherit main code from SkinTemplate, set the CSS and template filter.
* @todo document
* @package MediaWiki
* @subpackage Skins
*/
class SkinMonoBook extends SkinTemplate {
/** Using monobook. */
function initPage( &$out ) {
SkinTemplate::initPage( $out );
$this->skinname = 'monobook';
$this->stylename = 'monobook';
$this->template = 'MonoBookTemplate';
}
}
class MonoBookTemplate extends QuickTemplate {
/**
* Template filter callback for MonoBook skin.
* Takes an associative array of data set from a SkinTemplate-based
* class, and a wrapper for MediaWiki's localization database, and
* outputs a formatted page.
*
* @access private
*/
function execute() {
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php $this->text('lang') ?>" lang="<?php $this->text('lang') ?>" dir="<?php $this->text('dir') ?>">
<head>
<meta http-equiv="Content-Type" content="<?php $this->text('mimetype') ?>; charset=<?php $this->text('charset') ?>" />
<?php $this->html('headlinks') ?>
<title><?php $this->text('pagetitle') ?></title>
<style type="text/css" media="screen,projection">/*<![CDATA[*/ @import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/main.css"; /*]]>*/</style>
<link rel="stylesheet" type="text/css" media="print" href="<?php $this->text('stylepath') ?>/common/commonPrint.css" />
<!--[if lt IE 5.5000]><style type="text/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE50Fixes.css";</style><![endif]-->
<!--[if IE 5.5000]><style type="te xt/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE55Fixes.css";</style><![endif]-->
<!--[if IE 6]><style type="text/css">@import "<?php $this->text('stylepath') ?>/<?php $this->text('stylename') ?>/IE60Fixes.css";</style><![endif]-->
<!--[if IE]><script type="text/javascript" src="<?php $this->text('stylepath') ?>/common/IEFixes.js"></script>
<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
<?php if($this->data['jsvarurl' ]) { ?><script type="text/javascript" src="<?php $this->text('jsvarurl' ) ?>"></script><?php } ?>
<script type="text/javascript" src="<?php $this->text('stylepath' ) ?>/common/wikibits.js"></script>
<?php if($this->data['usercss' ]) { ?><style type="text/css"><?php $this->html('usercss' ) ?></style><?php } ?>
<?php if($this->data['userjs' ]) { ?><script type="text/javascript" src="<?php $this->text('userjs' ) ?>"></script><?php } ?>
<?php if($this->data['userjsprev']) { ?><script type="text/javascript"><?php $this->html('userjsprev') ?></script><?php } ?>
<script type="text/javascript">
function updateLink(objID, imgSrc) {
if(!document.getElementById(objID)) {
return;
}
var links = document.getElementById(objID).getElementsByTagName("a");
var img;
for(var i=0; links[i]; i++) {
if(links[i].getAttribute("href") != "") {
for(var p=0; links[i].childNodes[p]; p++) {
links[i].removeChild(links[i].childNodes[p]);
}
img = document.createElement("img");
img.setAttribute("src", imgSrc);
links[i].appendChild(img);
}
}
}
</script>
</head>
<body <?php if($this->data['body_ondblclick']) { ?>ondblclick="<?php $this->text('body_ondblclick') ?>"<?php } ?>
<?php if($this->data['nsclass' ]) { ?>class="<?php $this->text('nsclass') ?>"<?php } ?>>
<div id="globalWrapper">
<div id="column-content">
<div id="content">
<a name="top" id="contentTop"></a>
<?php if($this->data['sitenotice']) { ?><div id="siteNotice"><?php $this->html('sitenotice') ?></div><?php } ?>
<h1 class="firstHeading"><?php $this->text('title') ?></h1>
<div id="bodyContent">
<h3 id="siteSub"><?php $this->msg('tagline') ?></h3>
<div id="contentSub"><?php $this->html('subtitle') ?></div>
<?php if($this->data['undelete']) { ?><div id="contentSub"><?php $this->html('undelete') ?></div><?php } ?>
<?php if($this->data['newtalk'] ) { ?><div class="usermessage"><?php $this->html('newtalk') ?></div><?php } ?>
<!-- start content -->
<?php $this->html('bodytext') ?>
<?php if($this->data['catlinks']) { ?><div id="catlinks"><?php $this->html('catlinks') ?></div><?php } ?>
<!-- end content -->
<div class="visualClear"></div>
</div>
</div>
</div>
<div id="column-one">
<div id="p-cactions" class="portlet">
<h5>Views</h5>
<ul>
<?php foreach($this->data['content_actions'] as $key => $action) {
?><li id="ca-<?php echo htmlspecialchars($key) ?>"
<?php if($action['class']) { ?>class="<?php echo htmlspecialchars($action['class']) ?>"<?php } ?>
><a href="<?php echo htmlspecialchars($action['href']) ?>"><?php
echo htmlspecialchars($action['text']) ?></a></li><?php
} ?>
</ul>
</div>
<script type="text/javascript">
updateLink("ca-nstab-main", "/articleicon.png");
updateLink("ca-talk", "/discussionicon.png");
updateLink("ca-edit", "/editoricon.png");
updateLink("ca-history", "/clockicon.png");
updateLink("ca-protect", "/unlockedicon.png");
updateLink("ca-unprotect", "/lockedicon.png");
updateLink("ca-delete", "/deleteicon.png");
updateLink("ca-move", "/moveicon.png");
updateLink("ca-watch", "/watchicon.png");
</script>
<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 htmlspecialchars($key) ?>"><a href="<?php
echo htmlspecialchars($item['href']) ?>"<?php
if(!empty($item['class'])) { ?> class="<?php
echo htmlspecialchars($item['class']) ?>"<?php } ?>><?php
echo htmlspecialchars($item['text']) ?></a></li><?php
} ?>
</ul>
</div>
</div>
<div class="portlet" id="p-logo">
<a style="background-image: url(<?php $this->text('logopath') ?>);"
href="<?php echo htmlspecialchars($this->data['nav_urls']['mainpage']['href'])?>"
title="<?php $this->msg('mainpage') ?>"></a>
</div>
<script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
<div class="portlet" id="p-nav">
<h5><?php $this->msg('navigation') ?></h5>
<div class="pBody">
<ul>
<?php foreach($this->data['navigation_urls'] as $navlink) { ?>
<li id="<?php echo htmlspecialchars($navlink['id'])
?>"><a href="<?php echo htmlspecialchars($navlink['href']) ?>"><?php
echo htmlspecialchars($navlink['text']) ?></a></li><?php } ?>
</ul>
</div>
</div>
<div id="p-search" class="portlet">
<h5><label for="searchInput"><?php $this->msg('search') ?></label></h5>
<div class="pBody">
<form name="searchform" action="<?php $this->text('searchaction') ?>" id="searchform">
<input id="searchInput" name="search" type="text"
<?php if($this->haveMsg('accesskey-search')) {
?>accesskey="<?php $this->msg('accesskey-search') ?>"<?php }
if( isset( $this->data['search'] ) ) {
?> value="<?php $this->text('search') ?>"<?php } ?> />
<input type='submit' name="go" class="searchButton" id="searchGoButton"
value="<?php $this->msg('go') ?>"
/> <input type='submit' name="fulltext"
class="searchButton"
value="<?php $this->msg('search') ?>" />
</form>
</div>
</div>
<div class="portlet" id="p-tb">
<h5><?php $this->msg('toolbox') ?></h5>
<div c lass="pBody">
<ul>
<?php if($this->data['notspecialpage']) { foreach( array( 'whatlinkshere', 'recentchangeslinked' ) as $special ) { ?>
<li id="t-<?php echo $special?>"><a href="<?php
echo htmlspecialchars($this->data['nav_urls'][$special]['href'])
?>"><?php echo $this->msg($special) ?></a></li>
<?php } } ?>
<?php if($this->data['feeds']) { ?><li id="feedlinks"><?php foreach($this->data['feeds'] as $key => $feed) {
?><span id="feed-<?php echo htmlspecialchars($key) ?>"><a href="<?php
echo htmlspecialchars($feed['href']) ?>"><?php echo htmlspecialchars($feed['text'])?></a> </span>
<?php } ?></li><?php } ?>
<?php foreach( array('contributions', 'emailuser', 'upload', 'specialpages') as $special ) { ?>
<?php if($this->data['nav_urls'][$special]) {?><li id="t-<?php echo $special ?>"><a href="<?php
echo htmlspecialchars($this->data['nav_urls'][$special]['href'])
?>"><?php $this->msg($special) ?></a></li><?php } ?>
<?php } ?>
</ul>
</div>
</div>
<?php if( $this->data['language_urls'] ) { ?><div id="p-lang" class="portlet">
<h5><?php $this->msg('otherlanguages') ?></h5>
<div class="pBody">
<ul>
<?php foreach($this->data['language_urls'] as $langlink) { ?>
<li>
<a href="<?php echo htmlspecialchars($langlink['href'])
?>"><?php echo $langlink['text'] ?></a>
</li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>
</div><!-- end of the left (by default at least) column -->
<div class="visualClear"></div>
<div id="footer">
<?php if($this->data['poweredbyico']) { ?><div id="f-poweredbyico"><?php $this->html('poweredbyico') ?></div><?php } ?>
<?php if($this->data['copyrightico']) { ?><div id="f-copyrightico"><?php $this->html('copyrightico') ?></div><?php } ?>
<ul id="f-list">
<?php if($this->data['lastmod' ]) { ?><li id="f-lastmod"><?php $this->html('lastmod') ?></li><?php } ?>
<?php if($this->data['viewcount' ]) { ?><li id="f-viewcount"><?php $this->html('viewcount') ?></li><?php } ?>
<?php if($this->data['credits' ]) { ?><li id="f-credits"><?php $this->html('credits') ?></li><?php } ?>
<?php if($this->data['copyright' ]) { ?><li id="f-copyright"><?php $this->html('copyright') ?></li><?php } ?>
<?php if($this->data['about' ]) { ?><li id="f-about"><?php $this->html('about') ?></li><?php } ?>
<?php if($this->data['disclaimer']) { ?><li id="f-disclaimer"><?php $this->html('disclaimer') ?></li><?php } ?>
</ul>
</div>
</div>
<?php $this->html('reporttime') ?>
</body>
</html>
<?php
}
}
?>