Change website lay-out depending on the content of a page

[Rolf]

One template, depending on the presence of content in a content block a one, two or three column layout.

Stylesheet

Code: Select all

div#content {
        min-height: 300px;
        border: #ccc 2px solid;
        background: #fff;
}

div#sidebar-left {
        float: left;
        width: 375px;
        padding: 10px 15px;
}

div#sidebar-right {
        float: right;
        width: 375px;
        padding: 10px 15px;
}

HTML Template

Code: Select all

{* Start Content *}
<div id="content">

{content block="content_left" wysiwyg="true" label="Left column" assign="content_left"}
{content label="Main content (Required)" assign="content_main"}
{content block="content_right" wysiwyg="true" label="Right column" assign="content_right"}

{* Start sidebar left *}
{if $content_left}

{literal}
    <style type="text/css">
div#main {
padding-left: 410px;
}
    </style>
{/literal}

<div id="sidebar-left">
{$content_left}
</div>
{/if}
{* End sidebar left *}

{* Start sidebar right *}
{if $content_right}

{literal}
    <style type="text/css">
div#main {
padding-right: 410px;
}
    </style>
{/literal}

<div id="sidebar-right">
{$content_right}
</div>
{/if}
{* End sidebar right *}


{* Start Content *}
<div id="main">
{$content_main}
</div>
{* End Content Area *}

<div class="clear"></div>
</div>
{* End Content *}

Not fully W3c valid, but very flexible

Grtz. Rolf