FreshBooks
Text Size

8 Random tips for Joomla template development

Thursday, 17 December 2009 15:41

1.Hiding empty module positions

The ability to hide or display module positions depending on which page you are on is a very useful template design technique.

Here is an example of how it is done.

<?php if ($this->countModules( 'left' )) : ?>
 <div  id="left">
 <jdoc:include type="modules" name="left"  style="xhtml" />
 </div><!--left-->
<?php endif;  ?>

To summarise...
<div id="left">etc...</div> will be hidden unless there is a module published in position "left".
There are other variations such as...
- Display only if there is a "left" OR (||) "right" module published
- Display only if there is a "left" AND (&&) "right" module published

2. Adding module positions

  • Add the following code to the html template in the template manager.
<jdoc:include type="modules" name="myModulePosition" style="xhtml" />
  • Edit your templatesDetails.xml file.
Add the following line of code where you see the <POSITIONS></POSITIONS> tags...
e.g. <POSITION>myModulePosition</POSITION>
  • Save the file and upload it back to your server.
  • Go back to your Joomla admin then go to the module manager and create a new custom html module (or whatever you like).
  • In the module parameters you will be asked to select a module position. Select "myModulePosition".
  • Check the module is enabled.
  • Click Save. Done.
Now it should show up in the front end.

3. Adding JQuery/Mootools plug-ins to the standard Joomla menu?

OK. So you've seen a nice animated menu. You have then searched through the Joomla extensions directory but you unable find what you are looking for. You then decide to have pop at installing the script manually.
NOTE: This section provides general info about how to install such plug-ins. you will still need to read the instructions of use provided with the plug-ins themselves.
  • First create your menu in Joomla.
  • Then go to the index.php file in the template manager.
  • Find the following code <jdoc:include type="modules" name="TheNameOfYourMenu" style="xhtml" />
  • Change style="xhtml" to style="none".

Changing this removes all of the default styles for the Joomla menu. You change it back later if you want but in this instance it is easier to style the menu yourself.

If the menu is made in JQuery....

  • Download the JQuery menu plug-in. Upload it to your web server (yourtemplate/js/ or yourtemplate/ or wherever you want to put it).

Edit the index.php file in the template manager and add the following line of code between the <head></head> tags. 
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
 <script type="text/javascript"  src="/templates/js/name_of_plugin.js"></script>

*configure accordingly
You will now probably have to follow the instructions specific to the plug-in in order to initialize the menu. For example, if you wanted to initialize a "Drop Line Menu" the code would look something like this. 

<script type="text/javascript">
 //build menu with DIV  ID="myslidemenu" on page:
 droplinemenu.buildmenu("mydroplinemenu")
 </script>

4. Fix for module title is not displaying

Of course make sure the module title is enabled. Then go to the index.php file in the template manager. Check the following line of code...
<jdoc:include type="modules" name="module_where_title_not_showing" style="xhtml" />
Make sure it has the style="xhtml" attribute. Without it the module title does not display (for some reason).

5. Displaying a confirmation message after contact form submission

In the index.php file of the template manager find the following line of code...
<jdoc:include type="component" />
Make sure that directly above this is the following line of code...
<jdoc:include type="message" />

Now you should receive a confirmation and you can style it using .message li{}.

6. Changing the layout/style on individual pages

The quickest way to do this is to copy the css from your template then click on one of the other templates such as beez etc.
Next paste and overwrite the beez css with your css. Change a css value such as the text color and click save. Then go to the menu assignment option and choose a menu item (page) to assign this stylesheet to. Go back to the front of your site and test the page you have just assigned the stylesheet to.
You can perform exactly the same process to the index.php file but it can start getting hard to maintain if you have too many variations of your index.php of css file.

7. Displaying module positions

If you want to know the names and positions of the modules on a Joomla site simply add /?tp=1 after the site URL. i.e. http://thenetprophet.com/?tp=1.

8. Adding the page title anywhere on the page

To do this simply add the following code to the index.php file where to want the title to appear.

 <strong><?php echo $this->title; ?></strong>

e.g

<div id="your_module_position">
<?php echo  $this->title; ?>
</div>