Need help with creating a custom callout style

[churnish]

I use a wonderful snippet for sleek callouts extracted from the AnuPpuccin theme.

How could I achieve the same look as the bottom callout but for content in all non-collapsible callouts? (I.e. hide title and show the icon off to the side.) I’d really like to be able to apply this look to multiple paragraphs (and you can’t put multiple paragraphs in a callout title). I’d like for foldable callouts to retain their style (the upper callout in the screenshot).

I was able to target non-collapsible callouts with .callout:not(.is-collapsible) but ran into issues with weird padding and uneven background color

CSS snippet

/*
Adapted from: https://discord.com/channels/686053708261228577/702656734631821413/1040275500297375856
Original author: Adonis, Anubis
*/

.callout:not(.is-collapsible) {
  padding: 0px;
}

.callout:not(.is-collapsible) .callout-content {
  padding: 0 var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding);
}

.callout:not(.is-collapsible) .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  cursor: pointer;
}

.callout:not(.is-collapsible) .callout-title .callout-title-inner {
  font-weight: normal;
}

.callout:not(.is-collapsible) {
  border-color: rgba(var(--callout-color), 0.4);
  border-width: 1px;
  border-radius: var(--callout-radius);
  background-color: rgba(var(--ctp-mantle), 0.4);
}

.callout-content {
  padding: var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding) calc(var(--callout-title-padding) * 1.5);
  border-top: 1px solid rgba(var(--callout-color), 0.4);
}

.callout-fold {
  padding-right: 0px;
}

.callout-title-inner {
  flex-grow: var(--anp-callout-fold-position, unset);
}

.callout {
  --callout-title-padding: var(--size-4-2);
}

.callout.is-collapsible {
  border-color: rgba(var(--callout-color), 0.4);
  border-width: 1px;
  border-radius: var(--callout-radius);
  background-color: rgba(var(--ctp-mantle), 0.4);
  --bold-weight: bolder;
  padding: 0;
}

.callout.is-collapsible .callout-fold {
  padding-right: 0px;
}

.callout.is-collapsible .callout-title-inner {
  flex-grow: var(--anp-callout-fold-position, unset);
}

.callout.is-collapsible.is-collapsed {
  padding: 0;
}

.callout.is-collapsible.is-collapsed .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  cursor: pointer;
}

.callout.is-collapsible.is-collapsed .callout-content {
  display: none;
}

.callout.is-collapsible:not(.is-collapsed) .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  border-color: rgba(var(--callout-color), 0.4);
  cursor: pointer;
}

.callout.is-collapsible:not(.is-collapsed) .callout-content:not(:empty) {
  padding: var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding) calc(var(--callout-title-padding) * 1.5);
  border-top: 1px solid rgba(var(--callout-color), 0.4);
}

.callout .list-collapse-indicator {
  margin-left: -35px;
  padding-right: 3px;
}

/* Normal text appearance for non-foldable callouts without content */
.callout:not(.is-collapsible) .callout-title:not(:has(+ .callout-content)) .callout-title-inner {
  color: var(--text-normal);
}

I found a snippet that achieves a similar look but was unable to reconcile it with the sleek callouts snippet:

Callouts without Title

Hi everyone, I’ve been looking for a while for ways to hide the title in some callouts, as I find them distracting and unnecessary for example for quotes. I’ve seen this workaround which works well if you just want to hide the title occasionally, but I really wanted a solution that just renders without the title out of the box. So I finally got this custom CSS going, which not only hides the title, but also moves the icon to the left of the content for clean callouts: [image] .callout[data-…

Any help appreciated!

---

Also asked on Discord and GitHub.

[dmantisk]

I don’t know how to target only the foldable version, but I know that you can use callaout metadata to ‘modify’ callouts.

.callout[data-callout-metadata*="fold"] {
	.callout-title-inner {
    display: none;
	}
}

The above snippet is used like this;

> [!NOTE|fold]
> asdasdas

So unless some else knows how to do what you want you can use a metadata for selective callaouts. (Or just create 2 different version of callouts)

[churnish]

Received good advice on Discord:

find all instances in the left snippet where it has the selector .callout and change those to .callout.is-collapsible

and if you want to be really explicit, you also would take all instances in the right snippet of .callout and change them to .callout:not(.is-collapsible)

But wasn’t successful in reconciling the two snippets. Ran into issues with inconsistent appearance between collapsible and non-collapsible callouts, with the latter having weird padding and white background still in some places… Don’t really know CSS to troubleshoot

[yen_le]

Hope this help.

So I have this callout kinda similar to yours. To keep the consistency, I have the following CSS, you can test to see if it match your expectation.

Change div.callout[data-callout-metadata*="#hl"] to whatever selection you want.

div.callout[data-callout-metadata*="#hl"] {
    > .callout-title {
        --callout-title-padding: 0.6rem 0 0.3rem 0;
    }
}

div.callout[data-callout-metadata*="#hl"].is-collapsed,
div.callout[data-callout-metadata*="#hl"]:not(:has(.callout-content)) {
    > .callout-title {
        padding-bottom: 0.55rem;
    }
}

[ahseyg81]

Hi!

I saw you discussing custom styling and the struggle with maintaining CSS snippets. I built a plugin called Special Callouts specifically to streamline this process.

Instead of dealing with raw CSS files, the plugin allows you to create your own custom styles directly within the plugin settings. Once defined, you can apply these styles to any existing callout using simple metadata tags

(e.g., > [!your-style] or [!NOTE](background:red , title: blue , text:green)).

It gives you full control without the headache of complex snippet management.

Current Status: The plugin is currently in the review queue, waiting for approval. In the meantime, I’m actively working on adding new features. If you want some “spoilers” on how the metadata styling looks in action, feel free to check out the images in the repo!

Here is the repo name: special-callouts

Feedback: I’m always open to feedback and new ideas. If you have suggestions like “it would be great if X worked like Y,” questions about usage, or just want to discuss a feature, please feel free to reach out or open an issue on GitHub. I’m eager to hear your thoughts to make this tool better!

Spoilers from the newly developing new version or features as per the pictures below!

Hope this helps!

[ahseyg81]

Hello everyone!
Just a quick heads-up: Special Callouts is now officially available in the Obsidian Community Plugins store, packed with some brand-new features.

If you happen to try it out, feel free to let me know what you think.
Happy note-taking!