Snippet interaction: One snippet not working anymore

I have several snippets to add on to plugins, etc.

One is supposed to color specific tags a color, most importantly the one called “#important” is supposed to be red.
That snippet is this:

.tag {
  background-color: #d69bff;
  border: none;
  color: black;
  --text-a:                     var(--bright-orange);
  --text-a-hover:               var(--bright-blue);
  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: black;
background-color: #d69bff;
}
.tag[href^="#definition"] {
  color: white;
  background-color: green;
}
.tag[href^="#important"] {
  color: white !important;
  background-color: red !important;
}
.tag[href^="#lookup"] {
  color: white;
  background-color: blue;
}
.tag[href^=""] {
  color: white;
  background-color: #fbd349;
}

I’ve started using Chris Grieser’s theme “Shimmering Focus” as it uses multiple highlight colors, which I like. I’ve added several snippets onto this theme, such as that the three highlight colors that the theme uses are not the ones I’d like.
The code for that snippet is this:

:root {
	--highlight-color: #ffff0066; 
	--highlight-alt1: #00ff8866;
	--highlight-alt2: #ef99f0;
}

I’ve narrowed the problem (with the special tag colors) down to this above snippet and one that makes it so blockquotes are not italic (which would be the default):

blockquote {
	font-style: unset !important;
}

/* blockquote in edit mode */
/* more redable and easier to distinguish from rest of text */
.cm-quote{
  color: var(--more-contrast-muted) !important;
  opacity: 0.9;
  font-style: unset !important;
/*This dictates the blockquote background color of the words */  
  background-color: rgba(67,156,10, 0.2);
}
.cm-formatting.cm-formatting-quote{
  font-weight: 600;
  font-style: unset;
  background-color: unset;
}

If I disable snippets 2 and 3, snippet 1 works and the tags detailed in the code get that specified color. However, if I enable either (or both) of the other snippets, this no longer works.

I understand just enough code to know which bits to exchange if I want to switch a color, etc. but no further, thus I don’t know what I need to do so I can have all of these snippits enabled at the same time.

Thanks :slight_smile:

I downloaded the theme and your snippets … and everything worked fine (macOS 12 beta; Obsidian v0.12.15; Installer v0.12.15). Doesn’t solve anything, but…

1.css (701 Bytes)

2.css (100 Bytes)

3.css (462 Bytes)

image2

Untitled.md (162 Bytes)

Angel

I don’t know what you did, but I copied the relevant part of the tag colors over from the theme into the snippet again, and restarted the program, and now it works lol.

Thanks!

Good news. Happy to have helped a little.

Angel

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