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
Create a CSS Snippet with a cssclass and add it to the Sandbox Vault
Open Sandbox Vault and activate the snippet under Appearance
Create a note with the cssclass in the frontmatter and the heading and block needed for testing
Create a Canvas and add the note to it.
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.
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.
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.
+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.
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.
This is what it looks like with ordinary page preview, correctly showing the CSS
