The center column of my site, using Joomla Bamboo’s Meridian template was not behaving.

The template uses javascript to calculate the height of the columns and some tabs and sliders were causing problems.

Anthony wrote:

“The code at the bottom of the js/template.js file. The crucial bit is: jQuery(‘ul.jbtabs li,.moduletable-panelmenu span.mainlevel,h3.pane-toggler’).click(function(){ setTimeout(calculateEQ,200); }); The 200 is the delay in ms for the script to calculate the height of the item. In your case because the accordion content was large we set it to 500. The selectors that trigger the function are here: ul.jbtabs li,.moduletable-panelmenu span.mainlevel,h3.pane-toggler So you just need to add your selector there to get it to work.”

Today I had to add another selector:  h3.pane-toggler-down  so that a weblinks list spilled open would be considered in the calculations.  I didn’t need to submit a new ticket or ask for help, I just needed to access the ticket explaining how the problem was solved the first time.

The pesky part was that I had to renew my account to be able to access the old tickets with this solution.  So from now on I’ll remember to document solutions here as well and not rely on the ticket system from a limited-time support contract.

On a site using the Joomla Bamboo template Pure, I was having trouble with footer not clearing the sidebar.  I discovered that a custom html module with just a non-breaking space in the bottom position would fix the problem.  I didn’t mind the dark banner that stretched across the screen and I was willing to live with this work around  (having tried all kinds of clears, etc. on the footer module.)

Then I discovered that that “fix”  didn’t fix it in PC browsers:  Firefox and IE8.   Consulting the joomla bamboo forum I found a similar issue with a suggestion to be sure images had explicit heights.   I added heights to my flickr and facebook modules and the problem was solved.   The PC browsers were apparently not reading the heights declared for the iframes used by these modules.    And the template seemed to need to calculate a total height for the sidebar.

Two years ago I blogged about a solution to have different “read-more” links for different sections of a website.

With Joomla! 1.6 it would be possible to have two variations of the php file that generates the blog,  one that would include the words “read-more” and one that wouldn’t.   Since this affects the display in the blog “page”, not the individual articles, this layout alternative would actually need to be an alternative menu item type.

Here’s how you would do it:

1.  Locate the php files that create the blog layout and blog layout menu item type:

     components/com_content/views/category/tmpl/blog.php
     components/com_content/views/category/tmpl/blog_items.php
     components/com_content/views/category/tmpl/blog.xml

2.  Make a copy of those three files and place them in your template’s html folder and rename them!  I’ve used blogworm.php…etc.  for blog without read more

     templates/your-template/html/com_content/category/blogworm.php
     templates/your-template/html/com_content/category/blogworm_items.php
     templates/your-template/html/com_content/category/blogworm.xml

3.  The change we’re talking about only requires a change in the blogworm_items.php file.

     at  line 155  (or nearby)  find:
     echo JText::_(‘COM_CONTENT_READ_MORE’);      and delete that.

4.  Open blogworm.xml and make changes to line 3:  you add a reference to your template at the beginning and change BLOG to BLOGWORM at the end of each of these strings:

      So what’s all that shouting about?   Those are strings that will be added to a language file, where you will provide a translation.

5.  Use TextEdit or NotePad to open your templates lanugage file — the .sys.ini one — or grab a copy from beez_20 as a starting point.  This file provides extra info about your template positions that shows up in the template manager.  It also provides info to display in the menu item manager.

     templates/beez_20/language/en-GB/en-GB.tpl_beez_20.sys.ini

     ADD to this file: 

TPL_BEEZ_20_COM_CONTENT_CATEGORY_VIEW_BLOGWORM_TITLE=”Beez 20  Blog without the words Read More”

TPL_BEEZ_20_COM_CONTENT_CATEGORY_VIEW_BLOGWORM_OPTION=”Beez 20 Blog without the words Read More”

TPL_BEEZ_20_COM_CONTENT_CATEGORY_VIEW_BLOGWORM_DESC=”Provides read more links without the words Read More – for use in photo gallery”

6.  Create a menu item to display this category as a blog with out the words “read more” in the read more links — choose your new menu item type from the menu item types list.

Using conditional statements you can control whether your template creates a div and module position for a left or right sidebar depending on whether a module exists for any given page.   But this does not cause the content to stretch to fill that available space when no sidebar modules are present.

It IS possible to use conditional statements in the opening php block of your template to set values of variables which are then used in the template to create divs with different classes depending on the modules present.

For this example I’m using a liquid design with a left column width of 20%, and a right column width of 30%.   Left and center columns are floated left, right column is floated right. Two background images are used to create the faux columns. The content area will be either 50%, 70%, 80% or 100% depending on the presence of modules for the left or right columns.

I add these 4 lines to the opening php block:
if($this->countModules(‘left + right’) > 0) $layout=”50″;
if($this->countModules(‘right’) <= 0) $layout=”80″;
if($this->countModules(‘left’) <= 0) $layout=”70″;
if($this->countModules(‘left + right’) <= 0) $layout=”100″;

and in my html I reference that variable wherever needed like this: