Change website lay-out depending on page content

  Previous article Next article  

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
    {$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}

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

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

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

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

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


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...

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

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

Buy Me A Coffee

  Comment Form

Click here to open the form


No comments yet...

Buy Me A Coffee

CMS Made Simple - Tutorials, Tips and Tricks - CMSMS

Change website lay-out depending on page content

  Article optimized for CMSMS 2.x

  Last tested in: CMSMS 2.1.4
  Last updated: 10-06-2019
  Comments: 0

Buy Me A Coffee


Ads help me to help you! Thanks!

Ads help me to help you! Buy products from these advertisers!