#1

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:

image
image1602×301 17.6 KB

PDF Export:

image
image1066×357 13.9 KB

#2

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.

#3

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.

#4

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.

#5

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

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
#6

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

2 Likes
#7

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