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.
 


These are notes from a hack I did on 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 this link that gave me all the info I needed to get this done. My main goals were to:


Screenshot


Here's a screenshot:

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):
        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
/**
 * 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:

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


to:

 <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:
padding: 0;


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


Add the following to the start of the #footer selector:
clear: both;


Replace contents of .page selector with the following:
 #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 {
    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

Please make sure that the server has write access to a folder named uploads.
Comments
Comment by WillyPs
2008-12-02 19:25:58
Brian, what was your goal in creating two columns? You have added links to the left column that were already on the page in the header... (according to your screenie, anyway ;) )
Comment by BrianKoontz
2008-12-03 03:42:39
Oh, that was just my initial cut :) The left sidebar is actually an editable page, I just threw a couple of links on it!

There are a few other 2-column layouts elsewhere, but these simply duplicate the nav header. I wanted something more flexible.
Comment by WillyPs
2008-12-03 22:16:36
Ok, I kinda got that from looking at the code, you put whatever links you want on a page called SidebarContent. Good idea, perhaps the header and footer could be on a page also... or even all on one page like this: {{header}} some header stuff here {{left_sidebar}} some links here {{footer}} some footer stuff here
Comment by BrianKoontz
2008-12-03 22:25:33
Yes, I've always thought header and footer should be editable from the wiki itself. In fact, there's no reason why the Wikka configuration shouldn't be configurable from the wiki either!
Comment by DarTar
2008-12-04 14:51:33
I doubt it's a good idea to store header/footer in the DB. However I think the wiki could be used as an interface to edit static template files and stylesheets, as WordPress does. My Skin editor module already does this for CSS files.
Comment by WillyPs
2008-12-04 20:20:20
... I assume because there would be a speed hit to load something from the DB that is the same on every page anyway. Brian, check out DescentiaPedia...www.prepare4descent.net/DescentiaPedia : two column main page, with main category in the right side nav column, two column footer with recent changes, recent comments, some stats, (must be logged in to see all) and admin links (if admin).
Comment by BastoR
2009-03-15 18:21:07
Its not uptodate (version 1.6.6)
Comment by EmeraldIsland
2009-03-29 17:08:50
I confirm most part of the design can be done with CSS only. But for this, you need to name first each part of the page's template.
I played with the wikka design and 2 actions : MySkin and WikkaMenus.

You can see it at http://emerald-island.eu
(change the design with icons '<' , 'V' or '>')
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki