Page 1
What's left in the design to fix?
The menu items are a bit crowded. Let's space them out a bit.
open full sized image
Page 2
How should we adjust the styling of the menu items? Let's have a look at the HTML code that Joomla is generating for these menu items. We'll take advantage of a nifty feature in Firefox that lets us select an area of the page and then see the code for that page.
First, select all of the menu items and menu header.
open full sized image
Page 4
A window opens showing the selection source. We can see that each menu item has a "class" assigned to it called mainlevel-left.
open full sized image
Page 5
Since the menu items have an associated style, we should be able to adust the way they look by editing the templates CSS file. The CSS (Cascading Style Sheet) file is a text file with a ".css" extension, containing css "class" names and associated styling, like font color and size. (A "class" is a named set of styles).
If we edit the template css file and change the attributes of the mainlevel-left style, the menu should appear differently.
Here's the template folder in FileZilla. You can see that there is a folder called css.
open full sized image
Page 6
Here we have opened the css folder and can see that there is one css file in it called template_css.css.
open full sized image
Page 8
Let's search for the mainlevel-left class.
Hmm.. strangely enough it isn't there.
open full sized image
Page 9
No problem, we'll add it.
Scroll to the end of the file and add this:
.mainlevel-left {line-height:20px}
This means that the "mainlevel-left" named style will have a line height of 20 pixels. The period is placed in front of the name to indicate that this is a "custom" class, that is a name we (or someone) made up, not the name of a standard HTML element like BODY.
open full sized image
Page 10
Next we save our changes to the css file and upload it to the server.
Returning to the home page, we see that the menu items are now spaced out a bit more.
open full sized image
Page 11
Scrolling down, we see that the Newsflash items are still bunched up. Apparently the mainlevel-left class didn't apply to them.
open full sized image
Page 12
When we view the source of the Latest News menu, we see that these menu items have been assigned a class called latestnews.
open full sized image
Page 13
Returning to the template stylesheet we see that there is no class called latestnews.. but there is one called latestnews-latest.
Hmm... it looks like when we configured the classes in the Module Manager (in the tutorial for adding a new template) one was left out. If we add the suffix "-latest" on to the class for the Latest News module, the class will presumably then be called latestnew-latest.
open full sized image
Page 16
Here we've clicked on Latest News to show the configuration page for this module. We've scrolled down a bit, and can see that there is an entry box called Module Class Suffix.
open full sized image
Page 17
Let's add the suffix "-latest". This will presumably cause Joomla to append "-latest" on to the class for the Latest Menu, so that the class name will now be "latestnews-latest". There is a "lastestnew-latest" class in our css file, so let's see how that works out.
open full sized image
Page 20
Let's make a couple more changes:
- Put a little more space above the Login Form.
- Space out the Latest News entries a bit more.
open full sized image
Page 21
By again of examining the source, we can figure out which classes to edit.
The login form consists of an HTML table with class table.moduletable-left. We'll add the following to the list of styles for that class:
margin-top : 8px;
open full sized image
Page 22
The Latest News HTML consists of a set of LI items contained in an element of class latestnews-latest. We'll add the following:
line-height : 16px;
open full sized image
Page 23
We save the css file and upload then return to the home page and refresh.
We can see that the styling changes have been applied.
open full sized image
Page 24
We're finished with the basic styling of the home page. Let's check how the other pages are being displayed.
Another problem - when we click on the Joomla! License page, the left menu gets squashed.
open full sized image
Page 25
Looking at the source for the left menu, we see that it has a class of moduletable.
open full sized image
Page 26
Looking at our template css file, we see that the table.moduletable style is set to have a width of 100%. This means 100% of the containing element. We need to set this to some definite value, like 160 pixels in order to keep it from being squashed.
open full sized image
Page 27
However, scrolling down in our CSS file, we see that there already is a style named table.moduletable-left. (table.moduletable-left means "a class named moduletable-left inside a TABLE element).
open full sized image
Page 28
It looks like another suffix was left out when we configure the stylesheet.
Let's go back into the Module Manager, open the configuration page for the Main Menu, and add the module suffix "-left".
open full sized image
Page 29
After saving our changes and returning to the home page, the left menu is now the correct width.
open full sized image
Page 30
That should do it! For now, anyway.
We ran into a number of problems that we had to fix. Depending upon what template you install, you may have to do a bunch of fixes or none at all to get the site to look exactly the way you want. However, even if you need to make a number of fixes, you'll find that the basic procedures are simple. You only need to change either
- The class or module suffixes in the Module Manager
-or- - The index.php file (a fairly simple HTML file that positions the various modules and content)
-or- - The template css file (a list of CSS "class names" that are attached to modules by Joomla or in the index.php file).
In the next tutorial we'll review what we've learned so far about templates.