If you are using the Protostar Template that comes with Joomla 3.5 or later, click here

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 scrolling 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 do just replace the new template.css with your old one, you could miss out on crucial changes that were made with the new version
  4. If you create your own stylesheet, it is clean, organized the way you want it to be and only has the styles that you yourself have altered or created.
  5. If the link to it in the index.php is done properly, the styles established in custom.css can overwrite specific styles in template.css.

Create a Custom Stylesheet Using Template Manager

Joomla 3 has greatly improved how you can create and edit files using the Template Manager.

Extensions -> Template Manager

You will come to a page with a table of the installed templates for your site. The columns are Style, Default, Assigned, Location, Template and ID.

To create a Custom Stylesheet for the Protostar Template, click on Protostar in the Template column. 

Be sure you are in the Editor tab.

Click on the css folder in the lefthand column, initially you will see only template.css which comes with the Protostar template.

Up along near the top, click on the New File button.

A dialog box will drop down. Highlight the css folder and select css from the File Type dropdown.

Type the name of the new file - do not add the extension of .css, then select Create.

Screenshot of the Create File dialog box

You can also choose to upload an file from your own computer.

The dialog box goes away and you will see a text editor with your new or uploaded file.

You can add your styling right in this text box.

Now you have to add the link to this stylesheet to the index.php file so that Joomla will load it when it loads the web page in the browser.

Edit your index.php file to see the new stylesheet

Right here in Template Manager you may also edit your index.php file for your template.

You should ALWAYS create a backup copy of the index.php file before editing, but there is no option to copy a file in this section of Template Manager. You could create a copy using a separate ftp program or you can open the index.php file, hit CNTL+a to select everything then CNTL+c to copy all of the files content, then create a new file, choose a php File Type, name the file something like index3-5-14. When the empty file comes up select CNTL+v to paste the copied content into the new file. Hit save, then go back and edit the original index.php file.

In the Editor Tab of Template Manager: Customise Template, the list of folders and files on the left are the files inside of your template folder.

Click on index.php (after you made a copy of it) and the file will appear in the text editor.

Look for the line as shown below:

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

add this line just underneath, using the name of your custom stylesheet.

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

Now you can add your own styling or create styles that will override styling created by template.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. A way around this is to copy the entire template and make the copy your default template.


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.