Step 5 – Adding modules to the right of the main content area in your Joomla Template

The ‘main content’ area of your Joomla Template is where all of your general information is displayed. Blog entries, news stories, an online store or portfolio occupies this space. The main content area is not a fixed height, and can extend to give space to all of your day to day content. In general it is best to try to minimize the overall size of this area, as more content = more to download, therefore a bigger, slower website that Google will not like very much. If you have a lot to display, try to make those pages ‘internal’, just as this tutorial is.

Template Creator CK gives you a selection of pre configured module positions around the main content area, these can be activated by clicking on the layout icon from the white tool bar of the main content area in the dashboard.

When I set the module positions in section 2, I activated the right column and set a width of 20% for it.

To use this column, all you need to do is add a module or two in the normal way and select ‘module position right’ from the available positions list in the module parameters.

I like to set one, then add my main content, then add or modify the modules in the right column so they take a similar amount of space to each other.

Before we do that, lets get rid of the annoying ‘Home’ from the Joomla Template we will make. Navigate to the main menu in the admin area, click and open the ‘home’ menu item, then open the ‘page display’ tab and select ‘no’ for the entry ‘show page heading’. Click save & close.

I’m going to add some content to an article now using the ‘dummy content’ plug-in I mentioned previously. I’ll then set it as the display item (display a single article) for the ‘home’ menu item in the main menu. From the ‘options’ tab in the ‘home’ menu item I'll also disable the article title and information block. This info is great in a blog layout, but not a good idea for the homepage of your new Joomla website, it will make your Joomla Template look UGLY!

If you followed along, then your site should now look like mine.

It’s starting to look like a real website already!

I’d estimate you will have spent about an hour to get to get to this stage, not bad for a 100% custom coded Joomla Template.

Right Column Modules

If you look at websites that use this format, the majority of content to the right, or left of the main content area, are often menus, offers, contact us forms or advertising. The choice is huge and specific to your design. If you wanted, you could even not publish any module to this position and have your main content area fill the whole width, just like the image above. It’s completely your choice. For this tutorial I’ll add some custom modules with varying content and a vertical menu for this Joomla Template we are making. I won’t go into details in this tutorial, as it's really not within the scope of this tutorial, but as before, if I style those modules I’ll do it via the options available to me via Template Creator CK’s dashboard and the custom CSS file.  Consistency is Key.

For this example I added this CSS to the Custom CSS file.

I also added some margins and padding to both the main content area and right module position to space things out a little, using the options panel for those elements in Template Creator CK. The Joomla Template we are making should now look like this.

It's looking good !

Not bad for just a couple of hours work making a Joomla Template, this is how to make a Joomla Template. How's yours coming on?