Quote Block CSS

I’m looking to restyle the CSS for quote blocks. For those of you who have changed it, how do your quote blocks look?

1 Like

2 Likes

Here’s mine fwiw

5 Likes

Here is mine

1 Like

I mostly use quotes as highlighters/alert boxes:

3 Likes

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

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

Can you send me your css snippet?

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

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;
}
1 Like

how can you different styles of blockquote?

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

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

1 Like

Great! That’s exactly what I want.