How to override the Joomla template.css file

Web Development

Override Joomla Header

How to override the Joomla template.css file

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 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

create-custom-css-file-screenshot

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

create-custom-css-file-screenshot2

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

Create-custom-css-file-screenshot

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.

Share this post