I know the first block is selecting tags. How do I correctly format the .tag[href] bit, I’m thinking that is where I’m going wrong. I copied the style out of the dev tools.
/* General tag code */
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag, body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag:hover {
background-color: #a8cce166;
color: rgb(60,40,40);
}
/* why doesn't this color my #context tags blue? */
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag .tag[href]^="#context/"] {
background-color: #a8cce166;
color: blue;
}
The selectors are so mysterious.
What I’m trying to do
I want the #task tag to be grey text and the #context tag to be blue text.
The first problem I’m seeing is with the brackets. In the end of your #context selector there is one open bracket ([) and two close brackets (]). Start by removing the the first close bracket. Your selector should look like this
Second problem I’m seeing is with the “background-color” property in #context selector. It’s not in HEX or any other color format I know. You should fix that as well. “#a8cce1” is an accepted HEX color, “#a8cce166” is not.
If by any chance the tags weren’t as desired after the fixes, you could try adding !important at the end of your CSS lines to overwrite any previous configs. The final code should look something like this
Thanks for the catch on the bracket. Fixing that does not change the problem.
/* General tag code */
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag, body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag:hover {
background-color: #a8cce166;
color: rgb(60,40,40);
}
/* why doesn't this color my #context tags blue? */
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag .tag[href^="#context"] {
background-color: #a8ccff66;
color: blue;
}
“#a8cce1” is an accepted HEX color, “#a8cce166” is not.
this is not correct. Each two characters are a color channel. This is an rgba value. The final two digits are for transparency. In the first block if you check there are also 8 digits and that value works fine.
Anyhow, it doesn’t matter what value I put in there, I can make them both white and it won’t do anything. So for example this is the same effect:
/* why doesn't this color my #context tags blue? */
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag .tag[href^="#context"] {
background-color: green !important;
color: blue !important;
}
Why does the second block have no effect? It looks like it should work, it’s just the same as the first block but with the .tag[href] business. But I am new to the CSS world and it’s a little bit confusing all these special selector formats and markers still.
I was going to say hey I’m in editing view and that simple selector won’t work. But I tested it and guess what? You are right, thanks so much. It was THAT EASY.
For the editing view, I guess it would depend on the theme you are using.
Based on the selector you provided, I thought it had something to do with the Minimal theme since I couldn’t find anything like body:not(.minimal-unstyled-tags) in the vanilla theme. But I gave it another look and it seems that Minimal follows the same appearance settings as the other ones. There’s a class in each tag that contains the “value” of your tag which you could use for styling purposes even in editing mode.
The code below applies the properties to every element that’s got cm-tag-context in its class. So in your case, any tag that beings with context will have said settings in editing mode.
[class*="cm-tag-context"] {
background-color: #a8cce166 !important;
color: blue !important;
}
it seems that Minimal follows the same appearance settings as the other ones. There’s a class in each tag that contains the “value” of your tag which you could use for styling purposes even in editing mode.
Thanks! I have noticed this “cm-” patterns with css in Obsidian. Where does this notation come from and what does it mean? Is there a resource I could check into that delves into the css classes in Obsidian and their meanings and how to use them?
I appreciate your pearls of wisdom. I’ll be posting next on how to select text in a but let’s put that in a new thread because I think it’s a harder case. Right?
“cm” probably stands for Code Mirror. Which acts as a base for Obsidian’s text editor. If you wish to find resources to tweak Obsidian using CSS, I suggest you start with this thread and make your way up from there.
“cm” probably stands for Code Mirror. Which acts as a base for Obsidian’s text editor.
Aha, thanks, interesting.
I asked
Is there a resource I could check into that delves into the css classes in Obsidian and their meanings and how to use them?
You said
If you wish to find resources to tweak Obsidian using CSS, I suggest you start with this thread and make your way up from there.
Thanks I’ve been to that thread a few times but it is good to re-read it after a while with fresh eyes. It does not “delve into the css classes in Obsidian and their meanings and how to use them.” But it is definitely more useful than I remember and I thank you for making me look harder at it this time. The problem is that it’s an old thread and some of the information is inaccurate now. At some point this merits some sort of more structured documentation perhaps.