INTRODUCTION:
Today I’m going to show you how to edit the template.css file within the Protostar template in Joomla.
SUMMARY:
This is a short tutorial to discuss how to edit the Joomla template.css file within the protostar template in Joomla. The purpose of this post is to educate web developers and designers on how to make custom CSS modifications to their templates. I found this to be quite helpful in converting a html website to joomla for my client Firedam Civil.
6 STEPS TO OVERRIDE ANY JOOMLA TEMPLATE.CSS FILE
STEP 1: Install the latest version of Joomla on your Local or Remote Server
You will find the latest version of Joomla here
STEP 2: Using Dreamweaver or Sublime Text, navigate to the templates CSS folder. In this example I’m using the Protostar template that comes pre-installed with Joomla. The template.css file is located here:
www/templates/protostar/css/template.css
STEP 3: Within the template CSS folder, create a new CSS file called custom.css
HOT TIP: I recommend making a copy of your template.css file and custom.css file regularly just in case you make any mistakes and need to revert back to the original file. The screenshot below illustrates this
STEP 4: Find your index.php file and make a copy. Like before this gives you something to revert back too should you make any mistakes. The index.php file is located here: www/templates/protostar/index.php
STEP 5: Find the “//Add Stylesheets” comment within the index.php file. Usually it should be around line 169.
Add the following line of code to your index.php file:
$doc->addStyleSheet('templates/' . $this->template . '/css/custom.css');
Save and close
STEP 6: Using your web development tools, Firebug, Sublime Text or Dreamweaver
- Find the style ID or CLASS you need to modify.
- Find the code in your template.css file.
- Copy the ID or CLASS code to your custom.css file.
- Make your changes and upload the custom.css to your local/remote server.
- The custom.css file is now overriding the template.css file
That’s it, simple right!
CONCLUSION:
I hope you enjoyed this short tutorial on how to override the template.css file in Joomla to apply your own custom styles to your website. If you enjoyed this tutorial on it assisted you with your web design project, please take the time to leave a comment below.
