Custom HTML modules are by far the most used (and most loved) modules in Joomla. They’re very easy to use, they do the job, and they are extremely light. However, there is one problem with Custom HTML modules that stops them from being perfect, it’s that they always encapsulate the user’s content (e.g. the content that you add) in a div tag. There is no way to remove the div: you can style it the way you want, but you cannot remove it. That’s a bummer!
“Why would people want to remove that harmless div tag?”, we hear you asking… Well, because if you want to use the Custom HTML module to solely add some CSS styles or some JavaScript code, then most likely you do not want that needless div tag, especially because it may make the HTML code invalid (for example, when the module is added to the head tag).
Most Joomla administrators circumvent this problem by using a simple 3rd extension that will add their content without the encapsulating div. While this strategy works, we have a better way of doing this, and the best part is that it doesn’t involve modifying the Custom HTML module (we just extend it)…
Here’s a simple guide on how we do this:
- We copy the default.php file from the /modules/mod_custom/tmpl folder to the /templates/[your-template-name]/html/mod_custom folder (if that folder structure doesn’t already exist, we create it).
-
We rename the file default.php which is now under the /templates/[your-template-name]/html/mod_custom to nodiv.php.
-
We open the file nodiv.php, and we remove the following lines:
<div <?php if ($params->get('backgroundimage')) : ?> style="background-image:url(<?php echo $params->get('backgroundimage');?>)"<?php endif;?> >and
</div> -
We save the file and then we upload it back to the server.
-
We login to the backend, and we create a Custom HTML module (or we open an existing one).
-
We click on the Advanced Options tab on the right, and then we choose nodiv from the Alternative Layout dropdown.
-
We save the Custom HTML module and we check the website. And Voilà! The encapsulating div tag is no longer there!
We hope you liked our little guide and we hope that you found it useful. However, if you have tried the above and you still see the annoying div tag in the Custom HTML module even though you set the layout to nodiv, or if you think the above is too technical, then please contact us. We are always happy and eager to help, we work really fast, and our rates are super-duper cheap!