#1

Steps to reproduce

  1. Create some content in a page.
  2. Include a custom css class in the YAML frontmatter, e.g.:

Page.md

---
cssclass: green-headings
---

# This is a header

obsidian.css

.green-headings h1 {
    color: green;
}

Expected result

The exported PDF includes the custom CSS styling, just as it does for the default obsidian.css. (in this example, H1s would be green.)

Actual result

The exported PDF does not include the custom CSS styling. (In this example, H1s are black.)

Environment

  • Operating system: Ubuntu 20.04
  • Obsidian version: v0.10.0
1 Like
#2

To modify how pages are printed you need to change the ‘@media print’ part in css

1 Like
#3

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 that demonstrates the issue. To see it, unzip the vault and load it in Obsidian, and see that “Regular Page” has black headers and “Special Page” has green headers using the cssclass directive. Then export “Special Page” to PDF and observe that the PDF headers are black, not green.

cssclass.zip (2.2 KB)

PDF Export is ignoring YAML CSS class
#4

maybe I wasn’t clear enough, this green-headers.css works on both

h1 {
    color: green;
}

@media print{
    h1 {
        color: green;
    }
}
1 Like