Page 1 of 1
FAQ: How to make a column disappear on certain pages
Posted: Mon Aug 22, 2005 8:03 pm
by toubkal
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.
Re: How to make a column disappear on certain pages
Posted: Mon Aug 22, 2005 11:32 pm
by DeanMarshall
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.htmlObviously this approach is a little less flexible and moves more of the burden to initial setup.
Dean Marshall
Edited to incorporate Toubkal's correction.
Re: How to make a column disappear on certain pages
Posted: Tue Aug 23, 2005 7:36 am
by toubkal
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
)
Re: How to make a column disappear on certain pages
Posted: Wed Aug 31, 2005 12:19 pm
by Alex53
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.
Re: How to make a column disappear on certain pages
Posted: Wed Aug 31, 2005 1:00 pm
by DeanMarshall
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
Re: How to make a column disappear on certain pages
Posted: Wed Aug 31, 2005 1:08 pm
by Alex53
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
Re: How to make a column disappear on certain pages
Posted: Wed Aug 31, 2005 1:16 pm
by toubkal
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.
Re: How to make a column disappear on certain pages
Posted: Wed Aug 31, 2005 1:25 pm
by Alex53
I hear you.
I tried adding using $colspans +1 in the main body with no luck
Re: How to make a column disappear on certain pages
Posted: Wed Aug 31, 2005 1:38 pm
by toubkal
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.
Re: How to make a column disappear on certain pages
Posted: Fri Sep 02, 2005 12:17 am
by vavroom
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.
Re: How to make a column disappear on certain pages
Posted: Thu Nov 24, 2005 12:30 am
by jstarley
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/joomlaCould you give me an example of how to make the switch, or a tutorial link perphaps?
Thanks a billion!
Jen
Re: FAQ: How to make a column disappear on certain pages
Posted: Thu Nov 24, 2005 9:45 pm
by vavroom
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.
Re: FAQ: How to make a column disappear on certain pages
Posted: Mon Nov 28, 2005 4:31 pm
by jstarley
Thanks! I think I get the idea now...
Re: FAQ: How to make a column disappear on certain pages
Posted: Tue Dec 06, 2005 9:54 am
by m4manas
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/
Re: FAQ: How to make a column disappear on certain pages
Posted: Mon Feb 27, 2006 7:52 pm
by chris666uk1
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