Page 1
This set of tutorials is demonstrating installing Joomla into an actual site with preexisting content. The site is NYCircuits Inc, a New York city software consultancy. This is a comparatively simple corporate site, so we want to change the template to something more streamlined than the default template.
There are a number of template libraries for Joomla. There are many free templates, and also templates for which a fee is charged. For a list of template sites, see the first tutorial in this series, or search for "Joomla templates" in Google or another search engine.
Page 2
Here we are looking at a gallery of available templates on a site called www.joomladesigns.co.uk.
open full sized image
Page 3
Scrolling through the available templates, we decide to use one called "Skyline".
open full sized image
Page 4
The template that we have chosen at www.joomladesigns.co.uk is a design that requires us to log in with a paid membership. Here we have logged in to the site and are about to download the "skyline" template.
open full sized image
Page 5
Clicking on the file name brings us to the download page for this template. The templates at www.joomladesigns.co.uk are actually a bit less simple to install than most other templates. There are some special instructions here that we'll need to return to.
open full sized image
Page 7
Now we are going to install the template. To do this, we go to the administrator area of our website, which can be found at the address [domain name] + "administrator".
open full sized image
Page 9
Before we install the template, there is one important step we need to do. Joomla will be creating a folder for the template. We need to tell Joomla to make the folder (and the files in it) writeable, or it will only be writeable by Joomla. We may want to edit the files directly ourselves later, so let's make them writeable.
Select Site - Global Configuration.
open full sized image
Page 10
Select the Server tab. You'll see some radio buttons for File and Folder Permissions.
open full sized image
Page 13
Now we're ready to upload the template. Choose Site - Template Manager - Site Templates.
open full sized image
Page 17
The Choose File dialog opens. Navigate to the desktop where the skyline template was saved.
open full sized image
Page 21
We're now going to make the skyline template the one that is used by our site by
- Selecting the template
- Clicking Default.
open full sized image
Page 22
We now can take a look at our site. The design has completely changed. However, some of the styling doesn't look quite right. For this particular template, we need to change a few more things.
open full sized image
Page 23
Returning to the template site, we see that there are some instructions for configuring this template.
- mainmenu using left module position and module class suffix is -left
- top menu uses top menu module position and module class suffix plus menu class suffix is set to -top
- login is using user1 module position and module class suffix is -left
- search is using user5 and module class suffix is -search
open full sized image
Page 24
This brings us to one of the basic concepts of Joomla.
Joomla does not create web pages, and doesn't really have a concept of pages. Instead, content consists of modules that are placed in positions. We'll explain later how Joomla uses this concept to make the site look like it is made up of multiple pages, but for now let's just talk about positions and modules.
For example, one position is "left". Think of this position as a box with the name "left" that is put somewhere on the page. This position could actually be anywhere depending upon how you set up the main template page, but hopefully it will be somewhere on the left to avoid confusion.
Within a position you can place one or more modules. A module is a bit of content, for example, a menu.
The first instruction in the previous screen is saying that "mainmenu" module should be in the "left" position, and that this "mainmenu" module should have a (CSS) class suffix of "-left".
Page 25
So we need to configure that "mainmenu" module. In the admin area, choose Modules - Site Modules.
open full sized image
Page 26
The "Main Menu" module (type = mod_mainmenu) is what we're looking for.
open full sized image
Page 27
Clicking on the link for this module brings us to a page where we can edit settings for this module. Note that the position is already "left".
open full sized image
Page 28
Scrolling down, we see that there is an entry for Menu Class Suffix. We were instructed to enter "-left" into this box. (A class is named style used in a CSS (Cascading Style Sheet) file. We'll learn more about these later).
open full sized image
Page 29
After clicking on Save, we return to the list of modules. The next one we need to edit is the Top Menu.
open full sized image
Page 30
Here we were instructed to enter "-top" for the Menu Class Suffix and the Module Class Suffix.
open full sized image
Page 31
In the same way, we can proceed to fix the rest of the modules. Returning to the site home page, we can see that the template now displays correctly.
open full sized image
Page 32
Here is a screenshot of the site at this point at a higher screen resolution. (Internet Explorer will display this screenshot with more detail than Firefox or other browsers).
open full sized image