=====Two Column Layout=====

<<As of Wikka 1.3.1
//Note:// This has only been tested with the default theme! Other themes will likely need minor CSS tweaks.<<::c::

These are notes from a hack I did on [[Docs:WhatsNew131 | Wikka 1.3.1]] to produce a 2-column layout.  I am not a CSS guru, so this is a major accomplishment for me!  I came across [[http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ | this link]] that gave me all the info I needed to get this done.  My main goals were to:

~- Create a sidebar with contents that could be edited from a Wikka page
~- Ensure that the layout worked on both FF and IE
~- Change the minimum amount of core code necessary to produce the desired results

====Screenshot====

Here's a screenshot:

{{image url="http://wikkawiki.org/TwoColumnLayout/files.xml?action=download&file=2-column.png" alt="2-column layout"}}

====Modifications====

There are a few changes needed in Wakka.class.php, a new handler that needs to be created, and a couple of CSS modifications.

**libs/Wakka.class.php**
At the very bottom of this file, replace the contents of the final ##else## clause with this (extra lines included for context):
%%(php)
		else    // all other handlers need page header and page footer
		{
			// handle body before header and footer: user may be logging in/out!
			$content_body = $this->Handler($this->GetHandler());
			$sidebar_body = $this->Handler("sidebar");
			print($this->Header()."<div class=\"wrap\">".$sidebar_body."<div class=\"page-container\">".$content_body."</div></div>".$this->Footer());
		}
	}
}
?>
%%

**handlers/sidebar/sidebar.php**
Create a new directory under the ##handlers## directory called ##sidebar##, and then in the new directory create ##sidebar.php## and populate with the following contents. (I just noticed that the sidebar won't display if the user doesn't have read access...but then again, what would someone without read access use the sidebar for?)  Also, you can change the SIDEBAR_CONTENT define to point to the Wikka page of your choice (currently, it's set to ##""SidebarContent""##).
%%(php)
<?php
/**
 * Display a sidebar if the user has read access or is an admin.
 *
 * Cloned from show.php handler.
 *
 * @package		Handlers
 * @subpackage	        Page
 * @since               Wikka 1.1.6.6
 * @license		http://www.gnu.org/copyleft/gpl.html GNU General Public License
 * @filesource
 *
 * @uses		Config::$anony_delete_own_comments
 * @uses		Config::$hide_comments
 * @uses		Wakka::Format()
 * @uses		Wakka::FormClose()
 * @uses		Wakka::FormOpen()
 * @uses		Wakka::GetConfigValue()
 * @uses		Wakka::GetPageTag()
 * @uses		Wakka::GetUser()
 * @uses		Wakka::GetUserName()
 * @uses		Wakka::HasAccess()
 * @uses		Wakka::Href()
 * @uses		Wakka::htmlspecialchars_ent()
 * @uses		Wakka::LoadComments()
 * @uses		Wakka::LoadPage()
 * @uses		Wakka::FormatUser()
 * @uses		Wakka::UserIsOwner()
 * 
 */

//constants
define('SIDEBAR_CONTENT', 'SidebarContent');
if(!defined('SHOW_OLD_REVISION_SOURCE')) define('SHOW_OLD_REVISION_SOURCE', 0); # if set to 1 shows by default the source of an old revision instead of the rendered version

//validate URL parameters
$raw = (!empty($_GET['raw']))? (int) $this->GetSafeVar('raw', 'get') : SHOW_OLD_REVISION_SOURCE;

//Load sidebar page
$sidebar_page = $this->LoadPage(SIDEBAR_CONTENT);

echo "\n".'<!--starting sidebar content-->'."\n";
echo '<div class="sidebar-container"';
echo (($user = $this->GetUser()) && ($user['doubleclickedit'] == 'N') || !$this->HasAccess('write')) ? '' : ' ondblclick="document.location=\''.$this->Href('edit', $sidebar_page['tag'], 'id='.$sidebar_page['id']).'\';" '; #268
echo '><div class="sidebar">';

if (!$this->HasAccess('read'))
{
	echo '<p><em class="error">'.WIKKA_ERROR_ACL_READ.'</em></p>';
	echo "\n".'</div></div><!--closing sidebar content-->'."\n";
}
else
{
	if (!$sidebar_page)
	{
		$createlink = '<a href="'.$this->Href('edit', SIDEBAR_CONTENT, '').'">'.WIKKA_PAGE_CREATE_LINK_DESC.'</a>';
		echo '<p>'.sprintf(SHOW_ASK_CREATE_PAGE_CAPTION,$createlink).'</p>'."\n";
		echo '</div></div><!--closing sidebar content-->'."\n";
	}
	else
	{
		if ($sidebar_page['latest'] == 'N')
		{
			$pagelink = '<a href="'.$this->Href().'">'.$sidebar_page['tag'].'</a>';
			echo '<div class="revisioninfo">'."\n";
			echo '<h4 class="clear">'.sprintf(WIKKA_REVISION_NUMBER, '<a href="'.$this->Href('', $sidebar_page['tag'], 'time='.urlencode($sidebar_page['time'])).'">['.$sidebar_page['id'].']</a>').'</h4>'."\n";
			echo '<p>';
			echo sprintf(SHOW_OLD_REVISION_CAPTION, $pagelink, $this->FormatUser($sidebar_page['user']), $this->Link($this->tag, 'revisions', $sidebar_page['time'], TRUE, TRUE, '', 'datetime'));
			
			// added if encapsulation: in case where some pages were brutally deleted from database
			if ($latest = $this->LoadPage($sidebar_page['tag']))
			{
?>
				<br />
				<?php echo $this->FormOpen('show', '', 'GET', '', 'left') ?>
				<input type="hidden" name="time" value="<?php echo $this->GetSafeVar('time', 'get') ?>" />
				<input type="hidden" name="raw" value="<?php echo ($raw == 1)? '0' :'1' ?>" />
				<input type="submit" value="<?php echo ($raw == 1)? SHOW_FORMATTED_BUTTON : SHOW_SOURCE_BUTTON ?>" />&nbsp;
				<?php echo $this->FormClose(); ?>
<?php
				// if this is an editable revision, display form
				if ($this->HasAccess('write'))
				{
?>
					<?php echo $this->FormOpen('edit') ?>
					<input type="hidden" name="previous" value="<?php echo $latest['id'] ?>" />
					<input type="hidden" name="body" value="<?php echo $this->htmlspecialchars_ent($sidebar_page['body']) ?>" />
					<input type="submit" value="<?php echo SHOW_RE_EDIT_BUTTON ?>" />
					<?php echo $this->FormClose(); ?>
<?php
				}
			}
			echo '</p></div></div>';
		}

		// display page
		if ($raw == 1)
		{
			echo '<div class="wikisource">'.nl2br($this->htmlspecialchars_ent($sidebar_page["body"], ENT_QUOTES)).'</div>';
		}
		else
		{
			echo $this->Format($sidebar_page['body'], 'wakka', 'page');
		}
		//clear floats at the end of the main div
		echo "\n".'</div></div><!--closing sidebar content-->'."\n\n";
	}
}
?>
%%

**css/wikka-2-column.css**
The following changes can be made directly to ##templates/default/css/wikka.css##.  Or, you can copy ##css/wikka.css## to ##css/wikka-2-column.css## and make the changes there.  If you change the name of the CSS file, you'll need to make sure to change the following line in ##templates/default/header.php## from:

%%(php)
 <link rel="stylesheet" type="text/css" href="<?php echo $this->GetThemePath('/') ?>/css/wikka.css?<?php echo $this->htmlspecialchars_ent($this->GetConfigValue('stylesheet_hash')) ?>" />
%%

to:

%%(php)
 <link rel="stylesheet" type="text/css" href="<?php echo $this->GetThemePath('/') ?>/css/wikka-2-column.css?<?php echo $this->htmlspecialchars_ent($this->GetConfigValue('stylesheet_hash')) ?>" />
%%

In the ##body## selector, add the following at the end:
%%(css)
padding: 0;
%%

In the ## #header ## selector, add the following at the end:
%%(css)
border-bottom: 1px solid #CCC;
%%

Add the following to the start of the ## #footer ## selector:
%%(css)
clear: both;
%%

Replace contents of ##.page## selector with the following:
%%(css)
 #page {
	   margin: 5px;
}
%%

Create the following new selectors:
%%(css)
.wrap {
	color: #000;
	background: white;
	margin:0 auto;
}

.page-container {
	color: #000;
	background: white;    padding: 0px;
	margin-left: -1px;
	border-left: 1px solid #CCC;
	border-bottom: none;
	height: 100%;
	float: right;
	width: 75%;
}

/* Bug in IE causes following divs to "bleed over" into preceding
 * float, so width is a bit smaller than needed to prevent this. To
 * compensate, background of sidebar matches the body background, and
 * the header provides the border rather than the page and sidebar
 * containers.
 */
.sidebar-container {
	clear: both;
	color: #000;
	background: #f8f8f8;
	margin: 0px;
	padding: 0;
	border-bottom: none;
	height: 100%;    float: left;
	width: 24.5%;
}

.sidebar {
	margin: 0 0 0 10px;
}

/* Keep the comments div from overflowing in the preceding sidebar
 * float
 */
div#comments {
	clear: both;
}
%%

Unless I've forgotten something, that should be it!






----
CategoryLayout

{{files}}