#11

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.

#12

@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.

test
test1236×122 1.98 KB

#13

@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.

#14

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?

#15

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).

#16

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

bgr
bgr1084×656 98.9 KB

#17

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

1 Like
#18

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.

#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