Fixing CSS Joomla Problems With Disabled Right Modules

CMS - Content Management Systems

Sunday, 04 January 2009 02:20

I just needed to figure this out today. Joomla is one of my favorite CMS beside Drupal an it allows you to manually enable and disable modules for each page.

For example if you have a banner in the right block of your site, like I do on my site, you can easily enable or disable that block, so the banner will appear or it will be hidden for each page.

You can do this easily in the admin section of Joomla.

But the problems appears with the CSS, if you don't fix it. In template you need to fix php hooks, that are calling for CSS ids.

What this means is that If you don’t want the right blocks to show on your page like for example on this page http://www.seoandwebdesign.com/photoshop_creations.html you need to increase the width of the center part. You can do this with making another id for the center par in your CSS file.

Here is the example. My center part id is named #centerpadding and this is the CSS code:

#centerpadding {
   width:645px;
   /*background: url(../images/centerbackground.png) repeat;*/
   float:left;
   padding-left: 10px;
   }

So if you don’t increase the width from 645px to let’s say 790, like it is set in my template, you will see an ugly empty space in the right part of your site. So you need to use a php hook in template index.php file that looks like this.

<?php if($this->countModules('right')) : ?>
           <div id="centerpadding" >
               <?php else: ?>
</div>
           <div id="centerpaddingfull" >
               <?php endif; ?>

This means that if on a page the right modules are enabled, it will call the centerpadding CSS id, and if it is not, it will call a very similar CSS id called #centerpaddingfull and this is it’s code.

#centerpaddingfull {
   width:790px;
   /*background: url(../images/centerbackground.png) repeat;*/
   float:left;
   padding-left: 5px;
   }

As you can see the width is 790px so the center part extends to the right and fills the right empty gap.

If you would like to disable left modules, instead or right ones, you could use this code in index.php code:

<?php if($this->countModules('left')) : ?>
           <div id="centerpadding" >
               <?php else: ?>
</div>
           <div id="centerpaddingfull" >


               <?php endif; ?>

……..etc

Comments

Add New

RSS

Write comment

Name:

Email:

Website:

Title:

UBBCode:

Please input the anti-spam code that you can read in the image.