american car


Discount MOT's on Friday


Expert Quality Servicing


Fully Guaranteed


Customization Work Undertaken

Step 4 – Adding the top row of aligned modules in your Joomla Template.

As with the menu, we’ve already added the necessary module positions to the Joomla template we made. We assigned them ID’s of ‘top-row-1’ to ‘top-row-4’ all we need to do now is add some kind of module to these positions. For the sake of this tutorial we will use the ‘custom‘ module from the module section in Joomla’s admin. So, let’s go right ahead and create those modules. You know how to do it, right?

Adding the top row of modules to the Joomla Template we are making

Ok, let’s add a little HTML to the new custom module, then we’ll jump back into Template Creator and add some styling.

Adding the HTML to our top row module

Now, we have some simple HTML in all 4 top row custom modules, but we still need to add some CSS via Template Creator CK to show some design flare!

Keep reading and we'll get into that shortly.

If you save your work and reload the front end your project should look something like mine.

All 4 modules now published but not styles as yet.

We are going to add some background images to each module position, and then set the styling for the text within the custom modules we have just created. We need to find some images, you can use png, jpg, gif or svg. Other images are supported, but some browsers may not support images such as webm, so for the moment it’s best to stick to the main image formats for complete compatibility. For this tutorial I will use jpg. Don’t use images that are too big, it’s a waste of bandwidth. As our row width is 1170px (we set this in the template wizard) and we have 4 side by side modules, it would be fair to say an image width of 300px should be more than wide enough. As my module HTML is short I am going to use square images. But if you want more content in the module, you could use rectangular images and set the module a taller height.

I’m going to use an image editor, such as GIMP (it’s FREE) to resize the images and add an opaque layer to them, you could do this with CSS if you like. But, for simplicity, it’s the way to go.

Once you have your images upload them to the images folder for your Joomla installation.

In Template Creators dashboard, select the pen icon for the first top row module position in the orange tool bar, in the ‘block tab’ select background and add the image you just uploaded. Set the ‘adjust’ option to full and the repeat option to none. Scroll down and open the ‘formatting tab’ enter the height you want the image to be, I set mine at 292px, as this was the rendered width of the image in the browser.

Click on save- apply changes and check your work in the front-end.

If you are happy with the results, repeat for the remaining 3 modules in that row.

Mine looks like this.

Setting the CSS for our Joomla Template top row of modules

Click on save - apply changes and reload the front end, your modules should look something like mine. Cool !

All four backgrounds added to the top row modules for your Joomla Template

We now need to add a little space between the top row modules to make them look a little better.

Return to Template Creator CK’s dashboard, click on the pen icon in the orange toolbar for the module, in the ‘block’ tab select ‘formatting’ and add a 10px margin to the module. Repeat for the remaining 3 modules. Then select the pen icon for the wrapper (wrapper3 in my case) and in the ‘container’ tab select ‘formatting’ and add a top and bottom margin of 10px. Click save-apply changes.

Add margins to the top row module positions

Add margins, top and bottom to the top row container for the Joomla Template you are making.

Go to the front-end and it should look like mine.

Top row of modules now positioned nicely in your Joomla Template

Lastly, we need to add some CSS styling for the text in the custom modules we made for the top row.

All I want to do is to make the text white and center it in the module it is in. Return to the Template Creator CK dashboard and click the pen icon in the orange toolbar for the module. Click on ‘block’ ‘text’ and enter your color in the ‘font style’ box, #ffffff is white. Repeat for the remaining modules and click save-apply.

Centering Things!

This is the bane of most people lives, what works for one, won’t work for another. I always end up referring back to this great guide at CSS Tricks for help. We have already set the module text to appear centered horizontally in the module, and that is great if that’s what you need. But I want our text to be centered vertically as well as horizontally. For this we need to add a little custom CSS to our Custom CSS file and a new class to the HTML in our custom top row modules.

I added the class ‘cent-align’ to each so the HTML now looks like this.

Adding a class to out top row module

I then added this CSS to the custom CSS file for Template Creator CK.

Add some CSS to center the text in the module

The front end should now look similar to this.

Top Row modules now starting to take shape

All there's left to do now, is to make the text in the module a little bigger. I think the best way to do this is to use your browsers console/inspect feature to test and find out what looks good to you. So, hit F12 on your keyboard and start applying changes. When you have decided what looks good you can apply those using the same principles as we have used so far.

I decided that I want the h2 tags to be 4 times the normal text size and the paragraph tags to be 1.5 times normal size. I use ‘em’ for the font size as it is responsive.

The CSS I added to the custom CSS file looks like this.

CSS for TOP Row module font size

And, the front end now looks like this

Your Top Row of modules should look something like mine if all has gone according to plan

Template Creator CK also creates fully responsive Joomla Templates, it’s a good idea to check how things are going a few times during the Joomla Template making process. You can access the responsive editor via the ‘Responsive Design’ tab of the top menu in the dashboard. From here you can enable or disable module positions for certain screen sizes and add custom CSS specific to those screen sizes.

For example, the top row module we just finished styling will display one on top of the other on a small screen size, but there is no margin between them and the edge of the screen.

No margins between the module and edge of the screen on a mobile device

I would like just a little margin to the sides. Open the Responsive Design tab and open ‘Custom CSS for responsive’ here you can add that specific CSS.

I added the following CSS to the mobile phone portrait and landscape sections.

Add CSS to make your modules look good on a mobile device

It’s important to click the grey tick mark before you click on save – apply changes, or you will lose your work.

Return to your browser and recheck your work. If you made no mistakes it should now look like this.

Margins added to Top Row modules on a mobile device

In the next chapter we'll add some modules to the right of the main content area. Read on to find out how.

Create your Joomla templates with Template Creator CK

The Boss

John Doe


The Mechanic

Jane Doe


The Salesman

Fred Stone


The Receptionist

Wilma Stone



Contact Us

A Garage Ltd.,
Any Street,
Any Town,
Any State,
Any Post Code,

0800 123 456

Location Map

Copyright © 2021 Joomla Template Maker. All Rights Reserved.
Joomla! is Free Software released under the GNU General Public License.