Page 1

Here's the site as it looks now.

We need to make a few more changes to index.php. The logo image isn't centered, and there is too much space wasted at the top.

  Click on the image for page view.

Page 2

The index.php file has a containing table. Let's narrow it a bit to make it fit the logo.

  Click on the image for page view.

Page 3

Now after saving and returning to view our home page, the logo is centered.

  Click on the image for page view.

Page 4

Next, let's get rid of the items above the logo. Rather than delete them from the file, for now we'll just hide them with a style='display:none' attribute.

  Click on the image for page view.

Page 5

Saving and returning to our Joomla home page, we now have removed the top items. There is still some unnecessary whitespace at the top though.

  Click on the image for page view.

Page 6

Right above the logo picture, we can see there is a table row with the following HTML:

          <tr>
            <td height="19" background="templates/skyline/images/topmenubg.jpg">
              <?php mosLoadModules ( 'top' ); ?>
            </td>
          </tr>

What this means is that this row holds a background image, plus the "top" position. Let's try hiding this row with a style="display:none" attribute.

  Click on the image for page view.

Page 7

Returning to the site we can see that the extra space is now gone. (The logo has been a bit altered in the meantime as well).

However, in removing the top content, we've lost the "search" input box. For our next edit, let's try to get it back and place it over the logo.

  Click on the image for page view.

Page 8

The search module is loaded by Joomla into a position called "user5". (You can check the position of any module by looking at the Site Module List demonstrated in a previous tutorial).

1. Here's where user5 used to be (it is still there, but hidden).
2. Let's create a new div element to hold user5 and position it over the logo.

We'll use this code:

  <div style="position:absolute;top:20px;margin-left:610px;height:0px;">
     <?php mosLoadModules ( 'user5' ); ?>
  </div>

This code will creates a DIV element (basically just an empty rectangle) and positions it. Then within that DIV element we tell Joomla to load the modules that are in the "user5" position.

  Click on the image for page view.

Page 9

The search box now appears where we wanted it to.

  Click on the image for page view.

Page 10

Let's make a couple more adjustments. It would be nice to have a bit more padding in the main content area. Looking at the index.php file, we can see that the main content is being loaded with this code:

<?php mosMainBody(); ?>

 

  Click on the image for page view.

Page 11

Let's change the padding of the containing TD element to

style="padding:10px"

This means "padding = 10 pixels".

  Click on the image for page view.

Page 12

Now we have better padding in the main content area. In the next tutorial, we'll adjust a few more styles by editing the template CSS file.

  Click on the image for page view.