Adding a custom CSS with Protostar
From Joomla! Documentation
The Protostar template CSS can be modified directly in the Template Manager. The issue with modifying Joomla core files for our own needs is that they may be overwritten by an update. To avoid the need to repeatably add CSS customisations, there is a simple solution implemented since Joomla! 3.5.
Customise the Template Safely[edit]
- Go to Extensions → Templates and again Templates (direct menu, or left sidebar). The default view is on Styles.
- Click on Protostar Details and Files to open the template.
Create a New user.css file[edit]
- Click on the New File button.
- It opens a modal window. Select the location of the file, here the css folder on the left.
- Type user in the name field.
- Select css as the file type.
Now you are in a code editor, and you can put your custom code there.
You only need to put the changed properties.
- Save, and you're done!
You can see them applied on your page, with the Developer tools of Firefox or Chrome.
With any overrides, we are not sure in which order files will be loaded. With CSS optimisers and compressors, it may not be how we want it. So we have to use specificity in our CSS declarations.
The file name must be user.css and not custom.css, as it is used by some content editors. See the GitHub discussion for details.