thank you for the tip. However, it still is not showing up for me.
I see similar verbage here. What does cm mean, how do you choose which selectors to use?
first off, i forgot to mention how to target specific tag in editing view so the previous example require a bit more edit. on how to choose which selector, u r on the right track (by using dev console there).
just rule of thumb, when u select the element you want to format, make sure u have as many classes specified in your snippet. in picture below, i select tag with #obsidian tag and by default the app (evident by app.css:2522 notation) already formatted with .cm-s-obsidian span.cm-hashtag, so u want to match it or have more classes preceding it
here i took the liberty to work out your tag formatting. for custom tag, u can repeat the same block down there and just change the “”. for border-radius and padding, it need to be tackled separately due to how obsidian split between “#” and “”.
/* for whatever reason as i tested this, i need to put "initialise",
else the .tag below it won't be captured by obsidian.
if removing works for you, can just remove */
.tag { }
.cm-hashtag,
.tag {
background-color: var(--text-accent);
border: none;
color: white;
font-size: 11px;
text-align: center;
text-decoration: none;
display: inline-block;
padding-block: 1px;
margin: 0px 0px;
cursor: pointer;
}
/* border-radius and padding need to be separated as editing view
has split css selector for "#" and "<tag-word>" */
.tag {
border-radius: 14px;
padding-inline: 8px;
}
.cm-hashtag-begin {
border-top-left-radius: 14px;
border-bottom-left-radius: 14px;
padding-left: 8px;
}
.cm-hashtag-end {
border-top-right-radius: 14px;
border-bottom-right-radius: 14px;
padding-right: 8px;
}
/* i comment out background-color as it doesn't look good on hover
due to how obsidian split between "#" and "<tag-word>" */
.cm-s-obsidian span.cm-hashtag:is(.cm-hashtag-begin,.cm-hashtag-end):hover,
.tag:hover {
color: white;
/*
background-color: var(--text-accent-hover);
*/
}
/* attribute selector "$=" matches tags that ends with that word
where as "^=" matches tags that starts with that tag */
.cm-s-obsidian span.cm-hashtag[class$="obsidian"],
.tag[href^="#obsidian"]
{ background-color: #4d3ca6; }
.cm-s-obsidian span.cm-hashtag[class$="important"],
.tag[href^="#important"]
{ background-color: red; }
.cm-s-obsidian span.cm-hashtag[class$="complete"],
.tag[href^="#complete"]
{ background-color: green; }
.cm-s-obsidian span.cm-hashtag[class$="inprogress"],
.tag[href^="#inprogress"]
{ background-color: orange; }
i took the liberty to work out your tag formatting
This is exactly what I need help with. How do you decided to use what labels in what way?
I copied your example verbatim into my app.css file and restarted and it does not color #obsidian tags, although they now disappear when I hover over them.
I don’t understand important pieces of your example, such as what var() does or why you have to specify the “obsidian” class plus the “#obsidian” href.
How did you get from hovering over an element to
well, understanding obsidian inner structure does require self exploration and time. you can go through these pages. but in general .cm-s-obsidian span.cm-hashtag[class$="obsidian"] is for editing/live preview while .tag[href^="#obsidian"] is for reading view
Thanks! I’m a bit bummed that your example does not work for me. Any idea why your example would not work for me but would work for you (assuming you tested it)? No matter what I do, tags are just effing tags man.
I think what I’m going to have to end up doing for now is write a QuickAdd macro that just wraps text in an html style tag and color it that way. I just don’t understand snippets yet and apparently it’s not something you just pick up in a couple of hours of casual reading.
I use Minimal. Hmm… let me disable it. Yes, that’s the ticket! The code works as you describe if I disable it. My frustration was that it was not working at all. At least now I have a working example maybe I have a fighting chance. Is there a tweak I can make to address the fact that I use Minimal Theme?
Thanks!
As a side note, I did create a few Shell Commands that will color text easily. I think I’ll post that in a separate thread for those that might find it useful.