Page 1
The previous tutorial had quite a number of steps. Often, installing a template is considerably simpler, but the previous tutorial demonstrated making a number of fixes to the template.
At this point you have all of the knowledge not only to edit a template but to create your own.
Let's review what was learned in the previous tutorial.
Page 2
Essentially Joomla templates consist of:
- an index.php file
- an optional images folder
- a css file
There are couple of other files which are only the concern of the template creator:
- an xml file with some information about the template (if you want to make your own you can easily do so by copying an existing file and changing the information inside it)
- a screenshot thumbnail of the template.
Page 3
The index.php file of a template can be thought of as a single web page that has placeholders for the main content of the page plus modules.
The basic setup of the "pages" of a Joomla site are actually determined by this one file.
The BODY element of an index.php file generally contains either a TABLE or DIV elements that hold the various "positions" into which Joomla will load modules, plus a location where Joomla will load the main content of the page (e.g. an article or series of articles).
Page 4
For example, a very simple index.php file could look like this:
<body>
<table>
<tr><td><?php mosLoadModules ( 'top' ); ?></td></tr>
<tr>
<td><?php mosLoadModules ( 'left'); ?></td>
<td><?php mosMainBody(); ?></td>
</td>
</table>
</body>
You can see that the HTML is just used to hold the mosLoadModules statements. In the statement mosLoadModules('top'), Joomla will put all of the modules that have been specified as having location "top". (This is set in the Module Manager).
Modules are generally small squares of content like menus or news items. The mosMainBody element is where the main content of the page will be placed.
Page 5
One way of looking at Joomla is that a Joomla site really only consists of one page (plus a lot of content stored in a database). As you click on menu items, Joomla rebuilds the content of that one page, as if you are navigating to another page.
When you click on a menu item, that menu item is going to load a single main piece of content, such as an article or list of articles, or calendar or whatever else into wherever you've specified to be the main content area in index.php.
In addition, modules, that is, all of the smaller items such as menus, are going to either display or not depending on whether you've configured them to show for that menu item.
The idea of Joomla is to build a site not by creating pages, but by configuring menu items. A given menu item will load a particular main content item, plus whatever modules you want. The modules are always displayed in the location as set up by index.php. (However, you can make it appear as if modules move to different places on the page, however, by cloning modules, placing them in more than one location, and then hiding or showing them depending on the menu item.)
Page 6
Let's take a look at the site we've built so far to see these concepts in action.
Here's the home page of our site as it appears at 1025 x 768 resolution. (If you view this page using Internet Explorer, you will find that the image is much more clear and can be resized, since IE has a component for stretching and shrinking image files with no loss of information. Click "style" in the menbar of this page to change the image size in IE.)
open full sized image
Page 8
- Of the modules on the left, only the Main Menu remains.
- The main content has been replaced with an article.
open full sized image
Page 9
Let's see how this was set up in the admin area. Here we are on the admin home page.
open full sized image
Page 13
The list of all the items in the mainmenu module appears.
Let's see how the Joomla! License entry works.
open full sized image
Page 14
Here is the detail page for the Joomla! License page. We can see that the content is specified as
Static Content: Joomla License Guidelines
You'll learn more about content types and how to hook up a menu item to a piece of content in the following tutorials.
open full sized image
Page 15
What about the modules? For example, the Login module disappeared when we clicked on Joomla! License.
The way it works is like this:
- Menu items point to some kind of content
- Modules specify which menu items they are linked to.
Let's have a look at the Login module's settings to see how this works:
Page 18
Here is the configuration page for the Login Form. You can see that in the Menu Item Link(s) listing, there is only one Menu item listed: Home.
That means that, when you click on Home, this module shows. When you click on some other menu entry, it does not show.
open full sized image
Page 19
And, the reason this module shows up on the left side of the page when it is displayed, is because
- It is loaded into position: user1
- index.php has user1 placed in the left column.
Page 20
So, building a Joomla site basically consists of
- Putting content such as articles, blog items, and even components like events calendars, into the Joomla database.
- Creating and configuring menus so that users can navigate to this content as if it consisted of web pages.
In the next tutorials, we'll add the content for our site and set up the menus (navigation) so that we have a completely functional site.