How to color a certain tag pink?

Things I have tried

I put this into a file called app.css:

.tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
.tag[href^="#important"] {
  background-color: red;
}
.tag[href^="#complete"] {
  background-color: green;
}
.tag[href^="#inprogress"] {
  background-color: orange;
}

I then created a tag in a file #obsidian and voila! Nothing happened. My #obsidian tag is not a nice color, when I thought it would be #4d3ca6

2022-06-07.10.01.17.CleanShot.Obsidian

I have reloaded the file, restarted obsidian, and it is enabled in the Appearance settings.

this is obsidian on MacOS if that matters.

What I’m trying to do

I’m trying to follow this post: How to create pill-style tags for diplay and export - #2 by looper
Why are my selectors not working? I totally do not understand how to apply css yet to anything at all. :stuck_out_tongue:
Thanks for any help!

u modified tag formatting for reading view, and i believe u tested to see in editing view.

add this .cm-s-obsidian span.cm-hashtag, before your every .tag e.g.

.cm-s-obsidian span.cm-hashtag,
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}
1 Like

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?

Here is the full contents of my app.css:

.tag {
  background-color: var(--text-accent);
  border: none;
  color: white;
  font-size: 11px;
  padding: 1px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
  border-radius: 14px;
}
.tag:hover {
color: white;
background-color: var(--text-accent-hover);
}
.cm-s-obsidian span.cm-hashtag,  
.tag[href^="#obsidian"] {
  background-color: #4d3ca6;
}

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 “”.

if u r using on top of community theme, u need to increase the css specificity (CSS Specificity (w3schools.com))

    /* 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; }
1 Like

[quote=“efemkay, post:4, topic:38589”]

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. :stuck_out_tongue:

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

 .cm-s-obsidian span.cm-hashtag[class$="obsidian"],
    .tag[href^="#obsidian"]
        { background-color: #4d3ca6; }

Thanks for all your help, I really think obsidian needs to deal with simple formatting way better. This is really ridiculous for coloring text! LOL.

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

Understanding and getting around Obsidian CSS

Forum Posts on CSS hack/snippet

3 Likes

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.

2022-06-07.19.35.08.CleanShot.Obsidian

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.

css to me is one of the easiest coding, but still require some “study” especially when used with apps like obsidian…

anyway, i’ll give u one more try. what theme are u using? i believe that’s what making the snippet not work

1 Like

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. :slight_smile: 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.

And I just found a tutorial that teaches me how to cook up my own CSS that does work and assemble into a working file. I haven’t seen it referenced around here but it’s great. https://projecteme.medium.com/how-to-customise-your-own-obsidian-css-in-3-steps-ae319e53f5d4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.