Custom Link Color Not Working in Cassiopeia After Upgrading to J! 4.4.0 Topic is solved

[ludwig1]

I have the same issue, and my custom css is in the user.css file as
:root{--cassiopeia-color-link:#489324;}
It worked well until 4.4

[Jasper75]

I have the same issue, and my custom css is in the user.css file as
:root{--cassiopeia-color-link:#489324;}
It worked well until 4.4

Thank you for mentioning that you are having the same issue and for confirming that I haven't lost my mind.
My custom css is the following:

:root {
--cassiopeia-color-primary: hsl(41, 69%, 42%);
--cassiopeia-color-link: hsl(41, 69%, 42%);
--link-color: hsl(41, 69%, 42%);
--link-color-rgb: 181, 134, 33;
--cassiopeia-color-hover: hsl(91, 82%, 21%);
}

As in your case, my code was working fine until the 4.4.0 upgrade. I'm now wondering if it has something to do with the color values being expressed as HSL rather than in RGB or HEX.

As a side note, I'm wondering why this is so difficult to fix. Overrides seem to be very problematic and unnecessarily complicated with the Cassiopeia template.

[marpleweb]

I am having this problem on all my sites too since upgrading to J4.4 and I am using #html colours.

All the other colour changes I have used still work but not the link, so this seems to be a new bug.

Can this be fixed please?

[Coveri]

Apparently without warning, --cassiopeia-color-link became --link-color.
In order for the customization to work, in the user.css file you must, for example, force the color with the "!important" parameter.

Example:
--link-color: #d04515 !important;

[marpleweb]

Apparently without warning, --cassiopeia-color-link became --link-color.
In order for the customization to work, in the user.css file you must, for example, force the color with the "!important" parameter.

Example:
--link-color: #d04515 !important;

Thank you for highlighting that, it has fixed my problem. How on earth are we supposed to know this?

[gws]

Thank you for highlighting that, it has fixed my problem. How on earth are we supposed to know this?

The issue tracker is your friend.https://issues.joomla.org/

[Splatt3r]

I have the same problem in Cassiopeia.

Old Code in user.css (with Version 4.4.0 and 4.4.1 not working anymore)

Code: Select all

:root {

    --cassiopeia-color-primary: #000000;
    --cassiopeia-color-link: #132600;
    --cassiopeia-color-hover: #2d5506;
}

Only some of the new code ist working:

Code: Select all

:root {

    --link-color: #132600;
    --link-hover-color: #2d5506;
    --primary: #000000;
}

"--link-color:" and "--primary:" is working, but not "--link-hover-color:"

I tried it with "--link-hover-color-rgb:" and with "!important" behind it, but the hover color is still the standard template color (#424077)

Is the user.css not the way to go for this changes anymore?
Or is just something that has to be fixed because of the new bootstrap version?
Has someone an idea how to fix this?

[Splatt3r]

I found a solution that works, with Joomla! 4.4.X and 5.X.
Also the hover color, finaly.

/media/templates/site/cassiopeia/css/user.css

Code: Select all

:root {
  --cassiopeia-color-primary: #000000;
  --cassiopeia-color-link: #132600;
  --link-color: #132600;
  --link-color-rgb: 19, 38, 0;
  --cassiopeia-color-hover: #2d5506;
}

[AveclaCfdt]

Thank you

[Splatt3r]

The code must be adapted for Joomla 4.4.4 and 5.1.0.
The same code as under „‎/media/templates/site/cassiopeia/css/global/colors_standard.css“ must be entered, with your colors, of course.

/media/templates/site/cassiopeia/css/user.css

Code: Select all

:root {
  --cassiopeia-color-primary: #112855;
  --cassiopeia-color-link: #224faa;
  --link-color: #224faa;
  --link-color-rgb: 34, 79, 170;
  --cassiopeia-color-hover: #424077;
  --link-hover-color: #424077;
  --link-hover-color-rgb: 66, 64, 119;
}