Themes Categories
Joomla Hosting
- Free Joomla! installation
- Free domain name
- 20 GB web space
- 200 GB bandwith/traffic
- 3 domains hosted
- 10 MySQL v.5 databases
- 5 FTP accounts
- 200 e-mail boxes
Home » Joomla 1.5 Video Tutorials » 'Spirit of Nature' Joomla 1.5 template
This movie tutorial will be your guide in customizing the 'Spirit of Nature' Joomla template. This free template supports 2-column page layout and it is built in the green-red-black colour palette. Customizing the CSS file of this beautiful template does not seem that difficult as it sounds. See it for yourself.
Download Spirit of Nature
'World Cup Heroes' Joomla 1.5 template
'World Cup Teams' Joomla 1.5 template
'World Cup Teams' - A Movie Trailer
'World Cup 2010' Joomla 1.5 template
'World Cup 2010' - A Movie Trailer
'Casino Royale' Joomla 1.5 template
'Casino Royale'- A Movie Trailer
'Fresh Air' Joomla 1.5 template
'Fresh Air' - A Movie Trailer
'Coffee Lovers' Joomla 1.5 template
'Coffee Lovers' - A Movie Trailer
'Safari In Africa' Joomla 1.5 template
'Safari in Africa' - A Movie Trailer
'Spring Flowers' Joomla 1.5 template
'Spring Flowers' - A Movie Trailer
'Happy Easter' Joomla 1.5 template
'Happy Easter' - A Movie Trailer
'Martial Arts' Joomla 1.5 template
'Martial Arts' - A Movie Trailer
'Yacht Sailing' Joomla 1.5 template
'Yacht Sailing' - A Movie Trailer
'Space Rocket' Joomla 1.5 template
'Space Rocket' - A Movie Trailer
'High School' Joomla 1.5 template
'High School' - A Movie Trailer
'In Vino Veritas' Joomla 1.5 template
'In Vino Veritas' - A Movie Trailer
'Top Architect' Joomla 1.5 template
'Top Architect' - A Movie Trailer
'Spa Complex' Joomla 1.5 template
'Spa Complex' - A Movie Trailer
'Science Lab' Joomla 1.5 template
'Christmas Fantasy' Joomla 1.5 template
'Science Lab' - A Movie Trailer
'Christmas Fantasy' - A Movie Trailer
'Easy Cash' Joomla 1.5 template
'Easy Cash' - A Movie Trailer
'Make Money' Joomla 1.5 template
'Make Money' - A Movie Trailer
'Flight Simulator' Joomla 1.5 template
'Flight Simulator' - A Movie Trailer
'Global Logistics' Joomla 1.5 template
'Global Logistics' - A Movie Trailer
'Trip Navigator' Joomla 1.5 template
'Corporate Vision' Joomla 1.5 template
'Corporate Vision' - A Movie Trailer
'Disco Beat' Joomla 1.5 template
'Disco Beat' - A Movie Trailer
'Sweethearts Club' Joomla 1.5 template
'Sweethearts Club' - A Movie Trailer
'Cutting Edge' Joomla 1.5 template
'Cutting Edge' - A Movie Trailer
'Sun Skin' Joomla 1.5 template
'Sun Skin' - A Movie Trailer
'Yoga Style' Joomla 1.5 template
'Yoga Style' - A Movie Trailer
'Top Gear' Joomla 1.5 template
'Top Gear' - A Movie Trailer
'Joomla Freedom' Joomla 1.5 template
'Joomla Freedom' - A Movie Trailer
'Bikini Beach' Joomla 1.5 template
'Bikini Beach' - A Movie Trailer
'Chic Design' Joomla 1.5 template
'Chic Design' - A Movie Trailer
'Trip Navigator' - A Movie Trailer
install a Joomla 1.5 template
download a Joomla 1.5 template
Free CMS Templates from ThemZa.com
'Smart Head' Joomla 1.5 template
'Smart Head' - A Movie Trailer
'Keep It Fresh' Joomla 1.5 template
'Keep It Fresh' - A Movie Trailer
'Financial Calculator' Joomla 1.5 template
'Financial Calculator' - A Movie Trailer
'Business Affair' Joomla 1.5 template
'Business Affair' - A Movie Trailer
'Forex Trading' Joomla 1.5 template
'Forex Trading' - A Movie Trailer
'Daily News' Joomla 1.5 template
'Real Estate' Joomla 1.5 template
'Web Hosting' Joomla 1.5 template
'Feel the Music' Joomla 1.5 template
'Back to Nature' Joomla 1.5 template
'Mobile Solutions' Joomla 1.5 template
'Computer Society' Joomla 1.5 template
'Rise of Technology' Joomla 1.5 template
'England Soccer Fan' Joomla 1.5 template
'Website-Builder' Joomla 1.5 template
'Colourful World' Joomla 1.5 template
'Joomla Vortex' Joomla 1.5 template
'Spirit of Nature' Joomla 1.5 template
'Ski Club' Joomla 1.5 template
'Auto Mania 2' Joomla 1.5 template
'Auto Mania 1' Joomla 1.5 template
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.
III. 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.
VI. For the purposes of this video tutorial you must push the Edit CSS button in the top right corner.
VII. 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...
VIII. Open an FTP client of your choice and then start an FTP connection by clicking the client's Connect button.
IX. 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' folder.
X. Select its CSS folder. In the 'Spirit of Nature' folder...
XI. Browse to the template.css file.
XII. Right-click it and then select Properties from the options menu.
XIII. In the Properties panel - set the necessary writing permissions manually and hit OK to apply all changes.
XIV. Go back to the Edit CSS interface of your Joomla Admin Panel.
XV. Refresh your browser to see the Unwritable status of the template.css file turn to Writable.
XVI. 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? :-)
Video Tutorials
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.
III. 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.
VI. For the purposes of this video tutorial you must push the Edit CSS button in the top right corner.
VII. 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...
VIII. Open an FTP client of your choice and then start an FTP connection by clicking the client's Connect button.
IX. 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' folder.
X. Select its CSS folder. In the 'Spirit of Nature' folder...
XI. Browse to the template.css file.
XII. Right-click it and then select Properties from the options menu.
XIII. In the Properties panel - set the necessary writing permissions manually and hit OK to apply all changes.
XIV. Go back to the Edit CSS interface of your Joomla Admin Panel.
XV. Refresh your browser to see the Unwritable status of the template.css file turn to Writable.
XVI. 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? :-)