Callout prism css no longer working?

[nickmilo]

[Please fill out the following sections as best you can to help describe the feature. Remove all [ ] bracket enclosed description/example elements including this one before submitting the request.]

Is your feature request related to a problem? Please describe. Yes. I think. Previously, I could use prism css to create custom callouts with a nice pop of color in the background of the callout title.

Here's an example of the code:

.callout[data-callout="album"] {
    --callout-icon: album;
    --callout-color: 151, 117, 250;

}

.prism-theme .callout[data-callout="album"] > .callout-title {
    color: var(--color-purple-text);
    background-color: hsla(var(--color-purple-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-purple-tint);
}

.prism-theme .callout[data-callout="album"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-purple-text);
}

.prism-theme .callout[data-callout="album"] > .callout-content {
    background-color: hsla(var(--color-purple-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-purple-tint);
}

Recently, in the past week, the intended background color is no longer rendering, looking like this:

I'm not sure if it's something I did, or if it's related to the insider build of v1.5.10 of Obsidian, or if it's related something else. But now it seems the controls to adjusting the .callout-title and the .callout-content are no longer working, for me.

Describe the solution you'd like I'd like to get the background color back in the .callout-title and the .callout-content

[damiankorcz]

Hi @nickmilo, I think you made a slight mistake when following the Wiki for Callouts customisations. Here it is corrected:

.callout[data-callout="album"] {
    --callout-icon: album;
    --callout-color: 151, 117, 250;
}

.prism-theme .callout[data-callout="album"] > .callout-title {
    color: var(--color-purple-text);
    background-color: var(--color-purple-base);
    border-color: var(--color-purple-tint);
}

.prism-theme .callout[data-callout="album"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-purple-text);
}

.prism-theme .callout[data-callout="album"] > .callout-content {
    background-color: hsla(var(--color-purple-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-purple-tint);
}

The background color in the .callout-title section should just be the standard color variable not the HSL one with the --callout-background-alpha variable dictating the transparency. The content area seems to be fine on my end as you can see below:

So unless you are augmenting the --callout-background-alpha variable somewhere, the content area should also look correct. I haven't made any changes to callouts in a while and as far as I can tell nothing changed with the recent updates.

[nickmilo]

Thanks for your fast response. There was another issue I couldn't figure out; but once I went back to an older save of Style Settings, the problem was solved. (I was trying to get Prism style callouts in all other themes, and probably broke something.)

[damiankorcz]

Hi @nickmilo, In case you missed it, I've made Prism style callouts available as a snippet to use with other themes recently: https://github.com/damiankorcz/Prism-Theme/blob/main/src/snippets/Prism%20Callouts.css

The documentation for them also got updated to describe how to handle custom ones when using the snippet: https://github.com/damiankorcz/Prism-Theme/wiki/Callout-Customisation