"Naked" Embeds (CSS tweak)

Share & showcase
,
1

As per a request on the Obsidian Discord (shoutout to @scmwiz, @spacejunky, @kard32 and others) this allows note embeds to look as if they were part of the note in preview mode.
I’m not a huge fan of this approach, myself. I prefer to see the embedded note look a little different. But that’s just my personal taste.

Screenshot:

20200520113915
202005201139151239×447 59.8 KB

Instructions:

Copy the snippet into your vault’s obsidian.css file. It should be compatible with whatever other theme you have in there at the time.

/* Naked Embeds */
.markdown-embed-title { display:none; }
.markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; }
.markdown-preview-view .markdown-embed-content { max-height: unset;}
.markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0; }
.markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0; }
24 Likes
2

Is there a way I can remove the first header as well?
I tried putting in display:none; in the first-child, but it takes away everything :smiley:

4

I’ve tried the same but the embedded content disappears

1 Like
5

if you find a fix, please tag me :slight_smile:

1 Like
6

@death.au is there a way i can left align the embedded content?

it’s currently slightly indented to the right

7

Does this help:

.markdown-embed-content > div.markdown-preview-view, .markdown-source-view .markdown-embed, .markdown-source-view .file-embed {
    margin-left: -4px;
    padding-left: 0;
}
8

found the solution here: Obsidian-hacks/Block_reference_embed.css at main · 1stprinciples/Obsidian-hacks · GitHub

9

not really: the first alphabet gets cropped out, plus it doesn’t help when the embedded note has bullet points

10

I am not sure what you mean by that, but if it is that you don’t see the 1st letters of the embed anymore, then you should vary the margin-left number a bit.