How to override the Joomla template.css file

Web Development

Override Joomla Header

How to override the Joomla template.css file


Today I’m going to show you how to edit the template.css file within the Protostar template in Joomla.


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.


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:


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:



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!


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

Leave a Reply

Your email address will not be published. Required fields are marked *

Let’s Get Started
close slider

Get a Free Quote

DevelopmentWordPressJoomlaSEOE-CommerceUpdatesVideo TutorialsOther

GoogleFacebookLinkedinForumsWord of MouthWebsiteOther