PDF Export is ignoring YAML CSS class

[frvkl]

When using cssclass in the yaml frontmatter of a note, to facilitate custom styling for that note, the custom css is applied to the note/page, but is ignored in the PDF export.

For example:

YAML:

---
cssclass: h1_red
---

CSS:

.h1_red.markdown-preview-view h1{
	color: red!important
}
@media print {
	.h1_red.markdown-preview-view h1{
		color: red!important
	}
}

Note in Obsidian:

PDF Export:

[WhiteNoise]

I have replied to an identical bug report a while back.
Please, search before posting.

Also, if you need help, post in the help section first.

Export to PDF does not respect page-level CSS

Hi @WhiteNoise, thanks for writing back! Thanks for the tip regarding @media print {}. That works well to specify css that only affects PDF output. However, that doesn’t solve the problem I’m seeing. The issue is that export to PDF seems to be ignoring the cssclass: directive in the frontmatter. I can get regular css to appear in the PDF, e.g. h1 { color:green; }, but if I add a page-level class to the frontmatter using cssclass: it does not appear in the PDF. I’ve attached a mini-vault th…

[Craig]

Hi @WhiteNoise , thanks for your reply. This bug is still present in Obsidian. The YAML cssclass: directives are not respected when exporting to PDF.

Please let me know if you need help reproducing the bug.

[WhiteNoise]

It works for me and I posted a solution to your problem in the linked thread.

Post a screen recording of the css I provided on a vaniilla vault and print.

[Craig]

Sure, happy to help. Here’s a link to the screencast:

Obsidian cssclass issue 2021-06-16

Here’s what I demonstrate in the screencast:

• (offscreen) create new vault with no plugins
• (offscreen) add test.css and activate it
• Create regular note
• Observe that the header is green
• Print regular note
• Observe that header is green
• Add special CSS
• Reload Obsidian to force CSS to update
• Create special note with “cssclass: special”
• Observe that header for this note is now red
• Print special note
• Observe that printed header is still green

[WhiteNoise]

Ok, I managed to repro. Thank you!
I move this back to bug reports.

[midas0441]

I posted about this on Discord… now, I see it is also reported here.