J3.x

Adding a custom CSS with Protostar

From Joomla! Documentation

Other languages:
English • ‎français • ‎Nederlands
Joomla! 
≥ 3.5

The Protostar template CSS can be modified directly in the Template Manager. But the issue with modifying core files for our own needs (Joomla or an extension), is that they may be overwritten by an update, and by the Joomla Update Component. So to avoid to add to CSS customisations again and again, here is a simple solution implemented since Joomla! 3.5.

Customise the template safely

  • Go to Extensions    Templates and again Templates (direct menu, or left sidebar). The default view is on Styles, be careful.

J3x admin templates manager templates-en.png

  • Then open the template Protostar, click on Protostar Details and Files.

Create a New File user.css

  • 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

J3x admin templates manager customise create new css-en.png

Now you are in a code editor, and you can put your custom code there. You only need to put the changed properties. J3x admin templates manager edit user css-en.png

  • Save, and you're done!

You can see them applied on your page, with the Developer tools of Firefox or Chrome. Firefox developer tools inspect user css-en.png

A Tip!

With any overrides, we are not sure in which order files will be loaded. And with CSS optimisers and compressors, it may not be how we want it. So we have to use Specificity in our CSS declarations. And this is well documented here

Stop hand nuvola.svg.png
Warning!

The file name must be user.css and notcustom.css, as it is used by some content editor.

See the discussion on GitHub for more details

https://github.com/joomla/joomla-cms/pull/4211#issuecomment-55096315