frvkl
June 16, 2021, 11:13am
#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:
PDF Export:
1 Like
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.
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
June 16, 2021, 2:27pm
#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.
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
June 16, 2021, 7:46pm
#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
Ok, I managed to repro. Thank you!
I move this back to bug reports.
2 Likes
I posted about this on Discord … now, I see it is also reported here.