Callouts lost of the vertical line and the enhaced color on the title

OXHusky · September 4, 2022, 10:11am

Hi,

After several searches on this forum and on the internet, I can’t find an answer to my question.
So I hope you can help me

I don’t now if it’s from the new release of Obisdian v0.16.2 but i have lost the vertical line and the enhaced color of the title of my callouts block.

on the Obsidian Help

Now on my vault

I have already try to change

the base color scheme
the themes

Is it possible to restore the display as in the Obsidian help?

Thank you for your help

efemkay · September 4, 2022, 12:04pm

Yeah. That’s the breaking changes of obsidian v0.16.x. The callout now by default has similar background color for both title and content as well as removing the “vertical line” u r referring to.

U can definitely have it back but must work out the custom css. Most theme would likely follow the new convention moving forward.

I dont have a ready snippets for such thing, but u can do it so by targeting the following css elements

.callout-title
.callout-content

For each above, add border-left: 4px solid var(--callout-color)

efemkay · September 4, 2022, 2:25pm

.callout {
    border-left-width: 5px;
    padding: unset;
}
.callout-title {
    padding: 0.5em 1em;
    background-color: rgba(var(--callout-color), 0.1);
}
.callout-content {
    padding: 0.2em 1em;
}

OXHusky · September 4, 2022, 4:25pm

Thank you !!!

OXHusky · October 13, 2022, 8:38pm

Just a return …
I added just a line to you suggested code to put the title color in white (like before the v 0.16.x)

.callout {

  border-left-width: 5px;

  padding: unset;

  border-left-color: rgba(var(--callout-color), 0.4);

}

.callout-title {

  padding: 0.5em 1em;

  background-color: rgba(var(--callout-color), 0.1);

  color: rgba(255,255,255);

}

.callout-content {

  padding: 0.2em 1em;

}

The result

I find this presentation more readable … but it’s just personal

One more time … Tanks for your help !!!