FAQ: How to make a column disappear on certain pages

Moderator: mcsmom

Post Reply
User avatar
toubkal
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Thu Aug 18, 2005 4:35 pm
Location: Cheshire, England
Contact:

FAQ: How to make a column disappear on certain pages

Post by toubkal » Mon Aug 22, 2005 8:03 pm

FAQ: Many people want to modify their template so that on certain pages the left or right column "disappears" to give a wider content area.

Here is a quick pointer as to how it is done:

You need to modify the template's index.php file so that the particular table cell or div that you want to disappear, gets enclosed in a conditional statement.

In plain talk - when a page is generated, get the code to ask if any modules required for that column. If not do not create this cell / div

example to make a right hand column disappear:

Search the index.php for the code which loads the right modules
We find the table cell which contains the code:

Code: Select all


    <td>
   
        <?php mosLoadModules ( "right" ); ?>
   
    </td>



We then place this inside a php conditional statement like:

Code: Select all

<?php if (mosCountModules( "right" )) { ?>
    <td>
   
        <?php mosLoadModules ( "right" ); ?>
   
    </td>
    <?php } ?>


So if there are modules published on the page to position right, then the cell gets generated. If no modules are published to the right position on any given page, the cell does not get created at all.

The other important factor is that the area that you would like to expand (usually the main content area) must be flexible to stretch out to use the available space e.g. width="100%"

How easy all this is to do will depend on your template's layout and how complex it is.
Last edited by kenmcd on Sun Sep 04, 2005 9:54 am, edited 1 time in total.
Look at the page source... Lots of useful info...

User avatar
DeanMarshall
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Fri Aug 19, 2005 2:26 am
Location: Lancaster, Lancashire, United Kingdom
Contact:

Re: How to make a column disappear on certain pages

Post by DeanMarshall » Mon Aug 22, 2005 11:32 pm

Toubkal,

Your voodoo is indeed mighty oh wise one, but (there is always a but isn't there) this requires manually setting ALL modules that use the chosen position to display on some pages and not others, and frankly for some users it can get a bit tricky.  Especially as, and here is the rub, modules tend to be on either ALL pages, or all pages except one or two. Imagine the latter case, but then a new component gets added to the site - every module then has to be reconfigured to also display on the new page type com_option=newly_installed_component.

I wondered whether you could whip up a version that just 'forces' the issue based upon the com_option query string attribute. If the template was rigged based upon this variable then it would not be necessary to specify which pages modules are shown on.

I had a quick go myself but I am a perl monkey not a PHP monkey - what follows is entirely untested and for explanatory purposes only.
Additionally I am not sure whether $option is automagically in scope or if it need to be imported somewhere.

Code: Select all

<?php if ($option != 'com_simpleboard'){ ?>
    <td>
   
        <?php mosLoadModules ( "right" ); ?>
   
    </td>
<?php } ?>


Can you correct or build upon this - or tell me the idea is a none starter.
This is based on your code from above and code from 'gram' in this thread
http://forum.opensourcematters.org/inde ... 588.0.html

Obviously this approach is a little less flexible and moves more of the burden to initial setup.

Dean Marshall

Edited to incorporate Toubkal's correction.
Last edited by DeanMarshall on Fri Sep 16, 2005 5:36 pm, edited 1 time in total.
Dean Marshall - http://www.deanmarshall.co.uk/
Mambo and Joomla Consultant

Add an Amazon Store to your site: http://www.Project-TinA.com/
(coming soon)

User avatar
toubkal
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Thu Aug 18, 2005 4:35 pm
Location: Cheshire, England
Contact:

Re: How to make a column disappear on certain pages

Post by toubkal » Tue Aug 23, 2005 7:36 am

I just tried your suggested method and it works fine on my test (except for the syntax. I swapped the ne for !=)

I agree that for many people this will be a much simpler solution (for backend module management) if they only need the wider area for 1 or 2 specific pages such as simpleboard.

For some people who wish to have the flexibility to pick and choose which pages get wider as they add new pages to the site, the first option allows for this.

Looks like a great addition to this FAQ (and I just got a little wiser :) )
Look at the page source... Lots of useful info...

Alex53
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Mon Aug 22, 2005 11:25 am

Re: How to make a column disappear on certain pages

Post by Alex53 » Wed Aug 31, 2005 12:19 pm

I have managed to make my left cell disappear by using the method above, as well as the right (which in the solarflare template already behaves like this, and mine is just solarflare with a few changes), but the main body simply moved left, and left a space on the right.

I have tried making the width=100% but I must be putting it in the wrong place. Anyway I have attached my index.php in case someone can enlighten me.  ???
Attachments
template.txt
(5.74 KiB) Downloaded 16 times

User avatar
DeanMarshall
Joomla! Apprentice
Joomla! Apprentice
Posts: 46
Joined: Fri Aug 19, 2005 2:26 am
Location: Lancaster, Lancashire, United Kingdom
Contact:

Re: How to make a column disappear on certain pages

Post by DeanMarshall » Wed Aug 31, 2005 1:00 pm

Because of the mix of divs and tables in the template it is difficult to say for sure - my guess is that the table's width is being controlled from elsewhere:
class="content_table"
Perhaps this class has a width specified in the css.

Dean Marshall
Dean Marshall - http://www.deanmarshall.co.uk/
Mambo and Joomla Consultant

Add an Amazon Store to your site: http://www.Project-TinA.com/
(coming soon)

Alex53
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Mon Aug 22, 2005 11:25 am

Re: How to make a column disappear on certain pages

Post by Alex53 » Wed Aug 31, 2005 1:08 pm

I thought u'd be right, went to edit it and found its already 100%

table.content_table {
  width: 100%;
padding: 0px;
margin: 0px;
}

I attach the whole CSS if it helps
Attachments
template_css.txt
(9.14 KiB) Downloaded 4 times

User avatar
toubkal
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Thu Aug 18, 2005 4:35 pm
Location: Cheshire, England
Contact:

Re: How to make a column disappear on certain pages

Post by toubkal » Wed Aug 31, 2005 1:16 pm

My gues would be colspans

I have not time to look at this in detail but if you look in the index file, there is a fair bit of coding to calculate the appropriate colspans dependant on which module positions are used. The cell which holds the main body takes its colspan from these.

If you have modified the template, you may need to code in the relevant colspan.

Everyone likes to modify solarflare, but it is a very complex template to begin on.
Look at the page source... Lots of useful info...

Alex53
Joomla! Fledgling
Joomla! Fledgling
Posts: 3
Joined: Mon Aug 22, 2005 11:25 am

Re: How to make a column disappear on certain pages

Post by Alex53 » Wed Aug 31, 2005 1:25 pm

I hear you.

I tried adding using $colspans +1 in the main body with no luck  :-\

User avatar
toubkal
Joomla! Apprentice
Joomla! Apprentice
Posts: 25
Joined: Thu Aug 18, 2005 4:35 pm
Location: Cheshire, England
Contact:

Re: How to make a column disappear on certain pages

Post by toubkal » Wed Aug 31, 2005 1:38 pm

It may be that you have a table nested within another and the max width is confined by the layout of the parent cell / table. Sorry cannot say any further just now - it can be quite a puzzle ammending templates like this.
Look at the page source... Lots of useful info...

vavroom

Re: How to make a column disappear on certain pages

Post by vavroom » Fri Sep 02, 2005 12:17 am

FWIW, you can do similar using divs instead of tables.  Get rid of tables where you can :)  Nested tables are hell to maintain, but they are also hell on accessibility and standard compliance, not to mention bandwidth, etc.

jstarley

Re: How to make a column disappear on certain pages

Post by jstarley » Thu Nov 24, 2005 12:30 am

vavroom wrote:FWIW, you can do similar using divs instead of tables.  Get rid of tables where you can :)  Nested tables are hell to maintain, but they are also hell on accessibility and standard compliance, not to mention bandwidth, etc.


I've always wondered exactly how to make the switch from tables to divs.

If you take a look at the source code of my site I'm starting right now, I'm using extensive tables just for the outside framwork.  Is this something I could use divs for, maybe with a css and image combo?  I've never used images in css layout design, but I've seen intsances of it on that css zen garden site.

http://apps.swiftnews.com/joomla

Could you give me an example of how to make the switch, or a tutorial link perphaps?

Thanks a billion!
Jen :)

vavroom

Re: FAQ: How to make a column disappear on certain pages

Post by vavroom » Thu Nov 24, 2005 9:45 pm

jstarley wrote:I've always wondered exactly how to make the switch from tables to divs.

Could you give me an example of how to make the switch, or a tutorial link perphaps?


Can't think of a particular tutorial site, sorry.  I think you could achieve that result, or pretty close to is using css.  Whether you use nested divs with borders/padding, or divs with background images, it's achievable.  Nested divs instead of nested tables are not necessarily better though, and you want to be careful not to fall into the habit of "divitis", where your code ends up just as much tag soup as with tables.  But...  Say for example you'd want just the top section (you can extrapolate and adjust for the rest, I'm sure :) )

Code: Select all

<div id="outer_top">
     <div id="inner_top"><h1>Header</h1></div>
</div>


Note that you shouldn't use just an image for header, you must put some alternate text.  I tend to use headers instead of images, so as to make the page semantic structure a little more solid.

For the styling, you could use something like this: (note, this is off the top of my head, untested, but it gives you a direction to start playing)

Code: Select all

#outer_top {
/*the following two margins center that div on the page*/
margin-right:auto;
margin-left:auto;
width:800px;
border-right:2px solid #000;
border-left:2px solid #000;
border-top:1px solid #000;
border-bottom:1px solid #000;
}

#inner_top {
margin-right:auto;
margin-left:auto;
border-right:1px solid #000;
border-left:1px solid #000;
width:780px;
}


As I said, this is just to give you a direction to start trying things out.  It will not work "as is", but should give you amunition.

Have fun.  And if you need more help with it, might be best to start a new thread, as it's going away from the original disappearing column.

jstarley

Re: FAQ: How to make a column disappear on certain pages

Post by jstarley » Mon Nov 28, 2005 4:31 pm

Thanks!  I think I get the idea now... :)

m4manas

Re: FAQ: How to make a column disappear on certain pages

Post by m4manas » Tue Dec 06, 2005 9:54 am

Here is a good tutorial for the beginners. It uses dreamweaver and its great you acn desgin your own tempaltes using this.
http://www.mambosolutions.com/dw_tutorial/

chris666uk1
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Mon Feb 27, 2006 7:49 pm

Re: FAQ: How to make a column disappear on certain pages

Post by chris666uk1 » Mon Feb 27, 2006 7:52 pm

can u help me i need to make the right block when the phpbb forum link is serlected here is my index.php for the template

Code: Select all

<?php
/**
* Netcom-Factory - A Template by Netcom-Factory digital Solutions
* @version 1.0
* @copyright (C) 2005-2006 by Netcom-Factory digital Solutions - All rights reserved!
* @web http://www.netcom-factory.de/
**/
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta name="keywords" content="netcom, netcom factory, netcomfactory, netcom-factory, nf ianus, ianus, nf-ianus, nf-ianus-serie, ianus serie, joomla, mambo, template, templates">
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
   initEditor();
}
$collspan_offset = ( mosCountModules( 'right' ) + mosCountModules( 'user2' ) ) ? 2 : 1;
$user1 = 0;
$user2 = 0;
$colspan = 0;
$right = 0;

if ( mosCountModules( 'user1' ) + mosCountModules( 'user2' ) == 2) {
   $user1 = 2;
   $user2 = 2;
   $colspan = 3;
} elseif ( mosCountModules( 'user1' ) == 1 ) {
   $user1 = 1;
   $colspan = 1;
} elseif ( mosCountModules( 'user2' ) == 1 ) {
   $user2 = 1;
   $colspan = 1;
}

if ( mosCountModules( 'right' ) and ( empty( $_REQUEST['task'] ) || $_REQUEST['task'] != 'edit' ) ) {
   $right = 1;
}
?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $cur_template;?>/css/template_css.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" /></head>
<body scroll="yes"><a name="top"></a>
<div align="center"><div id="layout_container">

<div id="header_container">
   <div id="topmenu_container"><?php mosLoadModules ( 'user3', -1 ); ?></div>
   <div id="sitename_container"><?php echo $mosConfig_sitename;?></div>
</div>

<div id="content_container">
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr valign="top">

   <?php if (mosCountModules('left')>0) { ?>
   <td style="padding-left: 10px;"><div class="modul_header"></div><div class="modul_container"><div class="modul_content"><?php mosLoadModules ( 'left' ); ?></div></div><div class="modul_footer"></div></td>
   <?php } ?>
   
   <?php if (( mosCountModules( 'left' )==0) && ( mosCountModules( 'right' )==0)) { ?><td width="100%" style="padding-left: 10px;padding-right: 10px;"><?php } else if ( mosCountModules( 'right' )==0) { ?><td width="100%" style="padding-right: 10px;"><?php } else if ( mosCountModules( 'left' )==0) { ?><td width="100%" style="padding-left: 10px;"><?php } else { ?><td width="100%"><?php } ?>
   <br>
   <div id="main_header">
      <div id="main_header-left"></div>
      <!--  --><div id="main_header-welcome"><?php if ( $my->username ) { echo ("<span class='willkommen'>welcome - $my->username</span>");} else { ?><span class='willkommen'></span><?php } ?></div>
      <div id="main_header-right"></div>
   </div>
   <div id="main_container">
   <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td id="main_left"></td><td>
   <table border="0" cellpadding="0" cellspacing="0" width="100%">
   <?php if ( mosCountModules ('banner')>0) { ?><tr valign="top"><td colspan="<?php echo $colspan; ?>"><div id="modul_banner"><?php mosLoadModules ( 'banner', -1 ); ?></div></td></tr><?php } ?>
   
   <?php if ($colspan > 0) { ?>
   <tr valign="top">
   <?php if ( $user1 > 0 ) { ?><td width="50%" align="left"><div><?php mosLoadModules ( 'user1', -2 ); ?></div></td>
   <?php }   if ( $colspan == 3) { ?><td><div id="abstand"></div></td>
   <?php } if ( $user2 > 0 ) { ?><td width="50%" align="left"><div><?php mosLoadModules ( 'user2', -2 ); ?></div></td>
   <?php }   ?>
   </tr>
   <?php } ?>
   <tr><td colspan="<?php echo $colspan; ?>" width="100%"><div id="mainbody"><?php mosMainBody(); ?></div></td></tr>
   </table></td><td id="main_right"></td></tr></table>
   </div>
   <br class="clear">
   <div id="main_footer"><div id="main_footer-middle"><div id="main_footer-left"></div><div id="main_footer-right"></div></div></div>
   </td>
   
   <?php if ( mosCountModules ('right')>0) { ?>
   <td style="padding-right: 10px;"><div class="modul_header"></div><div class="modul_container"><div class="modul_content"><?php mosLoadModules ( 'right' ); ?></div></div><div class="modul_footer"></div></td>
   <?php } ?>
   

</tr>
</table>
</div><br class="clear">
<!-- Do not remove the designby-link without our permission! ([email protected]) -->
<div id="footer_container"><a href="http://www.netcom-factory.de" target="_blank" id="dblink"></a></div>
<!-- Ohne unsere Genehmigung ist das entfernen des designby-link verboten!([email protected]) -->
</div></div>
</body>
</html>



many thanks for any help


Post Reply