Notice blocks - warning, info, success, danger blocks

While I take notes, I often want to bring readers attention (my attention) to the information I deem especially important. Unfortunately, I wasn’t able to find anything like that, so I decided to do it myself by utilizing code blocks and custom obsidian.css.
Here’s my obsidian.css gist on github

Here’s how it looks like:

30 Likes

Matt, if one adds the code to a css sheet, and one then creates a note, what determines if and how the colour of that note?

Reminds me of Admonition Paragraphs from AsciiDoc and also of the limitations of Markdown… I wonder if Obsidian developers will ever bother to support AsciiDoc or RST.

Personally, I think using of <code> markup is not a very future-proof way. Why didn’t you use simple paragraphs with selectors for things like NOTICE: or WARNING:?

Those names are tedious, here’s a simpler way:

b= blue
y = yellow
r = red
g = green
n = neutral

.app-container pre[class*="language-"] {
border: 1px solid;
}

*[class*="language-note"]::first-line {
font-weight: bold;
}

.app-container pre[class*="language-"] code[class*="language-"] {
color: black;
white-space: pre-wrap; /* css-3 */
font-family: var(--default-font);
}

.app-container pre.language-r {
border-color: #bb0101;
background-color: #f3bcbc;
}

.app-container pre.language-b {
border-color: #3c78b5;
background-color: #d8e4f1;
}

.app-container pre.language-y {
border-color: #f0c000;
background-color: #ffffce;
}

.app-container pre.language-g {
border-color: #009900;
background-color: #ddffdd;
}

.app-container pre.language-n {
border-color: #cccccc;
background-color: #f3f3f3;
}

@Frederick_Lost: How does one get a note to have e.g. a red colour?

Hi Klaas, just write in Obsidian

```r
header of your note

body of your note
```

Hint: if you want to rename the color names (e.g. from ‘r’ to ‘red’), just change in obsidian.css:

.app-container pre.language-r {

to

.app-container pre.language-red {

and do so for all lines with pre.language- in it.

@a_wue: many thanks, that works.

2 observations:

  • if, after you have done a note like that, gone from Edit to Preview mode, then go back to Edit mode, and change the letter from e.g. r to b, it won’t show the change when you go back to Preview. You have to rewrite the note;
  • # Header text is not rendered as

Header text

it is left as Header text.

Honestly it was quick-dirty hack, that seems to work :slight_smile:

I’m not sure how those selectors would work though? As far as I know CSS doesn’t have content selector?

Well, indeed I saw the same behavior: only r worked correctly. But I thought, maybe that’s because of the theme I use in Obsidian, or some other strange setting in my pc.

After I changed r to red, b to blue etc, it was displayed okay. Does that work for you?

Hm… Personally I don’t like it. I agree that my naming could be better (especially ‘success’), but note class should have semantic meaning. If you decide later on that you want to change red (which depicts error, danger etc.) to yellow you’ll need to go over all your notes or have keep naming yellow note red.

@a_wue: I am not sure if I described the 1st issues well, but in any case changing the letters to words, does not change the behaviour.

Also, I don’t like the text in a white box.
I am on macOS.

@mklepaczewski: even though you did not answer my initial question, I’ll give you some feedback anyway.

What I like in your code is making the 1st line bold, that’s good for a header even though header syntax is not rendered as such.

I don’t like that the text appears in a white box - see screenshot in my previous comment. In your original screenshot that does not happen, so I wonder why it happens at my end.

I can’t reproduce it. I bet there’s some other CSS selector with higher specificity that overrides the text style. Can you try to enter CTRL+Shift+I (Cmd+I? dunno on Mac, sorry) and check background-color CSS property of the text?

I don’t think that’s a bug in CSS, looks like a bug in obsidian itself.

My solution is pure CSS and this sort of customization isn’t possible with it (at least as far as I can tell).

See screenhot, where is says in the bottom right-hand column that it is rgb(255, 255, 255);, i.e. white.

You’ll need to navigate to the text in the element itself. Please check https://youtu.be/Q4kB85vQNf0

1 Like

CSS used to have :contains() pseudo-class back in 2001, which is no longer the case, I checked. Feeling old. :expressionless: Sorry for misleading suggestion.

Tell me about it. I still haven’t upgraded from jQuery 1.x;)

Many thanks for posting that short vid. Unfortunately, when I open Cmd+Option+I, and upon selecting an element, the console does not show the 2 long columns that yours does.

I will leave this issue as it is because I will not try to resolve it right now seeing it is not something I can easily do.

I had the same issue with the white background on the text and it was caused by the theme I was using setting the background colour on code blocks like this:

.theme-light code[class*="language-"], .theme-light pre[class*="language-"],
.theme-dark code[class*="language-"], .theme-dark pre[class*="language-"] {
  white-space: pre-wrap;
  background-color: var(--code-block-background);
  margin-bottom: 3em;
}

You could just remove the “background-color” line from that block but that made all my code block have grey backgrounds which I didn’t like.

Instead, try using the following css:

.app-container pre[class*="language-note-"] {
	border: 1px solid;
	
}

/* Make the first line of note bold */
*[class*="language-note"]::first-line {
	font-weight: bold;
}

.app-container pre[class*="language-note-"] code[class*="language-note-"] {
	color: black;
	white-space: pre-wrap;     
	font-family: var(--font-family-preview);
	font-size: var(--font-size-normal);
}

.app-container pre[class*="language-note-danger"], code[class*="language-note-danger"] {
	border-color: #bb0101;
	background-color: #f3bcbc !important;
}

.app-container pre.language-note-info, code[class*="language-note-info"]  {
	border-color: #3c78b5;
	background-color: #d8e4f1 !important;
}

.app-container pre.language-note-warn, code[class*="language-note-warn"]  {
	border-color: #f0c000;
	background-color: #ffffce !important;
}

.app-container pre.language-note-success, code[class*="language-note-success"]  {
	border-color: #009900;
	background-color: #ddffdd !important;
}

.app-container pre.language-note-notice, code[class*="language-note-notice"]  {
	border-color: #cccccc;
  background-color: #f3f3f3 !important;
}