However, it is not coloring the tags the way I expect when hovered over. You can see the non-hovered tags are blue backgrounds, that’s what I want all the time. It appears that the :hover code I put into my file is getting somehow overridden, probably by the theme (I think that’s what the --var( --tag-bg2) bit means right?).
After the value force priority using !important .
Ex:
Thanks, apologies this is probably a FAQ but what is !important for please?
that’s exactly what I did if you look at the screen shots. I copied the selector and pasted it into my editor, added the :hover to the end, just as in your example actually, but it doesn’t change the behavior. Am I misunderstanding or doing it wrong?
When you have two or more css class, due to cascade, some children end up receiving values they shouldn’t.
With !important you will force this value to have higher priority than the others.
But if you want to overwrite it you will need to use !important too.
Because of this, using !important on long files is not a good practice.
I don’t know if you’re doing it wrong, but before using !important try this:
As you can see the :hover is with the variable --tag-bg-2.
Try to assign the value you want to it:
That also does not unlock the puzzle, no change with that. What a difficult case! I’m going to have to learn more about this, not going to let it go. I need a systematic way to debug this. Guesswork will take a long time and give unpredictable results. I would love to really understand what’s happening in that little code snippet.
Solved. I was using multiple .obsidian folders, and was editing the .obsidian.ipad/snippets/app.css file, which does nothing on my desktop.
Obsidian is powerful and confusing. Thanks for the help