Note: If you are using the Protostar Template that comes with Joomla 3.4 or older, click here

The Protostar template that comes with Joomla is written so that you can create a stylesheet called user.css, place it in the css directory, and Protostar will find this file automatically without you having to edit the index.php file.

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. The styles established in user.css will overwrite specific styles in template.css.

Create a Custom Stylesheet Using Template Manager

The Protostar template does not come with a user.css file, so we must create one.

Joomla 3 allows you to create and edit files using the Template Manager in the Administrative Interface.

Extensions -> Templates

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. If you have copied your Protostar template and the copy is your default template, click on that name instead.

You should now be at the Templates: Customise screen. Be sure you are in the Editor tab.

Click on the css folder in the lefthand column, initially you will see only template.css inside the css folder 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 on the left side and select css from the File Type dropdown on the right side.

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

Screenshot of the Create File dialog box

The dialog box goes away and you will see a text editor with your new file opened and ready to edit.

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.

Joomla 3.5+ has added php code to index.php so that this file will be found without having to edit the index.php file. The user.css will be loaded after the template.css, so the styles in user.css may overwrite styles in template.css if they are set up properly.

Remember, if you wish to overwrite styles that came from template.css, you must match or exceed the elements, classes or ids that were specified in template.css.

Upgrading Joomla 3.5+

The user.css that you just created will not be overwritten if you upgrade Joomla in the future. This is because the new Protostar template that comes with the upgrade does not have that file inside its css folder. Any styles that you added to user.css will remain as is.

Has 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