--cassiopeia-color-hover: stopped working Topic is solved

[marpleweb]

Since upgrading my sites to J4.4.2 and 5.0.2 the --cassiopeia-color-hover: code in user.css has stopped working.

Now my link hover color is the same as the link color.

In an earlier upgrade --cassiopeia-link-color: was changed to --link-color: causing a similar problem.

I haven't been able to figure out what has changed this time, so can anyone help please?

[cmbay]

Since upgrading my sites to J4.4.2 and 5.0.2 the --cassiopeia-color-hover: code in user.css has stopped working.

Yes, apparently there were some changes to the CSS files in these latest releases.

I haven't been able to figure out what has changed this time, so can anyone help please?

Use the web developer tool in your browser (F12) to determine which selector is overriding your user.css selector. You'll have to increase the specificity of or add some classes to your own CSS element.

[marpleweb]

Use the web developer tool in your browser (F12) to determine which selector is overriding your user.css selector. You'll have to increase the specificity of or add some classes to your own CSS element.

Thank you. That is what I did for a couple of hours before asking my question. Unfortunately it is pushing the boundaries of my understanding and I wasn't able to figure out what had changed or how to correct the situation. I was hoping someone with a little more expertise could advise me what has changed and how to resolve this please?

[cmbay]

Once you are familiar with the web developer tool, you can (more) easily get to the solution. For this recent update I noted that there was a change to the /media/templates/site/cassiopeia/css/template.min.css file. One selector in my user.css file was being superceded so I modified it from:

Code: Select all

.footer a {
color: var(--cassiopeia-color-primary);
text-decoration: none;
}

to:

Code: Select all

.footer a, .footer a:not(.btn), .footer .btn-link {
color: var(--cassiopeia-color-primary);
text-decoration: none;
}

Now it works as designed again.

[marpleweb]

I was only able to figure this out by looking at a site I haven't upgraded yet where the hover colour still works, and without your tip I wouldn't known what to look for. So, I've had to add the following to my user.css.

Code: Select all

a:not(.btn):hover {
  color: var(--cassiopeia-color-hover);
}

It is obviously similar to the issues you described but there is no way I would have figured this out on my own.

Thank you again for your help.

[Splatt3r]

Sorry, but since version 5.0.X and 4.4.X came out, nothing works with "--cassiopeia-color-hover:" like all the years in the user.css before. Until version 5.0.1 and 4.4.1 it could solved like this: viewtopic.php?f=815&t=1004868

Now under version 5.0.2 and 4.4.2 "--cassiopeia-color-hover:" does not work again, or only via the solution you described above. But this can only be a temporary solution.
The problem now also occurs with a completely new vanilla website. Neither in the "Standard" nor in the "Alternative" color theme does "color-hover" work. I hope that this is just a bug and will be fixed and that it will work reliably again in the future.

[Splatt3r]

I've opened a new issue.
https://github.com/joomla/joomla-cms/issues/42679

[Splatt3r]

Since Version 4.4.4 and 5.1.0 hover-color in cassiopeia is fixed and working again.
viewtopic.php?f=815&t=1004868&p=3719852#p3719852

For footer I've set in the user.css:

Code: Select all

/* footer - backgroundcolor and fontcolor */
.footer {
  background: #ddf0fa;
  color: #000000;
}

/* footer - hovercolor */
.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover, .footer .btn-link:focus {
  color: #484f56;
}