Callout icon and color doesn't change for a custom callout with metadata

[cMepTHuk]

Following custom callout works perfectly fine

	.callout[data-callout="test"] {
    --callout-color: 0, 0, 0;
    --callout-icon: lucide-lightbulb;
}

However, after adding metadata to the title, which I need for a gallery, both icon and color revert to default:

	.callout[data-callout="test|gallery"] {
    --callout-color: 0, 0, 0;
    --callout-icon: lucide-lightbulb;
}

It looks like a bug, however on the Bug reports page it’s said that issues with css can’t be a but.

[ariehen]

The CSS for alt/attribute text is data-callout-metadata="". e.g.

.callout[data-callout-metadata="gallery"] {
    --callout-color: 0, 0, 0;
    --callout-icon: lucide-lightbulb;
}

Then you can use |gallery] on any callout type to set that style.

[cMepTHuk]

Thank you, I understand that, but it’s not the problem I’m trying to solve - I’m frequently using image gallery custom css snippet which uses custom metadata gallery to make series of image a gallery:

And I want to have pre-made gallery callout, with the metadata already specified.
It works, but the color and icon of the callout are reverted to default with any specified metadata:

[ariehen]

What was I trying to indicate in my previous post is that I’m fairly certain .callout[data-callout="test|gallery"] is not going to work. The attribute/alt/metadata section needs to be written differently.

In any event, with the MCL gallery snippet enabled and adding this in my own snippet file:

.callout[data-callout-metadata*="gallery"] {
    --callout-color: 0, 0, 0;
    --callout-icon: lucide-lightbulb;
}

this is what I’m seeing on my end:

Be sure to reload Obsidian or close-open the note when making callout icon changes. They don’t show immediately when saving the .css file like changing the color does.

[cMepTHuk]

Thank you so much, indeed works. So it’s styling callout based on metadata, not on name, haven’t realized that the first time.

[ariehen]

@cMepTHuk

So it’s styling callout based on metadata, not on name,

Yup. You can do either.

Glad it worked out.