Hide Joomla’s mainbody page content so only modules are visible
A question visitors to our online forum often ask is how to hide the mainbody area of a selected page on a Joomla website. Many of our templates use modules published in the ‘mainbody’ position where — instead of default content for the page – such custom modules as our News Show Pro may be displayed. How can you get the same effect on other pages? By default, our templates detect if a module is published in the mainbody position and will hide featured articles or other types of content on the ‘Home’ menu item(in older Gavern versions you can always find separate option to disable mainbody on frontpage). To achieve the same offect for any Joomla menu item you must use the template option called, “Suffixes for pages“.
This option is very similar to the “Mootools for pages” function. In each case, you can easily add a suffix to specify menu items. This additional suffix allows you to create your very own CSS rules which work only for the selected pages and provide the opportunity to customize virtually everything about this page view. One purpose for using this powerful feature is to hide the mainbody area of a particular page and to only show those modules visible in the top, bottom or other template positions.
Your first task is to note the ID of the Joomla page to which you want to add custom code. Using this page ID, with Module Manager check your page against the following image:
With the page ID, return to template settings, open the ‘Features’ tab and find the aforementioned “Suffixes for pages” option. In this example, we will add the suffix for a menu with an ID of 106 and call the suffix ‘noMainbody‘ as in this screenshot :
After saving the template‘s configuration, check that your custom suffix has been added to the page. The easiest approach is to use Firebug, or simply display the Web page‘s source code (right click on page >> show page source code). When opening the page with an ID of 106, we should see that thetag has an additional suffix.
If the class is visible, we can now modify the CSS for the HTML structure which is visible on this page. To add additional CSS code, open the override.css file located in the template/css directory and add new rules, always starting from suffix name of ‘‘–.noMainbody‘‘.
To hide main page content, remove the div with the gkMainbody id such that the entire code will consist of :
.noMainbody #gkMainbody { display: none !important}
Once you’ve implemented this change, the gkMainbody container will be hidden on the site page where the Page ID=106. This means that no matter the type of content you select for this page – a Joomla article, blog or a simple blank page – all content except for the modules will not be visible. Remember to enable the “Use override CSS” option in the Advanced Settings tab to include the override.css file to the list of template stylesheets.
This article was first published
