#19

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

#20

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.

#21

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;
}
#22

@Keithm999: yep, that works fine. Many thanks for your help.

1 other question: would it be possible to search for a note on the basis of its colour? If so, what syntax should one use?

#23

As far as I can tell - no, but my Obsidian kung-fu is very weak. You probably would be better off asking “is it possible to find all code blocks of specific language?” in a separate post.

#24

Well, I am happy to tell you that I can give something in return for your idea of these coloured pages.

If you search for e.g. note-danger, or any of the other language expressions, Obsidian will find the note. That occurred to me in the middle of the night. :smiley:

1 Like
#25

Great, thank you! :slight_smile:

#26

Doesn’t using a code block limit many formatting possibilities?
I’m tinkering with HTML using block quotes for this use-case.

Anki Css & Notice-Blocks
#27

@NilsHempelof course it does, but what @mklepaczewski proposes is just a visual way to draw attention to a certain aspect of a note.

Another way to flag a particular aspect is to use a #tag.

#28

An example of this in use with an actively developed wiki would be the color codes on Super Memo Guru

1 Like
#29

Another, somewhat easier way of achieving a coloured paragraph is putting inline <p style="color:white;background-color:green">a paragraph of text text</p>.

3 Likes
#30

I had no idea you could just insert HTML like this! Works beautifully. I’ve made a couple of Keyboard Maestro macros which wraps selected texts, to give it the background.

Screen Shot 2020-08-21 at 09.18.51
Screen Shot 2020-08-21 at 09.18.511086×1120 178 KB

#31

You should put that in the Share & showcase forum.

#32

Just to link threads in the forum, I point out that there is already an admonition plugin request here

1 Like
#33

Awesome, thanks!

#34

My take on @mklepaczewski great notice blocks css, with the addition of pulsating gutter markers that can be used together or separately.

obsidian-css
obsidian-css805×503 88.1 KB

Usage in a note:

```bullet-pulse-red
```
```note-red
RED
```

A gist of the CSS can be found here gist

4 Likes
CSS for Obsidian to Anki
#35

I tried your CSS snippet but the text in the box has white shading.
danger
I use the default light theme and Obsidian 0.11.0.
Could you help me avoid this?

1 Like
#36

any solution to this issue? regarding the white shadow? @mklepaczewski

#37

i would agree, asciidoc would be necessary.

But for the solit here: why not use ‘note’ or ‘warning’ for the css names?

#38

Obsidian’s internal feature seems enough for me. I tried embed link to heading, combined with emoji icon.

![[foo#:bulb:tip1]]

file foo.md placing notice blocks.

##:bulb:tip1

here’s my tip.

Here’s some notice example

:bulb:Tip

Better comprehension to the text.

:memo:Note

A simple summary.

:information_source: Important

Don’t forget to Do sth.

:x: Caution

Don’t do that!

:warning: Warning

Dangerous operation!!

2 Likes