Change website lay-out depending on page content

With this sample template you have three content blocks, the frontend of the website will change depending on the presence of content in these blocks. There is no need for multiple templates.

How to use

I added some basic functionality, you need to change/add your own functions later.

HTML Template

{strip}
{$content_left = "{content block='content_left' label='Column Left'}" scope=global}
{$content_main = "{content label='Main content (Required)'}" scope=global}
{$content_right = "{content block='content_right' label='Column Right'}" scope=global}
<html>

{/strip}<head>{strip}
{cms_stylesheet}
{if !empty($content_left)}
<style type="text/css"> div#main { padding-left: 410px } </style>
{/if}
{if !empty($content_right)}
<style type="text/css"> div#main { padding-right: 410px } </style>
{/if}
{/strip}</head>{strip}

<body>
<div id="header"></div>

<div id="menu"></div>

<div id="content">
{if !empty($content_left)}
<div id="sidebar-left">{$content_left}</div>
{/if}
{if !empty($content_right)}
<div id="sidebar-right">{$content_right}</div>
{/if}
<div id="main">{$content_main}</div>
<div style="clear:both;"></div>
</div>

<div id="footer"></div>
</body>

</html>
{/strip}

Note the way I setup my template, clean and organized. The use of a Syntaxhighlighter in the backend is a must for all developers. For professionals, but also for hobbyists like me. You don't have to add explanation, it explains itself...

Stylesheet

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

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

Show related articles:

Comment Form

ReviewManager

Click here to open the form

ReviewManager

0 Comments

No comments yet...

Change website lay-out depending on page content

Article optimized for CMSMS 2.x

  Author: Rolf
  Last tested in: CMSMS 2.1.4
  Last updated: 10-06-2019
  Comments: 0
  http://cms.ms/YdV8