Css tag snippet colors in embedded block

Custom CSS & Theme Design
1

I have a “simple” snippet that makes a reasonable change to the color of tags and all. I got help with Claude.ai or something so it is probably overkill a bit.

.cm-s-obsidian span.cm-tag-next-step,
.tag[href^="next-step"] {
    background-color: rgba(255, 243, 173, 0.25) !important; /* Lighter yellow background */
    color: rgba(204, 153, 0, 1) !important; /* Darker yellow for text */
    font-size: 0.85em !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    margin: 0 2px !important;
    transition: background-color 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

On the page then I can see something like:

image
image302×116 1.99 KB

Not sure about the space but I like the color and all.

But, the problem is when I go to embed a block using ![[ block ]] the css snippet is not adhered to:

image
image364×138 4.53 KB

Is that a problem with my css code, or is that an Obisidian bug?

I would appreciate any guidance. Thanks!

2

Your second line is missing the “#” in [href^="#next-step"]. Adding it should apply the style to embeds too.

However, what you see in the editing views (your first image) won’t be the same as in rendered views (the embed in your second image and also callouts and Reading view). You can make it look more similar everywhere by writing CSS with both views in mind.

Incidentally, unless you have a theme or other snippets you’re trying to override, you can delete those !important markers. Your selectors have sufficient specificity for the default theme anyway.

1 Like