Revision [20337]

This is an old revision of TwoColumnLayout made by BrianKoontz on 2008-11-30 10:39:21.


Two Column Layout

These are notes from a hack I did on the latest trunk revision (1262) to produce a 2-column layout. I am not a CSS guru, so this is a major accomplishment for me! I came across this link that gave me all the info I needed to get this done. My main goals were to:


Here's a screenshot:

2-column layout


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

At the very bottom of this file, replace the contents of the final else clause with this (extra lines included for context):
        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());

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).
 * Display a sidebar if the user has read access or is an admin.
 * Cloned from show.php handler.
 * @package     Handlers
 * @subpackage  Page
 * @version     $Id: show.php 1170 2008-07-02 05:30:03Z BrianKoontz $
 * @license 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()

define('SIDEBAR_CONTENT', 'SidebarContent');
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";
    if (!$sidebar_page)
        $createlink = '<a href="'.$this->Href('edit').'">'.WIKKA_PAGE_CREATE_LINK_DESC.'</a>';
        echo '<p>'.sprintf(SHOW_ASK_CREATE_PAGE_CAPTION,$createlink).'</p>'."\n";
        echo '</div></div><!--closing sidebar content-->'."\n";
        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('', '', '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(); ?>
                // 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(); ?>
            echo '</p></div></div>';

        // display page
        if ($raw == 1)
            echo '<div class="wikisource">'.nl2br($this->htmlspecialchars_ent($sidebar_page["body"], ENT_QUOTES)).'</div>';
            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";

The following changes can be made directly to 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 set 'stylesheet' => 'wikka-2-column.css' in wikka.config.php.

In the body selector, add the following at the end:
padding: 0;

In the .header selector, add the following at the end:
border-bottom: 1px solid #CCC;

Change the name of the .page selector to .page-container. Create a new .page selector:
 .page {
       margin: 5px;

Create the following new selectors:
.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 {
    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!


Please make sure that the server has write access to a folder named uploads.
There are 8 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki