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:

4 Likes

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

1 Like

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

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

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.

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!

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.

Yeah, why not :slight_smile:

I am interested as well @Klaas!

Are you in the Discord group?

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

See my reply to @PedroGonzalez.