How do I add my own CSS?
In Cassiopeia, create the file user.css in System → Site Templates → Cassiopeia → New File; it loads automatically. Other templates have a Custom CSS option.
Why not edit the template files
Template updates replace the template's own CSS files, so changes made there disappear. Cassiopeia (the Joomla core template) loads a file called user.css if it exists, and updates never touch it.
Cassiopeia
- Go to System → Site Templates → Cassiopeia Details and Files.
- Open the css folder and click New File.
- Name it
user, choose the type .css, and click Create. - Add your CSS, for example
h1, h2 { color: darkgreen; }, and save. - Reload your site with Shift + Reload.
Other templates
- Most commercial templates have a Custom CSS field or a
custom.cssfile; check the template's documentation. - For bigger changes, create a child template: it keeps your changes separate and inherits everything else.
Good to know
- For JavaScript, Cassiopeia also loads
user.jsfrom its js folder. - Check colour contrast when you change colours: Joomla's accessibility checker helps.
Sources
- Cassiopeia Customisation – Joomla User Guide
- Child Templates – Joomla User Guide
