I want all #context/... tags to have a certain look to them, and the look to be consistent even in dataview.
Why is the tag being displayed by dataview query not colored with the selector from my css?
How could I add css to style ALL context tags to be blue, or at least the one in my example, without changing non-context tags?
A fellow newbie to CSS here, just sharing some things I recently learned: The snippets in the CSS window are ordered by priority, with highest priority at the top. So that big snippet (likely from the dataview plugin, it sounds like) has priority over your snippet. Why, given your snippet has important!? Because that snippet is selecting on something more specific: a.tag while yours is any .tag and CSS rules give more specific selectors higher priority, only breaking ties with !important.
I think you can use the comma syntax for multiple selectors (the way the dataview snippet has the greyedout selector at the top as well as the darker a.tag one that was actually selected), but that gets away from things I know into things I have to trial-and-error each time.
Hope the general ideas helped! Good luck!
Thanks! Those are useful ideas and help me to navigate a bit more.
However, I’m a concrete thinker and I need to see some examples to get the gist of it. So far, with Obsidian I see no way to learn other than by trial and error. It seems to me that a knowledgable obsidian programmer should be able to look at the screen pics I posted and be able to spit out exact css to select the element that I want. However, I have not yet met such a person and I don’t understand the DOM or whatever you would call what’s happening in the source and selector panes there. Why do the proper selectors borrow a little from each? Still pretty baffled.
Maybe I should crack open a theme and poke around there. Dear Obsidian: it’s not a sin to want to color text. Come on, man!
So I actually just pasted the code from the middle pane selector into my snippets file, added an href selector and it worked perfectly! I’m still confused but I hope I’ll get the hang of it eventually. I do take the point about specificity.
/* Color blue all `#context` tags in dataview lists */
body:not(.minimal-unstyled-tags) .frontmatter-container .tag, body:not(.minimal-unstyled-tags) a.tag[href*="#context"] {
color: blue !important;
}
Good for now! At least until I change themes, go into night mode, switch to Reader mode, or find another way to break it! LOL
Neat, didn’t know about the href thing! I do think you’d want to apply the href bit to the .tag right before the comma as well for consistency. Comma seems to work as an OR in CSS. So it’s saying when it finds .tag inside a .frontmatter-container (whatever that is) inside body OR when it finds a.tag inside body, change the color.
body:not(.minimal-unstyled-tags) .frontmatter-container .tag[href*="context"], body:not(.minimal-unstyled-tags) a.tag[href*="#context"] {
color: blue !important;
}
Definitely not a knowledgeable CSS/Obsidian programmer here, though! Just started learning this all very recently.
Thanks for the catch. I actually should delete what’s before the comma because I don’t want styled tags in my frontmatter which I think is what that is doing.
Yes it is very cool that the “href” and “class” attributes are available for css selection. I’m not sure what other attributes are selectable or inspectable. I suppose more time with the dev tools pane will be in order. :-). I like you am very new at this and it’s nice to discover together.
For this situation you can use the css variables that the theme use so it can work in more variables situations.
For exemple if the theme switch to dark the variables colors of the theme is goin to switch, so if you use them they are going tho be versatile
This is a snippet that i have make to phone where the button to change the view is fixed in bottom left of the screen, the background color and the icon color depend of the theme.
@media screen and (max-width: 36rem) {
.view-header {
position: static;
}
.view-actions > .view-action:first-child {
display: flex;
position: absolute;
right: 1rem;
top: 82%;
background-color: var(--background-primary-alt); /*Here is a css variable*/
width: 3rem;
height: 3rem;
justify-content: center;
align-items: center;
border-radius: 50%;
transition: all 250ms;
}
.view-actions > .view-action:first-child:hover {
transform: translateY(-5px);
box-shadow: 2px 2px 6px var(--background-primary); /*Here is another css variable*/
color: var(--text-highlight-bg) !important; /*And here is more css variables*/
}
}
Where contains var(–some-variable-name), is a css variable that contains one value, in this case a color, the value is dependent of the theme because the theme modify this value.
To elaborate on what @Shiinii is saying (and see if I understand correctly): What if you get a theme that changes your background color? Blue might be hard to see on a dark background. Would you still want that tag blue in that situation?
If not, you could potentially future-proof your tag color against this situation by picking from one of the color variables that Obsidian has specified for theme developers. Variables in CSS generally have the appearance var(--some-variable-name) and the ones that Obsidian has specified for theme developers to set for text colors look like var(--text-some-description). A specific example is var(--text-accent) which is I think the color links have in my vault. If I picked a different theme, I would expect links to change color but still be nice and visibly different from the rest of the text. I think the full list of color variables for theme developers to set is in a forum thread somewhere.
But! I suspect that if you’re coloring tags you do still want that tag blue if you switch to a dark background, or that you’d want to manually change your tag color scheme for visibility.
Variables might still be useful. If you end up writing multiple snippets that use the same color, you might still want to put it in a variable name just in case you do want to change your color scheme in the future.
body {
--my-context-tag-color: blue;
}
<..lots of things might go here...>
body:not(.minimal-unstyled-tags) a.tag[href*="#context"] {
color: --var(--my-context-tag-color) !important;
}
I suspect whether you end up using the same color in multiple places and therefore wanting a variable is still a question for the future, though.
Ah yes I’m aware that changing themes messes with stuff, and I intend to fix and discover those edge cases as I go along. For now, I’m just happy to get any tag coloring working in CSS at all.
Cheers! and thanks
