If you are planning to use the Protostar Template that comes with Joomla, or any other template, you can add your own custom.css stylesheet.

The example we provide here is for the Protostar template, so you may need to take slightly different steps for your own template.

The benefits of having your own stylesheet are:

  1. You are not altering the template.css, so you don't have to be concerned with digging around in this extremely long stylesheet.
  2. If you upgrade Joomla, it will overwrite the template.css stylesheet that comes with Protostar. You will have to replace the new template.css with your old one or recreate your styling.
  3. If you create your own stylesheet, it is clean, organized the way you want it to be.
  4. Your own custom stylesheet will only have the styles that you have edited or added.
  5. If its <link> tag is placed properly in the index.php, the styles established in custom.css can overwrite specific styling in template.css.

To utilize a custom.css stylesheet, follow these steps.

Step 1: Go into the installation files using FTP or the file manager with your hosting company.

Step 2: Open the folder titled templates, then a folder below it titled protostar.

Step 3: Copy the current index.php file and rename it to something logical - like index01-07-15.php

Step 4: Open up the original index.php file in a text editor. You may need to download it to your own computer for editing, then upload it after editing. Joomla 3.3 now has the ability to edit this file from within the template under  Template Manager, as well.

Step 5: Locate the following lines in the php section at the top of the index.php file

// Add Stylesheets
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');

Just below these two lines, add the following:

$doc->addStyleSheet('templates/'.$this->template.'/css/custom.css');

Step 6: Create a blank document using a text editor such as Notepad++ and name it custom.css, or whatever name makes most sense to you. Add whatever styling you wish to this file.

Step 7: Upload custom.css to the css subfolder under templates/protostar.

Now you can add your own styling, or override styling created by template.css, using the styling specified in custom.css.

Caution: Keep in mind that if you upgrade Joomla, it will overwrite the index.php file.  You may have to redo these steps with the new index.php file.