Archive for the ‘templates’ Category

Should I use tables or divs

DivsI’ve been converting designs to Joomla templates for a lot of clients lately, and one question I’ve gotten from designers is whether to use tables or divs? We all know about the standards push for a pure CSS layout in our sites but currently there is no avoiding the dreaded tables in Joomla. Sure you can switch the output layout for modules but most components just don’t offer that option. So, what’s a designer to do?

Like most of the Joomla community we like to leave that up to the designer. After all, like some stop signs, that standard is just a recommendation, right? (PICnet does not advocate running stop signs) CSS layout is a great idea but there are some myths right now concerning accessibility and search engine optimization. It is still possible with tables to be 508 compliant and Google will not ignore the web site.

So for now, until the Joomla core is upgraded, don’t lose sleep over tables in your template. They’re going to show up in your output anyway.

 

Want to use the main menu module with images?

If you have ever wanted to use images as menu items without hacking the main menu module this is for you. You can do this all in the template. First turn on output buffering, then send the buffer to a callback function which will find the menu links and swap them out for your image links.

Here are the steps. Open the index.php file for the template you want to use and right before the HTML tag put in the php function ob_start(“callback”) – callback being the name of the function you will use – and at the very end of the file put in ob_end_flush(). Now just include the callback function somewhere before you start the buffer and you’re done.

Here’s what the function does: First it will load info on every menu item. Then for each menu item it will check the parameters to see if a menu image has been assigned – in the administrator, choose to edit the menu item and under parameters assign an image from the images/stories directory. Usually if an image is assigned to that parameter it will show up to either the left or right of the link. This changes that. If an image is assigned the function will create the text link to search for and the new image link then it executes the swap. After it runs through every menu item it just returns the buffer which prints out to the browser. Pretty basic and you’ll probably have to do some tweaking to get it just right for yourself but it’s a nice way to use images without hacking any core files. Oh, and if you’re just looking to use non web safe fonts then couple this method with a text-to-image conversion script and dynamically generate images from the menu item name. You could also use this with content headings or module headings or just about anything. Have fun.

Here’s the callback function, put it above ob_start(): Download

 

Understanding Joomla templates functions

There comes a time when your designer decides its time to dive into learning Joomla templates. One of the things that will likely confuse any designer right away is understanding what options are available for loading content into the template. Below is a handy reference list of all the functions available to designers.

  • mosLoadComponent
  • mosCountModules
  • mosLoadModules
  • mosShowHead
  • mosMainBody

Now these functions are good to know, but what’s even more confusing is figuring out how the modules you embed in your template will be displayed. For this, look no further than the Joomla help manual. The different parameters for displaying module can be found in the help manual and below.

Take this: mosLoadModules( $position_name [, $style] )

…and add the following in place of $style:

  • 0 = (default display) Modules are displayed in a column.
  • 1 = Modules are displayed horizontally. Each module is output in the cell of a wrapper table.
  • -1 = Modules are displayed as raw output and without titles.
  • -2 = Modules are displayed in X-Joomla format.
  • -3 = Modules are displayed in a format that allows, for example, stretchable rounded corners.