Override defaults for nested blockquote font color and size

[lightstrong]

Operating system

macOS

Joplin version

3.1.24

Desktop version info

Joplin for Desktop

Copyright © 2016-2025 Laurent Cozic
Joplin 3.1.24 (prod, darwin)

Client ID: 0464f7fa404345529b791f00c55122fd
Sync Version: 3
Profile Version: 47
Keychain Supported: Yes

Revision: d581264

Backup: 1.4.2
Draw.io: 2.2.0
Editor Themes: 1.0.2
Extra Markdown editor settings: 1.8.0
Inline tags: 1.3.0
Joplin Calendar: 1.2.0
Quick Links: 1.3.2
Table Formatter Plugin: 1.2.1
Text Colorize: 1.2.5

Editor

Markdown Editor

What issue do you have?

I'm newish to Joplin, and so far loving it except for one thing: How do I change the rendered fonts for nested blockquotes to keep them all black and the same size? I have some lengthy outlines with 5 and sometimes 6 sublevels, and the rendered font gets so light and small I can barely see it. I've tried custom CSS in the userstyle.css file, inline css using the element, and have searched online and this forum, but so far no change. Here's the latest thing I tried in userstyle.css, but there were other iterations I found online as well. None of them worked. See screenshot for what I'm seeing, and thanks for any pointers.

blockquote {
font-size: 16px;
color: black
}
blockquote blockquote {
font-size: 16px;
color: black;
}
blockquote blockquote blockquote {
font-size: 16px;
color: black;
}
blockquote blockquote blockquote blockquote {
font-size: 16px;
color: black;
}

Screenshots

[Imperial_Squid]

Welcome to the forums!

Unless I'm mistaken, it's not that they get smaller or change colour, it's just an opacity thing.

Adding:

blockquote {
    opacity: 1;
}

to your userstyle.css will fix it. The reason for the issue is that each level of blockquote is taking the parent's opacity level and then further decreasing it.

Oh also, you don't need to have multiple copies btw, the blockquote selector will match the right elements at any level. Adding multiple levels like that is only useful if you need to specifically select blockquotes at a certain depth for some reason.

If you want to retain the faded text but not have it increase with each level, this should work instead:

blockquote {
    opacity: 0.7;
}

blockquote blockquote {
    opacity: 1;
}

This will set the top level quoteblock to have a faded opacity (0.7 is the original value), but any quoteblocks beyond the first level won't get faded any further.

[lightstrong]

That did it! Thank you!

I added your suggestion to userstyle.css:

blockquote {
opacity: 1;
}

And all my outlines are suddenly legible again.

Thank you very much for the help!