3 colom layout on homepag and 2 colom sometime 3 on the rest

[andre_designer]

hi

i've a question / problem. i'am building a site for somebody and he want a layout where the homepage is a 3 colom and the rest of the site a 2 colom with a hidden 3th colom. The "hidden" 3th colom may only appear when there is content in it. do somebody how i can reach this. i'm using a float based layout. I have using a

Code: Select all

{if $page_alias eq "home"}<div>html code ....</div>{/if}

construction. so far so good.!!

Only now is the problem when i display the home page the "3th" right colom dropping down because i have to middle colom no width given because i want a flexible colom. on the other hand when there is content in the "3th hidden" i want that the middle shrinks an 3th hidden colom displays.

I say maybe a little crooked but this is want my client wants. does anyone how i addressing this problem??

the link to website is http://test.gravesteyn.com

i'm hoping that i've am clear and that someone has a answere.

Already thanks.

[spcherub]

You may be better off using Smarty to check for the presence of content before even inserting the div for the hidden column. So for instance if you content for the hidden column is in the Smarty variable $my_content, then something like this should work:

Code: Select all

{if $my_content != ''}
<div class="middle_column">
...
</div>
{/if}

Hope that helps.
-S

[Assange]

So for instance if you content for the hidden column is in the Smarty variable $my_content, then something like this should work:

Code: Select all

{if $my_content != ''}
<div class="middle_column">
...
</div>
{/if}

Complete call could be

Code: Select all

{content block='my_content' assign='my_content'}
{if $page_alias == 'home' && $my_content != ''}
<div class="middle_column">
...
</div>
{/if}

Third column will be editable ...

[andre_designer]

So for instance if you content for the hidden column is in the Smarty variable $my_content, then something like this should work:

Code: Select all

{if $my_content != ''}
<div class="middle_column">
...
</div>
{/if}

Complete call could be

Code: Select all

{content block='my_content' assign='my_content'}
{if $page_alias == 'home' && $my_content != ''}
<div class="middle_column">
...
</div>
{/if}

Third column will be editable ...

if i understand it well . This is not what i exactly want. i want not that the middle colom disappears. i want roughly something like this.

Code: Select all

<div id="wrapper">
      <div id="leftcolom">leftcontent.....</div>
      <div id="contentcolom">content</div>
      {if $page_alias eq "home"}
      <div id="rightcolom">rightcontent.....</div>
       {elseif  $page_alias neq "home"}
       <div id="hidden_rightcolom">{global_content name='advertise'}</div>
       {/if}
 </div>

The only problem is when do this and i give the contentcolom no width the rightcolom on the homepage drops down the intention is that when i show the homepage the rightcolom most appear on the right and if not the homepage show than the hidden_rightcolom. BUT the hidden_right colom may only appear where there is content in it .Otherwise it most be a 2 colom. But i don't now exactly how to addressing this issue. I now that it is a css /smarty problem but i don't now exactly how to do this.

I 'am hoping that i 'am clear.

who can help me!!??

[spcherub]

Try something like this (assuming I've understood your requirements properly):

Code: Select all

{capture assign=my_content}{global_content name='advertise'}{/capture}
<div id="wrapper">
	<div id="leftcolom">leftcontent.....</div>
	<div id="contentcolom">content</div>
	
	{if $page_alias eq "home"}
		<div id="rightcolom">rightcontent.....</div>
	{elseif $my_content != ''}
		<div id="hidden_rightcolom">{$my_content}</div>
	{/if}
</div>

-S

[andre_designer]

what i in short want is, if not the homepage is show show than the other right colom. ONLY the "other" right colom may only stretch when there is content it. I think it is more a css problem than a smarty problem. i've difficulties to display this properly.

i'am hoping that i've clear

[andre_designer]

no body???

[Dr.CSS]

Either make 2 templates or use smarty to get the page alias and use that in your CSS...

</__body class='{$page_alias}'>

.home #rightcolom {your styles}

[andre_designer]

Either make 2 templates or use smarty to get the page alias and use that in your CSS...

</__body class='{$page_alias}'>

.home #rightcolom {your styles}

how can i use 2 templates for 1 design and how torque 2 different templates on different pages and on 1 stylesheet.??

[andre_designer]

Either make 2 templates or use smarty to get the page alias and use that in your CSS...

</__body class='{$page_alias}'>

.home #rightcolom {your styles}

this is a part of the solution but except the home the dynamicContentBlok div most dynamicly stretch and shrink .When in the right_extra_advertise div standing nothing it most shrink or disappear but how can i check or a gobal_content is empty?? According to me, I can also, I can also not a global_content leaving emty

this what i have

Code: Select all

</__body>

<div id="container">
  <div id="logo"></div>
    <div id="menu">{menu}</div>
    <div id="header">{cms_module module="slideshowheader"}</div><!-- end of #header -->
    <div id="contentWrapper">
      <div id="extraInfo">{cms_module module="sponsoren_slideshow"}
          <div id="activiteitenWrapper"><h1>Activiteiten</h1>
            <div id="activiteitenBlok">
            {global_content name='activiteiten'}
            </div><!-- end of #activiteitenBlok -->
            
          </div>
      </div><!-- end of #extraInfo -->
        <div { if $page_alias eq "home"}id="content"{elseif $page_alias neq "home"}id="dynamicContentBlok"{/if}>

        {content}
        </div><!-- end of #content -->
        {if $page_alias eq "home"}
        <div id="reclame">
          <div id="extra_infoWrapper">
            {global_content name='extra_informatie'}
          </div><!-- end of #extra_infoWrapper -->
          <div id="socialMedia">
                {global_content name='socialmedia'}
            </div><!-- end of #socialMedia -->
          <div id="verhuurBlok">
              {global_content name='Verhuur'}
          </div> <!-- end of #verhuurblok -->
        </div> <!-- end of #reclame -->
        {elseif $page_alias neq "home"}
            <div id="right_extra_Avertise">{global_content name='advertise'}</div>
        {/if}
    </div><!-- end of #contentWrapper -->
  <div id="footer">{global_content name='footer'}</div>
</div>
<__body>
</__html>

my question is :

• how can stretch/shrink the middle and right colom dynamicly

• how can i check if content block is empty??

• is this ubberhoud possible?? If yes how??

[RonnyK]

I would go for classes as well, which would be based on the fact if the extra block was filled...

So first, assign the value of the block to a variable, by using {content block='SomeBlock' assign='thecontentinavariable'}

Then by checking if the variable is filled, you could do logic in the blocks that you show (or remove) and then use the css to style alike...

I used this on... http://ronnyk.dyndns.org:8080/DONE/swingtheme/ where I only use 3col on mainpage, and 2col for the upper area on the other pages.

Ronny

[RonnyK]

Part of the used logic....

Code: Select all

{content assign="capturedcontent"}

   {if $cgsimple->get_root_alias()=="home"}
           <div id="main">
                <h2>{title}</h2>
                {$capturedcontent}
                <br />{* to insure space below content *}
                <hr class="accessibility" />
                <div class="clear"></div>

        </div>
           <div id="rightblock">
              {global_content name='Theme: agenda'}
           </div>
     {else}
           <div id="main" class="nonhome">
                <h2>{title}</h2>
                {$capturedcontent}
                <br />
                <hr class="accessibility" />
                <div class="clear"></div>
        </div>
     {/if}

and styling:

Code: Select all

div#main {
	padding: 0;
	float: left;
	margin-left: 50px;
	width: 320px;
}
div#main.nonhome {
	padding: 0;
	float: left;
	margin-left: 50px;
	width: 630px;
}
div#rightblock {
	padding: 0;
	float: left;
	width: 260px;
	margin-left: 50px;
}

To give you an idea how to work with this... So first assign to a variable, then based on some logic, construct the if/else and style the width using the classed of the constructed logic.

Ronny