Help with embedded quote css

First, search the help docs and this forum. Maybe your question has been answered! The debugging steps can help, too. Still stuck? Delete this line and proceed.

What I’m trying to do

I’d like to apply css snippet for embedded quotes

Use case: I have a quote in one document, like

> Text. 
> Some more text.
> Done.

When I embed this quote in another note, the preview indents the quote as if it was >> instead of >, which doen’t look good, imo

Is there a snippet maybe I can use to remove the extra quote?

thank you

Things I have tried

I tried to look on forum and chatgpt help.

1 Like

In default theme you can see what i mean

Screenshot

As this will be on a case-by-case basis, I see two options you could consider and you could use both.

Hide the extra embed line(s) using alt / attribute text on a per-embed basis:

.internal-embed[alt*=no-2xbq] .markdown-rendered blockquote {
    border-left: transparent;
}

by adding |no-2xbq to your embed link as display text, e.g.,

![[my note#blockquote|no-2xbq]]


Use a cssclass to hide all extra embed lines in certain notes:

.no-2xbq .internal-embed .markdown-rendered blockquote {
    border-left: transparent;
}

and in the Properties/YAML of the notes where you’d like the inner embed lines removed:

---
cssclasses: no-2bq
---


If you wanted to do it universally across your entire vault, you could use

.internal-embed .markdown-rendered blockquote {
    border-left: transparent;
}

https://help.obsidian.md/Extending+Obsidian/CSS+snippets

2 Likes

thanks for your response

but i kind of hoped to delete the second indent or blockquote element
in other words i would like to upgrade these embeds as if they were blockquotes by their own right in their own document

i opened the dev window and tried to look around and in app.css as well…but frankly, i got lost…and chatgpt is no help

current workaround i can see is put all quotes in a big file and not use blockquote (> ) style on them and embed them, as in their original document right now they need to be blockquoted – but this workaround is impossible as the big md file will be impossible to edit when huge

thanks

Okay, I didn’t catch that in your original post. So, the issue now is the amount of indent from the main embed vertical line to the block quoted text, is that correct? You’d like the text moved left?

1c4541d9079549f5e2a28ce3d62864f389635a10_2_517x320


Here’s with padding-left: 0px; added (the screenshot has it for the top one only):

.internal-embed[alt*=no-2xbq] .markdown-rendered blockquote {
    border-left: transparent;
    padding-left: 0px;
}

.no-2xbq .internal-embed .markdown-rendered blockquote {
    border-left: transparent;
    padding-left: 0px;
}

2 Likes

okay,
using this

.internal-embed .markdown-rendered blockquote {
    border-left: transparent;
    padding-left: 0px;
}

globally.

but now the reading mode stays way indented still

my main concern was always reading mode

I asked the bot and tried to go trial and error but obviously the cssclasses used by the bot are outdated

thanks

okay, i fed some of the app.css to chatgpt and got some info i wanted (but i added my own margin line it missed)
so finally i tweaked it to suit my custom theme

.markdown-preview-view .markdown-embed-content .markdown-rendered blockquote {
    margin-left: -60px !important;
    padding-left: 12px !important;
}

this more or less looks like the normal blockquoted text:

the one above is my tweak of the embedded blockquote, the one below is a normal blockquote

using margin or padding on the right didn’t help though

Saw this today linked by our CSS wizard @ariehen:

  • Enable snippet and add |clean in the link.
2 Likes

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