Custom callout icons

Help
1

Things I have tried

What I’m trying to do

I’m trying to create a custom callout. Here’s the CSS:

.callout[data-callout="my-comment"] {
    --callout-color: 99, 71, 214;
    --callout-icon: lucide-message-square;
   //--callout-icon: message-o;  // font-awesome
   border: 3px solid rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   // box-shadow doesn't work - not sure why
   box-shadow: -20px -20px -40px rgba(255, 0, 0, .5);
}

I’m running v 1.1.12 of obsidian and latest plugins on Windows

I can’t get the icon to show. And the box-shadow doesn’t work either.

Icons seem to be a bit of a quagmire in obsidian. Knowing which icon sets (font awesome, lucide, etc) are available or how to reference them seems to be a dark art.

Does anybody have any suggestions on how to make this work?

2
  • I’m not too familiar with the icon sets myself, but lucide-message-square works over here.
  • For CSS comments, you’ll want to /* comment out like this */
    That seems to be the main issue here.
  • Not sure if box-shadow is how you want it to look, but the minus values don’t do anything for me.
.callout[data-callout="my-comment"] {
   --callout-color: 99, 71, 214;
   --callout-icon: lucide-message-square;
   /* --callout-icon: message-o; // font-awesome */
   border: 3px solid rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   box-shadow: 20px 20px 40px rgba(255, 0, 0, .5);
}

1

3

I forgot that CSS doesn’t allow double-slash comments. It also appears that once the CSS parser hits an error, it doesn’t process the rest of the block. I will chock this up to mostly carbon unit failure.

Thanks for the help. It all works now.

1 Like
4

Yes, the big problem was that unlike every other language in the world, CSS doesn’t support both the /* */ comments and the // comments. :smiley:

A negative value in the third parameters is incorrect. It’s a blur radius which cannot be negative (not a bottom offset as I assumed). Negative values in the first two parameters should make a difference.

5

There are plenty of languages using different comment styles, but that is beside the point. I just wanted to share an alternative I find myself using when playing around with temporary CSS, which kind of simulates the // comments.

.something {
  margin-bottom: 0px; /* */
  /* background-color: blue; /* */
}

By adding /* */ at the end of the line, with or without text inside, I can use /* at the front to comment out that line rather easily.

Only caveat is if you want to comment out the entire section as that end text will end any comment section, but if I want to do that, I usually just add a letter or two to disqualify the selector at the front.

6

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