MENU

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


  Comment Form

Click here to open the form


  0 Comments

No comments yet...

CMS Made Simple - Tutorials, tips and tricks - CMSMS

Change website lay-out depending on page content

  Article optimized for CMSMS 2.x

  Author:
  Last tested in: CMSMS 2.1.4
  Last updated: 18-11-2017
  Comments: 0
  http://cms.ms/YdV8

Advertisement



Ads help me to help you! Thanks!

Ads help me to help you! Thanks!

Ads help me to help you! Thanks!