Quote Block CSS

Share & showcase
3

Here’s mine fwiw

image
image1218×464 30.5 KB

5 Likes
4

Here is mine

Screenshot 2020-08-23 at 18.17.31
Screenshot 2020-08-23 at 18.17.311416×860 120 KB

1 Like
5

I mostly use quotes as highlighters/alert boxes:

image
image653×562 44.3 KB

4 Likes
6

Could you be willing to share the snippet for your quote block. It looks intresting.

1 Like
7

Can you please send me your css snippet for this style?

8

Can you send me your css snippet?

9

It is dark / light theme sensitive.

.markdown-preview-view blockquote {
    border-color: transparent;
    font-size: 95%;
    text-align: center;
    hyphens: auto;
    word-break: keep-all;
    color: var(--text-muted); # you need to define
    font-color: #aacdbe;
    line-height: 1.3;
    padding: 1px 2% 1px 2%;
    margin-top: 15pt;
    margin-bottom: 15pt;
}
1 Like
10

Here you go… apologies or the delay. I no longer use this snippet for my quotes, so I had to reconstruct it. This snippet works in both edit and preview modes. It is probably a mess if you know anything about css (I know just enough to be dangerous):

.cm-quote {
    color: var(--text-normal) !important;
}

.markdown-preview-view blockquote {
    background-color: transparent;
    border: 0px solid;
    border-color: rgb(126, 124, 124) !important;
    border-left-width: 8px !important;
    border-radius: 20px 8px 8px 20px;
    font-family: sans-serif;
    color: black; 
    font-size: 15px;
    font-style: italic;
    line-height: 1.5em;
    margin: 0 10px;
    padding-top: 12px;
    padding-bottom: 13px;
}

div:not(.CodeMirror-activeline)>.HyperMD-quote {
    background-color: transparent;
    border: 0px solid;
    border-color: rgb(126, 124, 124) !important;
    border-left-width: 8px !important;
    border-radius: 20px 8px 8px 20px;
    font-family: sans-serif;
    color: black; 
    font-size: 15px;
    font-style: italic;
    line-height: 1.5em;
    margin: 0 10px;
    padding-top: 12px;
    padding-bottom: 13px;
}
2 Likes
11

how can you different styles of blockquote?

12

I guess the trick is in html class…
see Changing coulour for the block around block-quote

13

we have callout now (Use callouts), easier to style that. in fact it has a number of presets already (including quotes) :wink:

1 Like
14

Great! That’s exactly what I want.

15

Could you share your CSS please? I’m having difficulties to edit the CSS code for blockquote as a whole, and set border-radius for the box and not line by line.
Thanks!

16

You are referring to a 3-year old post!! I have changed themes many times since and my CSS has evolved with it. If you are interested I can share what I am using now.

17

Yeah, why not :slight_smile:

18

I am interested as well @Klaas!

Are you in the Discord group?

19

Sorry for the late reply, I was away.
I am using the Listive theme, without CSS snippets. I do have customized snippets for 13 different themes; if you are interested in any of those, let me know which one(s).

20

See my reply to @PedroGonzalez.

21

Hello Klaas,

Apologies for my slow reply. Since I am rather new to Obsidian / Zettelkasten, I am open to your recommendations. Personally, I prefer dark themes if you have any.

22

Can you share the last blockquote CSS?