Popup preview of links, Embeds & Canvas: Narrowing to heading/block should follow cssclass of target note

[Olondre]

I first drafted this as a bug report, but silly me added the title last and then saw in “Similar Topics” that there was already a bug report for embeds in the bug graveyard (I only searched active bug reports prior) Embedding heading / block reference: CSSClass in YAML ignored
Unfortunately it seems that this is not seen as a bug given the comment by WhiteNoise, therefore I’ve created this feature request instead.
I will add my bug report draft below for further understanding.

Use case or problem

Narrowing a note to a heading or block via an Embed or through the Canvas does not apply the cssclass settings of the note.

Proposed solution

People put a lot of effort into making their notes look exactly how they want them to look, the specificity of cssclasses are a huge part of that, therefore I think that narrowing a note should still keep the cssclass settings intact.

Current workaround (optional)

None I’m aware of.

---

---

---

Steps to reproduce

1. Create a CSS Snippet with a cssclass and add it to the Sandbox Vault

2. Open Sandbox Vault and activate the snippet under Appearance

3. Create a note with the cssclass in the frontmatter and the heading and block needed for testing
   

   

4. Create a Canvas and add the note to it.

5. Narrow the note to heading/block
   

   

Expected result

I would expect that the CSS applied to the note via a cssclass is also visible if narrowed to heading or block.

Actual result

The css applied to a note via a cssclass are not visible if note is narrowed to heading/block in Canvas & Embeds.

Environment

• Operating system:

Windows 10
Obsidian v.1.1.16
Sandbox Vault

---

[Nilati]

It would be great if the css class stylings that carry over to the popup hover window from page links could be extended to also cover headings and block references. I love the window, and use it all the time as a memory jogger for terms, formulas etc., but only on a block level, so it would be a really nice addition imo.

[sailKite]

Adding support for this feature request, i think it would be quite helpful in many situations, especially for users who create highly modular sets of cssclasses to style their notes in various ways. Having this feature would help with uniformity of appearance and improve recognition of target file context at a glance.

[dmantisk]

+1
My use case is for customizing the preview window from a specific note by using cssclasses, but it currently works only if I link to the note rather than its headers.

I made a post asking for help with that, and was directed to this post.

[WhiteNoise]

renamed and consolidated

[christian_freet]

+1, for what it’s worth. I don’t understand the omission of ‘cssclasses property’ from the design and agree with the OP.

[Bloodbat]

I am very much enjoying the page preview/hover function native to Obsidian. However I am disappointed that internal wikilinks don’t have the CSS capability extended to it.

Where hovering [[example file]] will correctly show the CSS applied to that file. However if it is ‘[[example file#heading 1]]’, the page preview will show the isolated section, but strip all of the cssclasses/CSS applied to that original page.

I have looked around online and even attempted my hand at creating a custom plugin to fix this issue, but I have hit a dead end.

1. This is what it looks like with ordinary page preview, correctly showing the CSS
   

   

2. This is what it looks like when hovering the same file targeting a specific heading, the CSS has been stripped from it:
   

   

Any sort of update or assistance regarding this is greatly appreciated. Thank you!

[Sheepsy]

Agreed! I need cssclasses to function in header preview for my work. Thanks for your consideration.

[ksdavidc]

I am getting the same type of error with hover footnotes.

This is a test of what I want. If I apply it globally, I can see it.

/* test of footnotes */
div.markdown-embed.is-loaded[data-type="footnote"] div.el-p p {
/*margin-bottom: 0px;*/
 margin-block-start: 0px;
 margin-block-end: 0px;
 background-color: red;
}

div.markdown-embed.is-loaded[data-type="footnote"] ul.has-list-bullet {
 margin-block-start: 0px;
 margin-block-end: 0px;
  background-color: blue;
 }

div.markdown-embed.is-loaded[data-type="footnote"] div.el-blockquote blockquote {
margin-block-start: 0px;
margin-block-end: 0px;
 background-color: pink;
}

div.markdown-embed.is-loaded[data-type="footnote"] div.el-blockquote p {
margin-block-start: 0px;
margin-block-end: 0px;
background-color: orange;
}

If i try to apply it to a single note with this as my heading

---
cssclasses:
  - sharenote
---

and this css

/* for sharenote footnotes */
body .sharenote div.markdown-embed.is-loaded[data-type="footnote"] div.el-p p {
/*margin-bottom: 0px;*/
 margin-block-start: 0px;
 margin-block-end: 0px;
 background-color: red;
}

body .sharenote div.markdown-embed.is-loaded[data-type="footnote"] ul.has-list-bullet {
 margin-block-start: 0px;
 margin-block-end: 0px;
  background-color: blue;
 }

body .sharenote div.markdown-embed.is-loaded[data-type="footnote"] div.el-blockquote blockquote {
margin-block-start: 0px;
margin-block-end: 0px;
 background-color: pink;
}

body .sharenote div.markdown-embed.is-loaded[data-type="footnote"] div.el-blockquote p {
margin-block-start: 0px;
margin-block-end: 0px;
 background-color: orange;
}

body .sharenote {background-color: ivory;}

you can see that the last css gets applied, but not the footnote css:

[sharp.spoon]

Fixing this should literally be only a couple lines of code. Just add the css selector to the embed’s HTML in the appropriate place and it’s done. It should have just worked from the beginning. But here we are 3+ years later.