How to change appearance of embedded note section

Custom CSS & Theme Design
1

Hi,

@ariehen helped me a lot with a css snippet, which allows to show the source title within the embedded file / file section (here is the original thread).

This is the result of that css snippet, when I embed the header “Library” of the note “Math” (source-mode view: ![[Math#Library]]):

image
image999×167 5.9 KB

what you see is in green color is the note title (“Math”) and the header (“Library”) of the embedded file section.

and here is the css snippet:

.markdown-source-view .internal-embed::before { /* .markdown-source-view um im Reading-view die source nicht anzuzeigen, nur im Live-Preview */
    content: attr(alt);
    font-size: 1.2em;
    font-weight: 500;
    color: rgba(67, 180, 54, 0.706);
}

Now here is my question

you see in the embeded note section “Library” twice:

  1. in green: as part of the css snippet, what is exactly how I want it
  2. in red: the header as it is implemented in core

Question 1:
Is it possible to get rid of the red header in the embeded note?

Question 2:
if that’s not possible, how do I have to modify that css snippet, to get rid of the green “library”?

Thanks in advance,
kind regards,
Silias

2

Hi SiliasOS :wave:

I’m glad the snippet is still going strong. I’m actually making use of it in a few places now as well.

Removing headings in embeds should be easy enough. Give this a try for all embeds and all heading levels:

.markdown-embed :is(h1,h2,h3,h4,h5,h6) {
    display: none;
}

Screenshot 2024-01-19 073859
Screenshot 2024-01-19 073859957×433 29.4 KB

An alternative, if you wanted to selectively remove the headings per-embed, you could try this version that uses alt/attribute text:

.internal-embed[alt~="no-heading"].markdown-embed :is(h1,h2,h3,h4,h5,h6) {
    display: none; 
}

and the embed link would be written as ![[math#library|no-heading]].

2 Likes
3

wow, this is beautiful!!! :heart_eyes:
Thank you very much! :slight_smile:

4

Not sure whether this matters in your use case, but I believe that CSS will remove any header in your embedded file. Not only the first one.

In other words if you had 7 headers in your file to embed, all 7 would disappear. This can, I think, be countered, but I’m not sure if it’s any point in your case or not.

1 Like
5

Yeah, this will wipe out all headers.

6

Hi,
now I’m at that point, @holroy pointed out: this css-snippet removes any header in all embeds in Obsidian… - which is kind of a disadvantage.

=> that brings up an alternativ question:
My issue is, if I embed a note-heading (e.g. ![[Math#Library]] like in the example from above, the string of the heading shouldn’t be visible twice (in the example from above: the heading “Library” is visible in green as result of the css-snippet AND in red as standard heading).

So instead of removing all the headings (the red “Library”) with an additional css-snippet, it would be better to modify the original css-snippet

.markdown-source-view .internal-embed::before { /* .markdown-source-view um im Reading-view die source nicht anzuzeigen, nur im Live-Preview */
    content: attr(alt);
    font-size: 1.2em;
    font-weight: 500;
    color: rgba(67, 180, 54, 0.706);
}

in that way, that only the file-titel would be included, but not the heading if the embed points to an heading.
=> that would mean to somehow delete the green “Library”.

Is that possible?

7

I’m a little uncertain whether the element you want to hide the embedded title or the first heading of the embedded section. If it is the former, then try the following:

.markdown-source-view .internal-embed .embed-title {
  display: none;
}