Can't edit quote block colors

Custom CSS & Theme Design
,
1

What I’m trying to do

I don’t want my quote blocks to be the same color as my accent color. I want them to be completely untied from that dependency. I looked at several CSS tutorials and even copied code directly, but I can only ever get reading mode to do it, not edit mode.

Things I have tried

My css file currently:

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

/*Readmode*/
 .markdown-preview-view blockquote {
    background-color: #FDF6E3;
    border: 0px solid;
    border-color: #90241A !important;
    border-left-width: 2px !important;
    border-radius: 0 8px 8px 0;
    font-family: ;
    color: ; 
    font-size: ;
    line-height: ;
    margin: 10 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

I’ve never even used reading mode, so it’s not useful to me this way. I only copied that part to see if I could get anything at all working. I just need to set the live preview editor to a custom appearance with those same options

2

I’ve also tried

.cm-quote {
	color: #FDF6E3;
  }```
3

The code I was looking for was apparently

.HyperMD-quote {
  background: #FDF6E3 !important;
  border-left: 2px solid #90241A !important;
}

I suspect cm-quote is for editing the text inside the block, not the block itself.
Additionally, color: only edits the text inside, while I was looking for the color of the container itself, which is border-color and background

4

There are a few custom properties/variables for blockquotes you could play around with that cover both Live Preview and Reading views:

body {
    --blockquote-border-thickness: 2px;
    --blockquote-border-color: orange;
    --blockquote-font-style: normal; 
    --blockquote-color: hotpink;
    --blockquote-background-color: transparent;
}

If these don’t work out, there are other options.

5

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.