In this part 2 of Creating A Custom Joomla Template, we're going to add a logo and a navigation bar (menu bar).

IMPORTANT: This tutorial assumes that you are coming from PART 1 and that you have a 'clean' install of Joomla! with no sample data added (How To Install Joomla In WAMP Server).

You can find PART 1 of this tutorial here:

• Creating A Custom Joomla Template (PART 1).

STEP 1: Add A Logo

What's a website without a logo, so that's the first thing we'll do:

1. Create a logo for your website.
   • It should be 350x70 pixels (WxH).
   • If you want to use the generic one a created for this tutorial (shown below), click here to download it: Logo.

2. Name the image "logo". The image extension can be a .png or a .jpg image extension.
3. Place the logo in here: /templates/mytemplate/images (where mytemplate is the name ofyour template).
4. Add the logo image to the header section of your template's index.php page. Here's the image element code:
   • <img class="logo-image" src="/templates/mytemplate/images/logo.png" />.
   • Change the mytemplate to the name of your template.
   • If your logo image has a .jpg extension, then make sure the code snippet you add to your template reflects that.

In your template's index.php file, this:

<!-- start header -->
  <div class="header">
    <!-- something goes here -->
  </div>
<!-- end header -->

Should now look like this:

<!-- start header -->
  <div class="header">
    <img class="logo-image" src="/templates/mytemplate/images/logo.png" />
  </div>
<!-- end header -->

Notice that the the image element has the class name of logo-image. This will help us style the logo in PART 3 of this tutorial.

STEP 2: Add The Navigation Bar

In your template's index.php file, you'll find the following line of code <jdoc:include type="modules" name="navigation" />.

<!-- start nav bar -->
<div class="navigation">
  <jdoc:include type="modules" name="navigation" />
</div>
<!-- end nav bar -->

This is the position where the navigation bar will appear in your site's web pages.

To get the navigation bar to appear in that position, you need to set the Main Menu module's position to the navigation position in your website's administrator's control panel.

Let's do that now:

1. Log in to your administrator's control panel (if you haven't already).
2. Go to Extensions->Modules.
3. The Modules (Site) panel will now load.

On the Modules (Site) panel, you'll notice 3 selections:

4. Click on the Main Menu option (click on the name itself).
5. The Main Menu Modules: Menu panel will now load.

6. On the right side of the panel, you'll see a parameter with the name of Position.

7. Click on the x next to the position-7 name.
8. The position-7 name will be removed.
9. Click on the down arrow. You'll now see a drop-down list of positions from all of the installed templates in your Joomla! website.

10. Scroll down the list till you come to the mytemplate heading (where mytemplate is the name of your template).
11. Select the Navigation [navigation] option.
12. Click the Save & Close button at the top of the Main Menu module panel (see image below).

You have now added the Main Menu module (which is the navigation bar) to your website's pages.

STEP 3: Add Menu Items To Main Menu (Navigation Bar)

We're now gonna' add menu items to the Main Menu.

For this tutorial, I'm going to have you add 2 menu items. One will be named Cars and the other will be named Bicycles.

Bear with me and name your menu items the same names. Once you learn how to create a menu item, you can go back and change the names.

1. Go to Menus->Main Menu.
2. The Menus: Items (Main Menu) panel will now load.

3. Click on the green New button (in the tool bar).
4. The Menus: New Item panel will now load.

In the Menus: New Item panel, configure the following:

5. Menu title * - type Cars in the text box.
6. Alias * - type cars in the text box.
7. Menu item type * - click on the blue Select button (see image below).

8. The Menu Item Type modal window will now open.

In the Menu Item Type modal window:

9. Click on the Articles option.
10. The Articles accordion will now open.
11. Click on the Category blog option.
12. The modal window will now close.

On the Choose a Category * option, you'll now notice that a Create button has been added.

13. Click on the Create button.
14. The New Category modal window will now open.

In the New Category modal window, add the following:

15. Title * - type Cars in the text box.
16. Alias - type cars in the text box.
17. Click the blue Save & Close button.
18. You'll now be returned to the Bicycle Menus: Edit Item panel.

19. Click on the Save & Close button at the top of the panel (see image above).
20. You'll now be returned to the Menus: Items (Main Menu) panel.

STEP 4: Add A Second Menu Item

We're now gonna' add a second menu item. Instead of creating one from scratch, we're going to copy the existing Cars menu item.

These are the steps:

1. In the Menus: Items (Main Menu) panel (Menus->Main Menu).
2. Click on the Cars menu item name (see image above).
3. The Cars Menus: Edit Item panel will now load.

In the Cars Menus: Edit Item panel:

4. Click the Save as Copy button.
5. The panel will reload and you'll notice that the Menu Title * and the Alias name have a number 2 added.

4. Rename the Menu Title * from: Cars (2) to: Bicycles.
5. Rename the Alias from: cars-2 to: bicycles.
6. On the Choose a Category * option, click on the X Clear button.

You'll now see that the Choose a Category * parameter will revert to its default options:

7. Click on the Create button.
8. The New Category modal window will now open.

In the New Category modal window, add the following:

9. Title * - type Bicycles in the text box.
10. Alias - type bicycles in the text box.
11. Click the blue Save & Close button at the bottom of the modal window.
12. You'll now be returned to the new Bicycles Menus: Edit Item panel.

In the Bicycles Menus: Edit Item panel, find the Status parameter (it's on the right side of the panel):

13. Click on the red Unpublished selection.
14. You'll now see a drop-down list appear (see image below).

15. Click on the Published option of the list.
16. The Status parameter will now be set to a green Published state.

13. Go to the top of the panel and click on the Save & Close button.

Check The Front Page

If all went according to plan, go to the front page of your Joomla! website and you should see the following page:

Not much to look at, but it's getting there!