Different selectors in web and pdf export McLuhan


#1

Hi All,

I’m trying to change the format of my pdf export (in McLuhan theme) and it seems that the h1 entry title in the web version, i.e.:
<h1 class="entry-title"> XXX </h1>
is actually an h2 selector in the pdf.

To be clear, I can change the color of XXX in the pdf version by writing the following code in the CSS for PDF:
.front-matter h2, .chapter h2, .back-matter h2 { color: yellow }

The color I have in
h1.entry-title { color: black }
is ignored.

Thanks a lot,
Luis

P.S. My knowledge of CSS is limited, so I apologize in advance if this question is not clear enough.


#2

Hi Luis,

The PDF is generated from a single XHTML document, and as such the chapter titles are not H1 elements within the PDF source (the H1 is the book title). You can view the PDF source for your book if you are logged in by adding /format/xhtml to your book’s URL if you want to see what I mean. For reliable styling of these elements, I would recommend using the class names:


 /* PDF, EPUB */
.front-matter .front-matter-title,
.chapter .chapter-title,
.back-matter .back-matter-title {
  color: red;
}

/* Web */
.front-matter .entry-title,
.chapter .entry-title,
.back-matter .entry-title {
  color: red;
}

#3

If you are a super admin you can also do:

https://YOURSITE/YOURBOOK/format/xhtml?debug=prince

And get a rough idea of what the PDF will look like.


#4

Super helpful–thanks Ned & Dac. Luis–Naomi & I can get the debug prince view, but you likely won’t be able to see this. If the /format/xhtml view isn’t helpful for you, let me know and we can work with you more on this.


#5

I’m very excited about both the /format/html trick and the debug strategy. This just saved me so much trial and error! Thank you!


#6

The /format/xhtml is what I was dreaming about. You Guys are simply the best, thank you so much!!!