Custom callout attributes

[vix_laz]

What I’m trying to do

I’m very new to Obsidian and CSS Snippets. What I’m trying to do is basically this:

[!customcallout | customword ]

I want to set on my CSS Snippet a set of words that I can insert in the markdown. And have a certain property change based on that.

In my case it’s background color. So have options such as blue, black, purple, etc…
And depending on what I write there it picks the hexcode from the list.

Things I have tried

Just about anything… ChatGPT and I are having a relationship crisis.

[DiCaver]

@vix_laz

customword

From this …

> [!CUSTOMCALLOUT]  customword
> Contents

… into this …

… you’ll need to create a custom plugin. Or use existing like this one:

Plugins - Obsidian

Cheers, Marko

[vix_laz]

Little follow up, I found a plugin that basically saved my life now. It lets me write in the YAML modifications on CSS

GitHub - ixth/obsidian-stylist: Obsidian plugin that allows to add classes and...

[dbeecham]

.callout[data-callout="customcallout"] {
   background-color: red;
}

or

.callout[data-callout-metadata="customword"][data-callout="customcallout"] {
    background-color: red;
}

is this what you are looking for?

[vix_laz]

I’m not sure?

I get that the [data-callout=“customcallout”] is interpreting the markdown of [!customcallout]. But where is customword? Where is it pulling that info from?

[vix_laz]

/*CSS*/
.callout[data-callout="customcallout"] {
     background: var(--background-color);
}


.callout[data-callout-metadata="Green"][data-callout="customcallout"] {
    --background-color:#009F8B;
}

[data-callout-metadata="Purple"][data-callout="customcallout"] {
    --background-color:#6C19CC;

/*Markdown*/

>[!customcallout|Green] Title
> "Content"

I tried something like this, but with no result… I was wondering if there’s some process like this

[ariehen]

This is working on my end:

.callout[data-callout="customcallout"] {
     background: var(--background-color);
}

.callout[data-callout-metadata="Green"] {
    --background-color: #009F8B;
}

.callout[data-callout-metadata="Purple"] {
    --background-color: #6C19CC;
}