Revision history for TwoColumnLayout


Revision [23490]

Last edited on 2016-05-20 07:38:48 by BrianKoontz [Replaces old-style internal links with new pipe-split links.]
Additions:
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:
Deletions:
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:


Revision [21553]

Edited on 2011-06-30 21:07:30 by BrianKoontz [Updated for 1.3.1]
Additions:
//Note:// This has only been tested with the default theme! Other themes will likely need minor CSS tweaks.<<::c::
Deletions:
//Note:// This has only been tested with the default theme!<<::c::


Revision [21552]

Edited on 2011-06-30 20:54:04 by BrianKoontz [Updated for 1.3.1]
Additions:
<<As of Wikka 1.3.1
//Note:// This has only been tested with the default theme!<<::c::
Deletions:
<<As of Wikka 1.3.1<<::c::


Revision [21551]

Edited on 2011-06-30 20:52:55 by BrianKoontz [Updated for 1.3.1]
Deletions:
clear: both;


Revision [21550]

Edited on 2011-06-30 20:52:15 by BrianKoontz [Updated for 1.3.1]
Additions:
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
Deletions:
define('SHOW_OLD_REVISION_SOURCE', 0); # if set to 1 shows by default the source of an old revision instead of the rendered version


Revision [21549]

Edited on 2011-06-30 20:51:26 by BrianKoontz [Updated for 1.3.1]
Additions:
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:
* @subpackage Page
* @since Wikka 1.1.6.6
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 ## #header ## selector, add the following at the end:
Add the following to the start of the ## #footer ## selector:
clear: both;
#page {
clear: both;
Deletions:
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 [[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:
* @subpackage Page
* @version $Id: show.php 1170 2008-07-02 05:30:03Z BrianKoontz $
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 ##.header## selector, add the following at the end:
.page {


Revision [21548]

Edited on 2011-06-30 20:44:23 by BrianKoontz [update notice]
Additions:
<<As of Wikka 1.3.1<<::c::


Revision [20338]

Edited on 2008-11-30 12:22:48 by BrianKoontz [Minor updates]
Additions:
$createlink = '<a href="'.$this->Href('edit', SIDEBAR_CONTENT, '').'">'.WIKKA_PAGE_CREATE_LINK_DESC.'</a>';
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";
Replace contents of ##.page## selector with the following:
Deletions:
$createlink = '<a href="'.$this->Href('edit').'">'.WIKKA_PAGE_CREATE_LINK_DESC.'</a>';
echo '<h4 class="clear">'.sprintf(WIKKA_REVISION_NUMBER, '<a href="'.$this->Href('', '', 'time='.urlencode($sidebar_page['time'])).'">['.$sidebar_page['id'].']</a>').'</h4>'."\n";
Change the name of the ##.page## selector to ##.page-container##. Create a new ##.page## selector:


Revision [20337]

Edited on 2008-11-30 10:39:21 by BrianKoontz [Minor edits]
Additions:
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 [[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 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""##).
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">';
Deletions:
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 [[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:
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 changed the SIDEBAR_CONTENT define to point to the Wikka page of your choice (currently, it's set to ##""SidebarContent""##).
echo '<div class="sidebar-container"><div class="sidebar">';


Revision [20336]

Edited on 2008-11-30 10:36:50 by BrianKoontz [Minor typo]
Additions:
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 [[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:
Deletions:
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 [[http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ this link]] that gave me all the info I need to get this done. My main goals were:


Revision [20335]

Edited on 2008-11-30 10:35:03 by BrianKoontz [Minor typo]
Additions:
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 [[http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ this link]] that gave me all the info I need to get this done. My main goals were:
Deletions:
These are notes from a hack I did on the latest trunk revision (1252) 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 need to get this done. My main goals were:


Revision [20330]

Edited on 2008-11-30 03:27:24 by BrianKoontz [Minor typo]
Additions:
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 changed the SIDEBAR_CONTENT define to point to the Wikka page of your choice (currently, it's set to ##""SidebarContent""##).
Deletions:
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 changed the SIDEBAR_CONTENT define to point to the Wikka page of your choice (currently, it's set to ##SidebarContent##).


Revision [20328]

Edited on 2008-11-30 03:25:28 by BrianKoontz [Initial version]
Deletions:
££


Revision [20327]

Edited on 2008-11-30 03:24:32 by BrianKoontz [First draft]
Additions:
These are notes from a hack I did on the latest trunk revision (1252) 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 need to get this done. My main goals were:
~- 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====
{{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 changed 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
* @version $Id: show.php 1170 2008-07-02 05:30:03Z BrianKoontz $
* @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');
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"><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').'">'.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('', '', '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 ?>" /> 
<?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 ##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:
%%(css)
padding: 0;
%%
In the ##.header## selector, add the following at the end:
%%(css)
border-bottom: 1px solid #CCC;
%%
Change the name of the ##.page## selector to ##.page-container##. Create a new ##.page## selector:
%%(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 {
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!
Deletions:
These are notes from a hack I did on the latest trunk revision (1252) 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 need to get this done.


Revision [20326]

The oldest known version of this page was created on 2008-11-30 03:05:12 by BrianKoontz [First draft]
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki