Chrome problem: How to remove the div class=”custom” from a Joomla module

Question

You might also find this question relevant if you are trying to solve "How to stop Joomla modules being wrapped in divs."

What's the PROBLEM?

When Including a module into Joomla, it gets wrapped in a div tag as shown below.

<div class="custom">
 Module content
</div>

I don't want the module to be encapsulated/wrapped in anything. As it causes problems with the page layout. In some situations I could fix it with CSS styling, but that is not true of all situations.

My set up and what I unsuccessfully tried

The module I was trying to style was being included via an article.

1. Setting the style to none in the article- {loadmodule module, title, style} My actual code was {loadmodule mod_custom, mymodule, none}
2. Setting the style to none- by going to Extensions ->Module Manager then clicking on the module I wanted to not get wrapped in divs. Then choosing Advanced ->Module Style=None.

I was sure that the above should have worked. The code responsible for the above styling was in templates/system/html/modules.php and it showed

/*
 * none (output raw module content)
 */
function modChrome_none($module, &$params, &$attribs)
{
    echo $module->content;
}

3. Next failure, I went to Extensions -> Plugin Manager ->Content Load Modules –changed the value to no wrapping(raw output).

That didn’t work either! WoopDeeDoo! I could still see the module being wrapped in a div with class=”custom”

How can I fix this problem?

Answer 1

The solution was to create a module override of \modules\mod_custom\tmpl\default.php

The offending code in that file was

<div class="custom<?php echo $moduleclass_sfx ?>" <?php if ($params->get('backgroundimage')) : ?> style="background-image:url(<?php echo $params->get('backgroundimage');?>)"<?php endif;?> >
    <?php echo $module->content;?>
</div>

I took the code above, edited it and put it in an override at templates/current-site-template/mod_custom/default.php The new code was

<?php echo $module->content;?>

That fixed the problem.

---

Additional info

From my understanding, the override would remove the divs from all modules published on my site. At first I thought this was undesirable, because in some situations I still want to apply styling to specific modules, but then I re-examined the HTML code. This is how the HTML looked before the module override was applied and a chrome style of none was used

<div class="custom"  >
    Module content
</div>    

This is how the HTML looked before the module override was applied and a chrome style of html5 was used

<div class="moduletable">
    <div class="custom"  >
        Module content
    </div>
</div>

This means, if I needed to, I could still apply a custom div and class to specific modules while using the module override. If I chose the chrome style as html5 I would get

<div class="moduletable">   
    Module content  
</div>

and if I used the override with a chrome styling of none I would just get

Module Content

Answer 2

We were having the same problem with this module. It may be something with the newer Joomla version we're using but we couldn't get oooooo's answer to work. There is a slightly new directory structure you must follow (We're using Joomla 3.6.2). You must place your overrides in an "html" directory inside your template.

https://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core

PATH_TO_JOOMLA/components/com_content/views/article/tmpl/default.php
to
TEMPLATE_NAME/html/com_content/article/default.php

Here is another example using a module

PATH_TO_JOOMLA/modules/mod_login/tmpl/default.php
to
TEMPLATE_NAME/html/mod_login/default.php

I had to create a blank default.php template for mod_custom that only contained

<?php echo $module->content;?>

and put it in

/templates/my-templates/html/mod_custom/default.php

Only then was I able to remove all the extra fluff Joomla wraps around my modules. There should be an option to only display module html, and nothing more.

Answer 3

To get rid of the "moduletable" wrapper just create a module style:

In templates/your_template/html folder create a file named "modules.php":

<?php    
    function modChrome_BoHivex($module, &$params, &$attribs) { 
        $module_class_sfx = htmlspecialchars($params->get('moduleclass_sfx'));
        ?>
        <div class="custom<?php echo $moduleclass_sfx; ?>" <?php if ($params->get('backgroundimage')) : ?> style="background-image:url(<?php echo $params->get('backgroundimage'); ?>)"<?php endif; ?> >
           <?php echo $module->content; ?>
        </div>
        <?php
    }

You can add more styles by just adding new functions, you can totally customize the output and get rid of the "moduletable" wrapper.

You can find your styles in your module's backend -> advanced -> module style.

Special hint: It's possible to override com_content pagination in a similar way by adding a pagination.php to the /html folder.

To get rid of the "custom" wrapper, add an override to templates/your_template/html/mod_custom/your_override.php:

<?php
   defined('_JEXEC') or die;

   echo $module->content;

It's possible to just do an echo output without HTML in the style function and output the html in the override, too.