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!
- List Of 5+ Best Woocommerce Digital Product Plugins - November 14, 2023
- 15 Best Education WordPress Themes in 2023 with Fully Responsive Layouts - November 14, 2023
- Best WordPress Black Friday & Cyber Monday Deals (Up to 90% off) - November 6, 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.
Hi there,
user.css works fine for me, but with one restriction which I cannot explain:
if i work on small media like smartphone (media less then 601px) user.css is not used.
Any ideas?
Dieter
Just give us your site to check.
Please try http://www.lionsclub-eutin.de.
Easy to see: if you reduce the window size then the header flips back to default.
Definition in user.css:
:root {–cassiopeia-color-primary: #6496C8;}
.container-header {background-image:none;}
I see you enabled CSS compress, try to turn it off.
Hi Kelvin,
thank you for your support and quick response.
user.css works perfect, it was my mistake not noticing a missing closing bracket after a @media(min-width:601px), so that all following styles were included.
Thanks a lot, you put me on the right track
Dieter
HI.
I have a problem that I can’t solve.
I tried with this code
.float-start {
float: none !important;
}
to eliminate the left image placement in the extended article but it doesn’t work.
Do I have any errors?
Thank you
Can you send me direct link to your issue?
I’m so sorry. I mistakenly saved the file I created in the main path instead of in the css folder