#1

Hello everyone,
I have tried my hand at improving the appearance of the inline block reference embeds using CSS :slight_smile:

Screenshots

Current Obsidian version

image
image865×253 28.5 KB

My version

image
image865×159 14.8 KB

Description

  • I have removed the padding and the lines from the top and the bottom to make it look like inline text.
  • I have changed the colour of the link icon to make it more prominent.
  • The idea is that I would like the embed to be indistinguishable from an inline text except for the embed link pointing towards the source.

Code

The code resides here

Edit: Some corrections to make the post more accurate :slight_smile:

14 Likes
Plug-in or CSS code to allow seamless block referencing?
Inline reference embeds
SOLVED Blockquote: how to extend to full text width
#2

@1stprinciples: what is the added value to create this now when we have block referencing built into Obs? I am not criticising, just trying to understand.

#3

Hey @Klaas,
Sorry about the confusion. I have updated the post to better reflect what I’m trying to do.

#4

Thank you so much. I looked for alternative of naked embed which was broken since 0.9.4.

#5

@1stprinciples: no problem. Your correction helped, although @jokysatria’s comment also helps.

I think the confusion arises from your use of the term “block reference”, which is a new feature added to Obs 0.9.6.

#6

I was consciously referring to embeds for Block references. I created this CSS hack to get flush, inline block references. After your comment, I realise that it also impacts any type of embed (link, header or block reference embed)

1 Like
#7

@1stprinciples: we’re on the same page now. Well done with the code :sweat_smile:

1 Like
#8

looks awesome! And hopefully if we get a way to distinguish between the embeds it will be even more useful. I put a feature request here: CSS classes for each embed type (page, heading, block)

2 Likes
#9

@1stprinciples: I don’t know if this is of interest:

/* eliminate scrollbars in transclusions */

.markdown-preview-view .markdown-embed-content, 
.markdown-preview-view .markdown-embed-content>.markdown-preview-view {
  max-height: unset;
}
4 Likes
Embeds without scrollbar (Resolved)
#10

So glad to have found this - thanks!

Do you have any solutions for also hiding the scrollbars in hover previews?

1 Like
#11

@joeshirley: no, sorry, I don’t.

#12

Ah well. Thanks for letting me know. If I figure out a solution I’ll add it here.

#13

@joeshirley: yes, please do because others may find it useful.

Yesterday I published my list of CSS snippets that you might find useful. It is nothing revolutionary, but you might pick up a thing or 2.

#14

Posting a question in Discord to see if anyone has suggestions. BTW, this works great in Publish as well.

#15

hello,
Can I use this with a CSS snippet? Or should I change the css within my theme file please?
thanks for the help.

#16

Is there a way to eliminate the title of block reference units? I guess I have read it somewhere (as a feature/css snippet request?), but I can’t figure out where. Help would be very much appreciated!

#17

@welstand: block references don’t have a title.

#18

Right! So maybe it’s the title of the note in which the block reference is. I have to check it!

#19

Are you sure you mean block reference and not header reference?

#20

@Klaas you were right! I’m sorry! I was referencing a section rather than a block. My bad!