#1

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

block
block850×62 21.9 KB
block2
block2850×127 32.7 KB

2 Likes
#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

3 Likes
#6

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

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

how can you different styles of blockquote?