Customize Cassiopeia? Topic is solved

Be informed that this forum is not an official support forum for Joomla! 4.0. Any issues regarding Joomla! 4.0 must be reported at https://issues.joomla.org/.

Joomla 4.0 is still in Beta stage. This forum should be used for sharing information about Joomla! 4.0.

Moderator: ooffick

Forum rules
Locked
Overtone
Joomla! Apprentice
Joomla! Apprentice
Posts: 17
Joined: Mon Oct 07, 2019 2:37 pm

Customize Cassiopeia?

Post by Overtone » Tue Mar 24, 2020 6:49 am

Can I add a custom.css or do I need a custom.scss? Will Joomla compile the custom.scss or do I have to compile the file by myself? No documentation out there?

SharkyKZ
Joomla! Hero
Joomla! Hero
Posts: 2988
Joined: Fri Jul 05, 2013 10:35 am
Location: Parts Unknown

Re: Customize Cassiopeia?

Post by SharkyKZ » Tue Mar 24, 2020 8:44 am

SCSS compilation will not be supported. The custom CSS file should be called user.css.

User avatar
AlexVega
Joomla! Hero
Joomla! Hero
Posts: 2711
Joined: Fri Aug 28, 2015 6:13 am
Location: México

Re: Customize Cassiopeia?

Post by AlexVega » Tue Mar 24, 2020 5:07 pm

Hi there,

Yes, you can. Please read this info:
https://docs.joomla.org/J4.x:SCSS_and_Sass

Best Regards.

User avatar
nuxnix
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Thu Jan 28, 2010 6:09 pm
Location: Surrey, UK
Contact:

Re: Customize Cassiopeia?

Post by nuxnix » Sun May 24, 2020 2:43 pm

I was able to add a user.css to make simple customisations without editing the template itself in '‎4.0.0-beta1-dev'.

For example to set the background colour and remove the gradient .

Code: Select all

.container-header {
  background-color: #FFFFFF;
  background-image: none; }

User avatar
toivo
Joomla! Master
Joomla! Master
Posts: 17516
Joined: Thu Feb 15, 2007 5:48 am
Location: Sydney, Australia

Re: Customize Cassiopeia?

Post by toivo » Mon Nov 16, 2020 5:07 pm

Here is another example of user.css, setting the top margin of Submit and other buttons.

Code: Select all

/*!
 * CSS fine tuning
 */

.btn {
	  margin-top: .25rem;
}
Toivo Talikka, Global Moderator

gl68
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Fri Aug 13, 2010 11:09 pm
Location: Portugal

Re: Customize Cassiopeia?

Post by gl68 » Fri Sep 03, 2021 4:31 pm

hello!

thankz for the user.css tips. they work!
i am just trying to change the template color and it doenst seem to work?

my css knowledge is short and all i need it to change the color of the site links.

Any idea?
i have a user.css and also a custom.css but....

Thanks for your attention,
guida

User avatar
nuxnix
Joomla! Apprentice
Joomla! Apprentice
Posts: 7
Joined: Thu Jan 28, 2010 6:09 pm
Location: Surrey, UK
Contact:

Re: Customize Cassiopeia?

Post by nuxnix » Fri Sep 03, 2021 7:13 pm

Try something like this which is is from my user.css :

Code: Select all

a {
  color: #722206;
  text-decoration: none;
  background-color: transparent; }
  a:hover {
    color: #ce3d0b;
    text-decoration: underline; }

p-roos
Joomla! Apprentice
Joomla! Apprentice
Posts: 5
Joined: Fri Sep 06, 2019 9:31 pm

Re: Customize Cassiopeia?

Post by p-roos » Mon Sep 06, 2021 1:59 pm

You can also change the template colors in user.css, try this code (and change the color values) :

Code: Select all

:root {
    --cassiopeia-color-primary: #112855;
    --cassiopeia-color-link: #224faa;
    --cassiopeia-color-hover: #424077;
}

gl68
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Fri Aug 13, 2010 11:09 pm
Location: Portugal

Re: Customize Cassiopeia?

Post by gl68 » Fri Sep 17, 2021 7:50 am

Thank you for the answer, I have been pretty busy and that's the cause of these delays.

I am going to stick to these good tips

Thank you for your support,
Guida


Locked

Return to “Joomla! 4 Related”