The Protostar template comes with template.css as the default stylesheet. This stylesheet is very very long and has many styles that seem to repeat themselves only with minor changes. Just like Joomla's core php files, this file will be overwritten when you upgrade your Joomla site and you will lose any edits that you made.

The Protostar template with Joomla 3.5+ has added code so that you can create a user.css file, place it into the css folder, and Protostar will find it automatically without having to edit the index.php file.

Why is a custom stylesheet a good idea?

  • it is much easier to keep track of your style changes
  • the user.css file will override styling created by template.css

Click here to read the bj.zemplate.com article: Add a custom Stylesheet to the Protostar Template

What do I do if I have already edited the template.css that comes with Protostar?

If you have already dug into the template.css and made changes to the existing styling, you have a couple of routes that you can take when upgrading.

Make a duplicate file of your edited template.css, call it something like template-edited.css before you run the upgrade. Always back up all of your Joomla folders and files and database before running an upgrade. Once the upgrade is finished you can take one of two steps.

Option A:

Rename the new template.css to templateORIG.css and rename your template-edited.css back to template.css

This is the easiest step, but it does have things to consider. If Protostar has made any changes to the layout or naming of the HTML elements in index.php or if Protostar has made styling changes in template.php, you won't get the benefit of these changes and/or your styles may not work properly.

Option B:

Add a link to your template-edited.css after the current link to template.css in index.php for Protostar. 

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

This is not a fantastic solution, as there can be conflicts if changes were made to the HTML elements in index.php.

These are not great solutions, but they will allow you to still use the edits you already made to template.css.

We really recommend that you put all custom styles into a separate style sheet. This way you know where and what they are. If you don't want to use a separated style sheet , at least put you new styles and any styles that override the included styles, at the very bottom of template.css. At least these will be easy to find and easy to copy over.

 


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.