5.3 Add Module Menu Items

In the previous article, we saw how easy it was to create a mega menu with Astroid. In this article, we will review the steps for adding new module positions, module rows, module columns, module elements and module menu items with Astroid.

What are modules?

Joomla has basically two ways of placing content on web pages. The first way is to write articles. These articles are then displayed in the main Joomla content area of any given page. You can have a single article or you can have a series of articles (called Blogs) with READ MORE buttons. But either way, the articles are always in the Main Content area.

The second way to display content is inside of Modules. Modules are boxes of content that you can display above or below or to the right or left of the Joomla Main Content area. But there is a limitation to the placement of modules. Before you can add a module to a web page, there has to be a Module Position on that web page!

Astroid Template One Default Module Positions

To see the default module positions on the Astroid Template One, go to Extensions, Templates, Templates and click on Options in the upper right corner. Set Preview Module Positions to Enabled.

01

The click Save and Close. Then click on Astroid Template one details.

02

The Joomla Main Content Area has our Welcome article in it. The module positions are shown in black with white letters. There is a module position called content-top above the Main Content Area and module positions called left and right to the left and right of the Main Content Area. But there is only one Module position above content-top. It is called astroid-header and it a full width module position holding our Header image and our Main Menu.

 

Scroll to the bottom of the page to see the module positions below the main content area.

03

There is a module position called content-bottom. Then in the green box, there is a row with two module positions called footer-1 and footer-2. Then there is another row with module positions called footer-3 and footer-4.

Naming New Module Positions

Astroid One Template does not have a lot of places to put your custom modules with your custom content. Module menu items, which are also called Feature Boxes are typically placed above the main content area. These new module positions can not only be used to place module menu items but also to place slideshows and videos inside of module boxes.

We will therefore create three new rows and place three module positions in each row. We will call these rows top1, top2 and top3. We will call the module positions in row top1, top1a, top1b and top1c.

Add Module Positions to the Template Details XML file

Close the Astroid Template One Template Preview window and click on the templateDetails.xml file (in the left side menu) to open it. Scroll down to Line 33, where you will see the following:

04

These are all of the Astroid One module positions, some of which were not shown in the Template Preview. Place your cursor to the left of the content-top line and press Enter on your keyboard to create a new blank line. Then copy and paste the following into the new blank line:

<position>top1a</position>

<position>top1b</position>

<position>top1c</position>

<position>top2a</position>

<position>top2b</position>

<position>top2c</position>

<position>top3a</position>

<position>top3b</position>

<position>top3c</position>

Here is what it now looks like:

05

Then click Save and Close. Then click Close. Then click Templates, Styles, Astroid One Template, Edit, Template Options, Layout.

06

The Joomla Main Content Area is called Component Area. It does not have and does not need a module position. Above the Content Section is a row called Banner. Banner is a special box that also does not have a module position. Above the Banner section is the Header Section. It has one module position called astroid-header in it. To simplify our layout and eliminate the chance of the Banner section confusing people, we will delete the Banner Section. Hover near the words Banner Section to reveal some hidden buttons. Then click on Remove Section.

Then hover to the right of the Header Section and click on New Section.

07

Click on 4-4-4 to create three equal columns.

08

Click on the hidden pencil to the right of Astroid Section to Edit the section. Change the Section Title to Top 1. Leave the Section Layout set for Container.

09

Then click Save. Then click Duplicate Section twice. Edit the titles of the new sections so they are Top 2 and Top 3.

10

We now have 9 plus signs. To add a module position to Top 1, click on the left plus sign.

11

A module position is also called an Element. We do not want the Banner element. So click on Module position.

12

Use the drop down arrow to the right of Module Position to select top1a. For the Element Title, type top1a. Then click Save and repeat for the remaining 8 module positions. Here is the result:

13

Then click Save. Then Close. Then Save and Close.

Create New Custom Modules and Place Them in Module Positions

Go to Extensions, Modules and click New. Just as Joomla has many Menu Item Types to choose from, Joomla also has many Module Types to choose from. Click Custom which is the most versatile module type. For Title, type Top Row 1 – Column A. For Position, use the drop down arrow to select top1a.

14

Then place your cursor in the workspace and click on the image icon in the JCE Editor. Open the headers folder and click walden-pond.jpg to select it. Change its width from 700 to 200 and click Insert. Then press Enter to create a new line and copy paste the following below the image: This is a test for creating Astroid Module Menu Items also known as Feature Boxes.Then click Save and Close. Then view your site.

15

Congratulations! You have created your first module! Now go back to the Modules Table and select the module by placing a check mark to the left of the module. Then click Duplicate 5 times so that you have a total of 6 identical modules. Then click on the first duplicate and change the name to Top Row 2- Column A. Change the position to row2a. Then click Publish. Then click Save and Close.

For the next duplicate, call it Top Row 2 – Column B. Change the position to row2b. Click Publish. Then click Save and Close.

Make the last three duplicates Top Row 3 -Column A, Top Row 3 – Column B and Top Row 3 – Column C. Assign them to the matching module positions and click Publish. Then Save and Close and View the site.

16

We can now improve the appearance of our modules by editing the Template settings.

Reduce the Module Title Font Size

The module titles using a Heading element called Heading 3 or h3. Go to Extensions, Templates, Styles, Astroid Template One Edit, Template Options, Typography. Then scroll down to H3 Typography and change the Font Size from 28 px to 22 px. Then click Save Clear Cache and Preview.

17

Change the Row Background Colors

Click on the Layout Section. Then for the row Top 1, find the hidden pencil called Edit Row which is on the right side of the row. Click on the Design Settings tab. Then change the Background Type from None to Color. Choose a light green. Then click Save. Repeat to make the second row light blue and the third row light purple.

Then click Save, Clear Cache and Preview.

18

Make Row 2 Equal Columns.

Row 2 has three module positions but only two modules. To give both modules equal width, go to box top2c and click Remove Element. Then on the far right side of the row, click Edit Grid. Choose 6-6. Then click Save, Clear Cache and Preview.

19

To give each box in row 3 its own color, click on Edit Element pencil for top3a. Click Design settings and give it a light blue green color.

Repeat for 3b and 3c. Then click Save, Clear Cache and Preview.

20

Add Margins Between Feature Boxes

To get more separation between the boxes, click on top3a element again and change the margin to 10-3-10-10. For top3b, make the margins 10-7-10-7 and for top3c make the margins 10-10-10-3.

We also need to add margins to top1a element of 10-10-10-10. And margins to top2a of 10-5-10-10 and top2b of 10-10-10-5. Then Save, Clear Cache and Preview.

21

Sadly, each row is 10 pixels wider than our menu and header. To fix this, click on the Edit Row pencil and set each row for an explicit right and left margin of 0.

Add Padding within Feature Boxes

The text in each box goes to the edge of the box, making it hard to read. Open each element again and add padding of 5-5-5-5. (You can also just type 5 for the first box and lock it to add the padding to the rest of the boxes in that element).

22

Then click Save, Clear Cache and View Site.

23

Congratulations. You now have 6 module menu items!

Limit the Module Menu Items to the Home Page

By default, new custom modules will appear on all of your pages. In fact, we only want Feature Boxes to appear on our Home Page. Select each module and open it. Click Menu Assignment. Click Only on the pages selected. Click None. Check the Home Page.

24a 

Click Save and Close. Repeat for all remaining Module Menu Items.

What’s Next?

In our last article about Store Menus, we will review how to add a custom menu to the bottom of our website.