Download Spirit of Nature
Before starting to customize the template, you will need to first:
I. Log into your Joomla Admin Panel.
. Once you log in...
II. Go to the Extensions tab
of the main navigation bar and select Template Manager.
Now you will see how to replace the default Joomla template with 'Spirit of Nature
'. To do that - select 'Spirit of Nature'
from the list of Joomla templates
already installed in your Admin Panel. In our example - the default Joomla 1.5 template is 'Auto Mania 1
IV. Hit the Default button.
V. Click on the name of the template
to go to the Edit Template Panel.
For the purposes of this video tutorial you must push the Edit CSS button
in the top right corner.
First check whether you have the permissions to edit the template. If it says Unwritable for the template.css file, then you do not have any (writing permissions). To edit your permissions you need to...
Open an FTP client of your choice and then start an FTP connection by clicking the client's Connect button.
Now look at the right section of your FTP client and browse to the Demo folder, then to the Joomla 1.5 and the Template folder, to finally open the 'Spirit of Nature
X. Select its CSS folder
. In the 'Spirit of Nature
XI. Browse to the template.css file
Right-click it and then select Properties
from the options menu.
In the Properties panel - set the necessary writing permissions manually and hit OK to apply all changes.
Go back to the Edit CSS interface of your Joomla Admin Panel.
Refresh your browser to see the Unwritable status of the template.css file turn to Writable
Select the template.css file marking it checkbox and hit the Edit button in the top right corner
Here is the CSS file
of 'Spirit of Nature
' that you will be able to edit directly.
The first customization option is to Change the Page Alignment
(of the template)
1. To see the default page alignment - click-open the Preview link in a new tab.
2. If you wish to change that centered alignment - go back to the CSS file and search for the #PAGE selector using the search function of your current browser.
3. Delete the MARGIN attribute line.
4. Hit the Apply button to confirm your update.
5. Go to your Template Preview page and refresh your browser.
This will make the template's position change from central to aligned toward the left side of your screen.
Now you will see how to Change the Link Color
of the template.
1. Back in the Joomla Admin Panel.
2. Go and search for the A LINK selector in the CSS file.
3. Using the Color Cop tool select a suitable color for the links. In this example we choose to use the Light Green color as it suits very well the template's current color scheme.
4. Copy the color code and paste it as a new custom value for the COLOR attribute.
5. When ready - hit the SAVE button.
6. Visit again the Preview Template page and refresh your browser to see the text links color change to the newly set color - LIGHT GREEN.
You can also Edit the Color of the Text Links
when the user mouses over them.
1. Here you can use the Color Cop tool again to generate the preferred color.
2. Paste its code into the COLOR attribute value slot.
3. Hit the APPLY button to confirm all changes.
4. Go to the Template Overview page and reload your browser.
5. Mouse over any of the links on the template to see the color change updated.
Next let's see how to Change the Color of the Left Column Links
1. Back to the Joomla Admin Panel.
2. Locate the LEFT COL LINK selector in the CSS file, using the Search function of your browser.
3. Using again the Color Cop tool generate the preferred color and then use its code as a COLOR attribute value. In this example we choose to set the LIGHT GREEN color that was previously set for the regular layout links.
4. When ready with the left column link changes - hit the APPLY button to confirm them.
5. Go to the Template Overview page and reload your browser session.
6. Mouse over any of the left hand links of the template to see them turn from grey to light green.
Next let's see how to Change the Background Color
of the template.
1. Jump back to the CSS file.
2. Search for the #PAGE selector using your browser's search function.
3. You can resort again to the Color Cop tool to generate a color for the template's background. When ready - copy the color code and paste it into the COLOR attribute value field.
4. To view the newly applied background color changes - refresh your browser on the Template Preview page and see the default grey color turn to white.
The next customization option is to Change the Header Color
1. Go and locate the H2 selector in the CSS file. The H2 selector refers to the BIG titles on the template.
2. With the Color Cop tool - generate the preferred color code and paste it as a COLOR attribute value. In this example we use the same color for the template header titles as the color of the links - LIGHT GREEN.
3. To apply all new changes - punch the APPLY button.
4. Visit the template preview page and refresh the browser. As you can see - the color of the main title of the template turns from BLACK to LIGHT GREEN.
The last custom option is to Change the Text Size
1. In the CSS file - locate the BODY selector and then replace the font-size attribute value with the new custom value.
2. Hit the Apply button.
3. Visit the template preview page to see the changes as they will appear online. In our example the font size will go up, since we set a bigger value (for the FONT-size attribute).
To save all changes made so far to the template's layout - go and click the SAVE button
located in the top right corner of your screen.
Well, that's all. This movie was wierd, wasn`t it? :-)