Customizing Your Exports with CSS

Pressbooks allows you to modify our export themes using CSS. You can customize your outputs of: EPUB, MOBI, PDF and web. Here’s how it works:

How to Use the Pressbooks CSS Editor: General Instructions

Step 1: Activate Pressbooks Custom CSS

Important Note! 

You must activate the Custom CSS theme to access the CSS. You cannot have another theme activated at the same time.

But don’t worry, in a later step you can tell the custom CSS theme to “inherit” the styles from another theme you like as a baseline.

To activate the custom theme, go to Appearance –> Themes:

Select Appearance/Themes

Then find the theme named “Pressbooks Custom CSS” and click on Activate:

Activating Pressbooks Custom CSS Theme

Activating Pressbooks Custom CSS Theme

Step 2: Select Edit CSS

On the left-hand menu, select “Edit CSS” to access custom CSS editor

Selecting CSS editor option

Selecting CSS editor option

Step 3: Select Output Format and CSS Base File
a. Select which output CSS you want to edit: Ebook, Web or PDF.

b. Select which CSS you want to modify from existing Pressbooks themes.

Select stylesheet and inherit styles

Select stylesheet and inherit styles

IMPORTANT NOTE: You need to select and save a base theme for EACH format (PDF, Ebook and Web), even if you only make changes to one format. Otherwise, the exports will be done with a blank stylesheet … and bad things will happen.

Step 4: Edit Your CSS!

Caveats!

Caveats and improvements on the way:

  • Font paths are complicated.
  • Some other image elements used in the CSS need to be given absolute paths … this is an ongoing improvement.

OK, Let’s Try it

Let’s say we like the Clark Theme, but we want to spice up and customize the PDF output a little bit. In particular, we want to:

  • Make all our Headers red and change the font to Times New Roman.
  • Change our Body font smaller, blue, and change it to Helvetica.
  • Make line spacing a bit looser, and get rid of justification.

Make our Headers Red & Times New Roman

In our css we’ll find the following code:

h1, h2, h3, h4, h5, h6 {

font-family: Helvetica, Arial, sans-serif;
line-height: 1.4em;
font-weight: normal;

}

Which we will modify as follows:

h1, h2, h3, h4, h5, h6 {

font-family: Times New Roman, serif;
line-height: 1.4em;
font-weight: normal;
color: red;

}

Make Body font smaller, blue, change it to Helvetica, and loosen line-height

In our CSS file we find the following:

body {

font: 12pt/1.6 "Times New Roman", Georgia, serif;

}

And we will change it as follows:

body {

font: 9pt/1.6 Helvetica, sans-serif;
color: blue;

}

Make line spacing a bit looser, and get rid of justification

Start with:

p {

line-height: 1.2em;
text-align: justify;
margin-bottom: 0;
orphans: 3;
widows:3;

}

Modify to:

p {

line-height: 2em;
text-align: none;
margin-bottom: 0;
orphans: 3;
widows:3;

}

Now let’s look at the results.

Here is our original PDF export using the standard Clarke Theme:

Clarke PDF (Original Css)

Clarke PDF (Original Css)

And here is our new customized PDF output:

Custom PDF CSS (Clarke variant)

Custom PDF CSS (Clarke variant)