Change website lay-out depending on page content

  Previous article Next article  

Change website lay-out depending on page content

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.4
  Last updated: 03-08-2016
  Comments: 0

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;
}

A2 Webhosting CMS Made Simple

  Comments

  Click here to leave a comment






This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net)
  « Enter the CAPTCHA code (lower case)

Your IP address will be stored on submit. I reserve the right to change or delete your response without notice!
In case of abuse your IP address will be blocked!


Can I have your attention for a moment?

Did this tutorial help you solving a problem at your (clients) website and it saved you many hours of work? Great!!
Consider buying Rolf a cup of coffee in return! [ Click here ]


  0 Comments

No comments yet...

CMS Made Simple 2.2.2 - Tutorials, tips and tricks - CMSMS 2.2.2

Change website lay-out depending on page content

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.4
  Last updated: 03-08-2016
  Comments: 0

A2 Webhosting CMS Made Simple