Modify the HTML structure of a Joomla custom Module

Question

I need to modify the HTML structure of a joomla module. I would like to create my custom module where I need to display the title below its content. This is the present HTML which is default format (rounded):

<div class="module_clipon">
 <div>
   <div>
     <div>
        <h3>Right Module</h3>
        <p>This is the content</p>      
     </div>
   </div>
 </div>
</div>

I need the above HTML to be like :

<div class="module_clipon">
    <p>This is the content</p>
    <h3>This is the title</h3>
</div>

Basically to bring the title below the module content. What would be the way to manipulate the HTML of a module in Joomla. I believe it is possible by using the modChrome. If anybody has a simple to implement solution, please help.

Answer 1

You will indeed want to handle this through custom module chrome. Within the folder of your template, create an html folder if one does not already exist. Within this folder, create the file modules.php. Then fill it with this code:

<?php 

defined( '_JEXEC' ) or die;

function modChrome_titleonbottom( $module, &$params, &$attribs ) 
{
  echo '<p>' . $module->content . '</p>';
  echo '<h3>' . $module->title . '</h3>';
}

Finally, go back to your template to apply this chrome to your module position:

<div class="module_clipon">
    <jdoc:include type="modules" name="left" style="titleonbottom"/>
</div>

Use whatever module position name you need in the name parameter. Notice that the style parameter matches the modChrome_ function name.

For more info: http://docs.joomla.org/What_is_module_chrome%3F http://docs.joomla.org/Applying_custom_module_chrome

Answer 2

@Cruising2hell if you want to have alternative module layouts on the same position have you tried using module suffix params?. Like so..

<?php 

defined( '_JEXEC' ) or die;

function modChrome_titleonbottom( $module, &$params, &$attribs ) 
{
  switch($params->get('moduleclass_sfx')) :
     //My type of module 
     case 'titleonbottom':
       echo '<p>'. $module->content . '</p>';
       echo '<h3>' . $module->title . '</h3>';
     break;
     default:
     //Normal
       echo '<h3>' . $module->title . '</h3>';
       echo '<p>'. $module->content . '</p>';
     break; 
   endswitch;

}

Answer 3

i cannot call it a problem.

go to your main css file and insert this code :

.module_clipon h3 { position: absolute; margin-top: 100px; }

/* put a right height value where your h3 module header reach the bottom of the module content */

:-)

Answer 4

i cannot call it a problem.

go to your main css file and insert this code :

.module_clipon h3 { 
      position: absolute; 
      margin-top: 100px; 
 }

/* put a right height value where your h3 module header reach the bottom of the module content */

:-)