Introduction
When you use the Cassiopeia template, the user-defined file is often called the user.css file instead of the custom.css file like many other templates.
Basically, you can easily make changes to the CSS file directly in Cassiopeia. However, in the process of updating Joomla, have you ever encountered a situation where these CSS files were overwritten? To overcome this situation, it’s a good idea for you to generate a user.css. Thanks to this file, you needn’t fear being overwritten in any updating situation.
Now, let us show you how to create custom CSS with Cassiopeia.
The way to Create custom CSS with Cassiopeia in Joomla 4
First of all, let’s log in to the admin dashboard. After that, you simply go to System -> Site Templates (in the Templates section).
Now, you need to open the Cassiopeia template or its copied version. Just click on Cassiopeia Details and Files, for example.
Next, let’s press on New File button.
A small window will appear for you to set up. So, you simply select the CSS directory on the left side of the screen.
Now, in the File Name box, let’s type ‘user‘. Next, just choose ‘.css‘ in the File Type box. Finally, don’t forget to click on Create button.
Joomla has already generated the user.css file for you. You can edit it in templates/cassiopeia/css/user.css (in Joomla 4 with 4.0.x version).
If your Joomla site has already been updated on the 4.1.x version, the user.css file will be in the /media/templates/site/cassiopeia/css folder. So, let’s take a look.
Wrap Up
In conclusion, with the instruction in the blog today, we believe that you can easily and quickly create custom CSS with Cassiopeia in Joomla 4. If you have any difficulty or any question, don’t hesitate to ask for help by leaving your comment below. Furthermore, if you have an intention to renew your Joomla site appearance, don’t miss many Joomla 4 Templates here. They come with a responsive, well-organized, and professional layout, so they won’t let you down!
- 5+ Best Activecampaign WordPress Plugins - May 29, 2023
- 5+ Best WooCommerce POS Plugins (Free & Paid) - May 25, 2023
- WPML vs Polylang: Which is the better WordPress Multilingual Plugin? - May 22, 2023
Awesome tutorial, thank you!!!
You’re welcome. Glad to help!
Sorry, but to my experience the description is incomplete. The file user.css is created //templates/cassiopeia. The css files, in my version of Joomla 4.1, are in /media/templates/site/cassiopeia/. So I had to move the file user.css into this directory to make it work. I was unable to create the file in the target directory direct.
Gerard
I don’t think ‘templates’ folder move to ‘media’, it should be at root of Joomla! source code.
Gerard Rozing is correct! Joomla 4.1 (release) breaks Joomla 4.0X. The ‘user.css’ file should be placed in /media/templates/site/cassiopeia/css and NOT in /templates/cassiopeia/css as suggested in this article.
Thank you very much for your confirm. Yes, we recheck and see it now, look like it’s new change with template structure.
You are right! On my new install of joomla 4.1, /media/templates/site/cassiopeia/css/user.css worked.
So now, I am afraid upgrade my other website to Joomla 4.1. I am so glad I ran across this page!
A second comment…. my live site is already upgraded, and user.css is NOT in the media folder, but in the traditional place. What gives?
Just confirm: From 4.1.x version, the user.css file will be in the /media/templates/site/cassiopeia/css folder.
We updated this change log from our blog content.
Many thanks for all your feedbacks.
How exactly it works? Where cassiopeia have a script that include user.css file automaticly?
I can see: . Can someone explain how it works?
Yes, this file included as Custom CSS automatically.