Callout border color, around content section only, displays white

[RedKimberly]

I followed your custom CSS coding to create the example nature callout and another one I created called people. The issue is the bottom border around the content is white instead of color, while the color is correct around the entire border of the callout title. I sincerely apologize if this is a rookie mistake, but I have spent hours searching for a solution. Any help would be greatly appreciated!

Here is the snippet for the one I created called people that has a pink border around the entire title, but white around the content:

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

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

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

.callout[data-callout="people"] {
--callout-icon: heart-handshake;
--callout-color: 224, 27, 185;

Thank you,
Kimberly

[damiankorcz]

Hi @RedKimberly,
Looks to me like you did everything right. I haven't had a chance to work on the theme in some time so there is a chance something has changed. When I have some time I'll try and look into a proper solution but for now you can get it working correctly by changing your snippet to this:

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

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

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

.callout[data-callout="people"] {
    --callout-icon: heart-handshake;
    --callout-color: 224, 27, 185;
}

[RedKimberly]

That fixed it - I should have just reached out to you a long time ago! Thank you for responding so quickly with a fix. I love your Prism theme, so I hope you continue to update it. I've tried several themes and always come back to yours 🙂.