Editing index.php

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.

open full sized image

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.

open full sized image

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.

open full sized image

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.

open full sized image

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.

open full sized image

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).

Here's where user5 used to be (it is still there, but hidden).
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.

open full sized image

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: