Oldest known version of this page was edited on 2005-10-08 14:35:07 by Jakub81 [revert]
Page view:
NOTE: this no longer applies to the current design!
I don’t find the menus in Wakka particularly practical. For example, when I go to a page, I often want to know what page-changes were made, so I have to scroll to the bottom to get what I need. Some people also have problems with double-clicking the page to edit it (I’ve added an edit button), and search at the bottom isn’t really practical. Therefore, I’ve modified the layout to make most links always available wherever you are on the Wiki page:
Warning: This is using CSS for layout that works best in Browsers that have implemented CSS standards properly. That includes Mozilla-based browsers & Opera. IE/win displays the pages, but has been hacked (see here) to have the cool ‘always-there’ menu bar - IE also has buggy .PNG support which is why the edit button has been removed in IE (although see here). I know there are more IE users out there, but I personally don’t want to spend lots of time trying to cater for IEs myriad display bugs(the current hacks will suffice), I just hope MS will finally be able to code a capable rendering engine (as they did for IE/mac already…)
Here are the header.php, footer.php and 2 external CSS files (one for good browsers and one to fix IE). The CSS files are expected to reside in a subdirectory of the wiki root called style. A 50x50 pixel site logo called wiki.png is also expected there:
HEADER.PHP:
<?php
$message = $this->GetMessage();
$user = $this->GetUser();
?>
<!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="en" lang="en">
<head>
<title><?php echo $this->GetWakkaName().":".$this->GetPageTag(); ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="<?php echo $this->GetConfigValue("meta_keywords") ?>" />
<meta name="description" content="<?php echo $this->GetConfigValue("meta_description") ?>" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" href="<?php echo $this->GetConfigValue("base_url") ?>style/wiki.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="<?php echo $this->GetConfigValue("base_url") ?>style/wikiie.css" type="text/css" />
<![endif]-->
<script type="text/javascript">
function fKeyDown()
{
if (event.keyCode == 9)
{
event.returnValue= false;
document.selection.createRange().text = String.fromCharCode(9);
}
}
</script>
</head>
<body
<?php echo (!$user || ($user["doubleclickedit"] == Y)) && ($this->GetMethod() == "show") ? "ondblclick=\"document.location='".$this->href("edit")."';\" " : "" ?>
<?php echo $message ? "onLoad=\"alert('".$message."');\" " : "" ?>
>
<div class="editbutton">
<?php echo ($this->HasAccess("write") ? "<a href=\"".$this->href("edit")."\" title=\"Click to edit this page.\"><img src=\"http://yoursite.org/wiki.png\" /></a>" : ""); ?>
</div>
<div class="header">
<h2><?php echo $this->config["wakka_name"] ?> : <a href="<?php echo $this->config["base_url"] ?>TextSearch?phrase=<?php echo urlencode($this->GetPageTag()); ?>"><?php echo $this->GetPageTag(); ?></a></h2>
<?php echo $this->Link($this->config["root_page"]); ?> ::
<?php echo $this->config["navigation_links"] ? $this->Format($this->config["navigation_links"])." :: " : "" ?>
You are <?php echo $this->Format($this->UserName()) ?>
<div class="headermenu">
<?php echo $this->FormOpen("", "TextSearch", "get"); ?>
<?php echo $this->GetPageTime() ? "<a href=\"".$this->href("revisions")."\" title=\"Click to view recent page revisions.\">Revisions</a> ::\n" : "" ?>
<?php
// if this page exists
if ($this->page)
{
// if owner is current user
if ($this->UserIsOwner())
{
print("Yours :: <a href=\"".$this->href("acls")."\">ACLs</a> ::");
}
else
{
if ($owner = $this->GetPageOwner())
{
print(" ".$this->Format($owner));
}
else
{
print("Nobody".($this->GetUser() ? " (<a href=\"".$this->href("claim")."\">Own-It</a>)" : ""));
}
print(" :: ");
}
}
?>
<a href="<?php echo $this->href("referrers") ?>" title="Click to view a list of URLs referring to this page.">Referrers</a> ::
<input name="phrase" size="10" style="border: 1px dotted #CCCCAA; height: 12px; padding: 0; margin: 0; background-color: #FFFFEE" />
</div>
<?php echo $this->FormClose(); ?>
</div>
FOOTER.PHP:
<?php echo $this->FormOpen("", "TextSearch", "get"); ?>
<div class="footer">
<?php
echo $this->HasAccess("write") ? "<a href=\"".$this->href("edit")."\" title=\"Click to edit this page.\">Edit this page</a> ::\n" : "";
echo $this->GetPageTime() ? "<a href=\"".$this->href("revisions")."\" title=\"Click to view recent page revisions.\">".$this->GetPageTime()."</a> <a href=\"".$this->href("revisions.xml")."\" title=\"Click to view recent page revisions in XML format.\"><img src=\"".$this->href("", "xml/xml.gif")."\" width=\"36\" height=\"14\" align=\"middle\" style=\"border : 0px;\" alt=\"XML\" /></a> ::\n" : "";
// if this page exists
if ($this->page)
{
// if owner is current user
if ($this->UserIsOwner())
{
print("The page is yours :: <a href=\"".$this->href("acls")."\">Edit ACLs</a> ::");
}
else
{
if ($owner = $this->GetPageOwner())
{
print("Owner: ".$this->Format($owner));
}
else
{
print("Nobody".($this->GetUser() ? " (<a href=\"".$this->href("claim")."\">Take Ownership</a>)" : ""));
}
print(" :: ");
}
}
?>
<a href="<?php echo $this->href("referrers") ?>" title="Click to view a list of URLs referring to this page.">Referrers</a> ::
Search: <input name="phrase" size="15" style="border: 1px dotted #CCCCAA; padding: 0; margin: 0; background-color: #FFFFF8" />
</div>
<?php echo $this->FormClose(); ?>
<div class="copyright">
<?php echo $this->Link("http://validator.w3.org/check/referer", "", "Valid XHTML 1.0 Transitional") ?> :: <?php echo $this->Link("http://jigsaw.w3.org/css-validator/check/referer", "", "Valid CSS") ?> :: Powered by <?php echo $this->Link("WakkaWiki:WakkaWiki", "", "Wakka ".$this->GetWakkaVersion()) ?>
</div>
<?php
if ($this->GetConfigValue("debug"))
{
print("<span style=\"font-size: 11px; color: #888888\"><strong>Query log:</strong><br />\n");
foreach ($this->queryLog as $query)
{
print($query["query"]." (".$query["time"].")<br />\n");
}
print("</span>");
}
?>
</body>
</html>
WIKI.CSS:
@media print {
body { font: 14px/16px "Trebuchet MS", Verdana, sans-serif; background: white; color: black; padding:0; margin:0;}
ul, ol { list-style-type: square; margin: 1em 0 1em 2em; padding: 0; text-indent: 0;}
ol.num {list-style-type: decimal;}
ol.lowerroman {list-style-type: lower-roman;}
ol.upperroman {list-style-type: upper-roman;}
ol.loweralpha {list-style-type: lower-alpha;}
ol.upperalpha {list-style-type: upper-alpha;}
li, p {margin: 0; padding: 0.5em 0;}
.highlight {color: red; background: #FFC;}
.strikethrough {color: #888; text-decoration: line-through;}
.notes {color: red; background: #FFC;}
.centre {text-align: center;}
.code {border: 1px solid black ; font: 10px "Courier New", monospace; width: 90%; margin: 2em auto; overflow: auto; padding: 3px;}
.page {margin: 1%;font: 12px/17px Verdana, Helvetica, Arial, sans-serif;text-align: justify;}
.comment { background-color: #EEE; padding: 5px; border: 2px dashed; margin: 10px;}
.header {display: none;}
.footer {display: none;}
.editbutton img {display: none;}
.commentform {display:none;}
.commentsheader {display:none;}
.copyright {display:none;}
}
body {font: 14px/16px "Trebuchet MS", Verdana, sans-serif; background: #e4ddcc; color: #000; padding:0; margin:0;}
textarea, input, td, li, a {font-size: 1em;}
a {color: #933; text-decoration: underline;}
a:hover {color: #F00}
a.button {font: normal 12px/24px sans-serif;
text-decoration: none;
background: Menu !important;
color: MenuText !important;
padding: 0px 3px 1px;
border: outset 2px Menu;}
a.button:hover {color: #900 !important;}
ul, ol {list-style-type: square; margin: 1em 0 1em 2em; padding: 0; text-indent: 0;}
ol.num {list-style-type: decimal;}
ol.lowerroman {list-style-type: lower-roman;}
ol.upperroman {list-style-type: upper-roman;}
ol.loweralpha {list-style-type: lower-alpha;}
ol.upperalpha {list-style-type: upper-alpha;}
li, p {margin: 0; padding: 0.5em 0;}
form {margin: 0; padding: 0; }
h1, h2, h3, h4, h5 {margin: 0; padding: 0;}
img {border: 0px;}
hr {margin: 5px 0; padding: 0; height: 3px; background: black;}
pre {padding: 0; margin: 0;}
.highlight {color: red; background: #FFC;}
.strikethrough {color: #888; text-decoration: line-through;}
.notes {color: red; background: #FFC;}
.centre {text-align: center;}
.email1 {color: #D00;}
.email2 {color: #00D;}
.header { z-index: 5;
position: absolute;
font-size: 0.9em;
margin: 0;
top: 0;
left: 0;
width: 98%;
height: 3.5em;
overflow: hidden;
border: 0;
border-bottom: 3px solid;
padding: 0 1% 0 1%;
background: #e4ddcc; }
html>body .header {position:fixed;}
.header h2 {padding: 1px 0 5px 0;}
.headermenu { font: 9px/9px Verdana, sans-serif;
text-align: center;
z-index: 10;
position: absolute;
color: #555;
background: #d4ccbb;
vertical-align: middle;
width: 190px;
height: auto;
top: 1px;
right: 55px;
margin: 0;
padding: 0;
border: 1px solid #BA9;}
.page { margin: 3.4em 8px 0 8px;
background-color: #FFF;
padding: 10px 15px 10px 15px;
border: 2px inset;
border-bottom: none;
font: 13px/18px Verdana, Helvetica, Arial, sans-serif;
text-align: justify;
z-index: 1;}
.page h1 {font: 900 2.5em "Trebuchet MS", Verdana, Helvetica, sans-serif;}
.page h2 {font: 900 2.1em "Trebuchet MS", Verdana, Helvetica, sans-serif;}
.page h3 {font: 900 1.6em "Trebuchet MS", Verdana, Helvetica, sans-serif;}
.page h4 {font: 900 1.3em "Trebuchet MS", Verdana, Helvetica, sans-serif;}
.page h5 {font: 900 1.1em "Trebuchet MS", Verdana, Helvetica, sans-serif;}
.footer { margin: 0 8px;
background-color: #DDD;
padding: 5px;
border: 2px inset;
border-top: 1px solid #CCC;
text-align: left;}
.editbutton {position: absolute;
display: none;
top: 2px;
right: 8px;
width: 50px;
height: 50px;
z-index: 20;
background: transparent;}
html>body .editbutton {position: fixed; display: block;}
.editbutton a, .editbutton a:hover {background: transparent; border: 0px;}
.commentsheader {margin: 0 8px; background-color: #DDD; padding: 0 10px; border: 2px inset; border-bottom: none; border-top: 1px solid #CCC }
.comment {margin: 0 8px; background-color: #EEE; padding: 10px; border: 2px inset; border-bottom: none; border-top: 1px solid #CCC; }
.commentinfo {color: #AAA; }
.commentform {margin: 0 8px;background-color: #EEE; padding: 10px; border: 2px inset; border-bottom: none; border-top: 1px solid #CCC }
.code {color: black; background: #FFF; border: 1px solid #888 ; font: 11px "Courier New", monospace; width: 90%; margin:auto; overflow: auto; padding: 3px; }
.revisioninfo {color: #AAA; padding-bottom: 20px;}
.additions {color: #008;}
.deletions {color: #876; text-decoration: line-through;}
.error {color: #3C3; font-weight: bold;}
.indent {margin-left: 2em;}
.copyright {font-size: 0.8em; color: #777; text-align: right;}
.copyright a {color: #987;}
WIKIIE.CSS - Hacked CSS to give IE fixed menus.
html {overflow: hidden;}
body {height: 100%; overflow: auto; margin-right: 0px;}
.header {width: 96%; margin-right: 16px;}