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 » 'Auto Mania 1' Joomla 1.5 template
Video Tutorials
This movie tutorial will show you how to customize the Auto Mania 1 Joomla template.
Before starting to customize the template, you will need to first log into your Joomla Admin Panel.
Once you log in – 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 Auto Mania 1.
To do that – select Auto Mania 1 from the list of Joomla templates already installed in your Admin Panel and hit the Default button.
Next click on the name of the template to go to the Edit Template Panel.
You will now need to click the Edit CSS button in the top right corner.
If it says Unwritable for the template.css file, then you do not have any editing rights.
To edit the permissions you need to first open an FTP client of your choice and then start an FTP connection by clicking the client’s Connect button. In our example we use the FireFTP client.
Now look at the right section of your FTP client where the destination server folders are and consecutively browse to the Demo folder, then to the Joomla 1.5 and the Template folder, to finally open the Auto Mania 1 folder and select its CSS folder.
In the CSS subfolder of the Auto Mania 1 template folder – browse to the template.css file, right-click it and then select Properties from the options menu.
In the Properties panel – set the necessary write and execute permissions manually and hit OK to apply all changes.
Now go back to the Edit CSS interface of your Joomla Admin Panel and refresh your browser to see the Unwritable status of the template.css file turn to Writable.
Then select the template.css file and hit the Edit button in the top right corner of your screen.
The first customization option is to change the Page Alignment of the template.
To see the default page alignment – click-open the Preview link in a new tab.
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.
Now delete the MARGIN property line and hit the Apply button to confirm your update.
The template will be aligned to the left side of the screen, the default align position.
Then 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 screen side.
Now you will see how to change the link color of the template.
Back in the Joomla Admin Panel – go and search for the A LINK selector in the CSS file.
Using the Color Cop tool select a suitable color for the links.
In this example we choose to use the Light Blue color as it suits very well the template’s current color scheme.
Then copy the color code and paste it as a new custom value for the COLOR property.
When ready – hit the APPLY button.
Visit again the Preview Template page and refresh your browser to see the text links color change from the default RED color to the newly set one – LIGHT BLUE.
To edit the color of the text links when the user mouses over them – find the A:HOVER selector and paste the same color code into the COLOR property value slot.
Then hit the APPLY button to confirm all changes.
Open the Template preview page and move the mouse over any of the links on the template to see that the link color does not change.
Next let’s see how to change the color of the left column links.
Go back to the Joomla Admin Panel and locate the LEFT COL LINK selector in the CSS file, using the Search function of your browser.
Using again the Color Cop tool generate the preferred color and then use its code as a COLOR property value.
In this example we choose to set the LIGHT BLUE color that was previously set for the regular layout links.
When ready with the left column link changes – hit the APPLY button to confirm them.
Now go to the Template Preview page and reload your browser session.
Then pay attention to the left hand links of the template to see them turn from RED to LIGHT BLUE.
Next let’s see how to change the background color of the template.
Jump back to the CSS file and search for the #PAGE selector using your browser’s search function.
You can use 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 property value field.
Apply the change, then refresh your browser on the Template Preview page to view the newly applied background color updates. You will see the default BLACK color turn to WHITE.
The next customization option is to change the header color.
Now go to the CSS file and locate the H2 selector.
The H2 selector refers to the BIG titles on the template.
With the Color Cop tool – generate the preferred color code and paste it as a COLOR property value.
In this example we use the same color for the template header titles as the color of the links – LIGHT BLUE.
To apply all new changes – punch the APPLY button.
Now 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 BLUE.
The last custom option is to change the text size of the template.
In the CSS file – locate the BODY selector and then replace the font-size property value with the new custom value.
Again, hit the Apply button and then 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 property).
Here is a summary of all customization options for the AutoMania 1 template.
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 it. Now you know how to customize the layout of the Auto Mania 1 template. template.