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.
There are 8 comments on this page. [Show comments]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki