CODEWITHSUNDEEP
joomla
Cruising2hell
Cruising2hell

Reputation: 133

Modify the HTML structure of a Joomla custom Module

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.

Upvotes: 1

Views: 7501

Answers (5)

Victor H. Torres
Victor H. Torres

Reputation: 163

It is possible to modified the return of the $module->content ? Because, if the module is a type of menu, the render is: 

<ul class="nav menu"><li>...</li></ul>

and if for example I need to put a class="list-inline" inside of <ul> and delete the nav and menu styles of the ul tag.

Upvotes: 0

Noli Aux
Noli Aux

Reputation: 1

I can't 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 */

Upvotes: 0

Noli Aux
Noli Aux

Reputation: 1

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 */

:-)

Upvotes: 0

stone
stone

Reputation: 2202

@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;

}

Upvotes: 2

jlleblanc
jlleblanc

Reputation: 3510

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

Upvotes: 1

Related Questions