In-Depth Theme Customization (Custom Styles)

Summary

This article will describe how you can use CSS to customize your book's styling.

What are Custom Styles?

Custom Styles allow you to modify the theme's style. This means you can add, change and override the formatting in any of Pressbooks' themes.

Note that this requires a working knowledge of CSS. If you're not familiar with how to use CSS, but you're interested in learning, Mozilla has excellent resources.

How to Add Custom Styles

Once you have selected a theme, go to Appearance > Custom Styles. You must click the Appearance tab before clicking the Custom Styles button, as the pop-up menu does not have this option.

On this page, you can select if you want to change the CSS for the Web, Ebook, or PDF version of the book.

You can add your CSS to the "Your Styles" box under the Theme Styles.

Changes You Can Make

To find what things you can style, look through the theme stylesheet. You'll be able to find plenty of examples of things you can change. However, keep in mind that more styling doesn't equal better styling. First and foremost should be ease of reading – appearance and cosmetics are secondary.

Example

This is an example of how to use the CSS editor, not how to style a blockquote well. While the contrast is okay and the font is easy to read, it would be a jarring transition from the usual style.

If we insert the following CSS:

.blockquote, blockquote {
  background-color: #C0FFEE !important;
  font-family: monospace !important;
  padding: 10px !important;
  border: 1px solid black;
  border-radius: 10px;
}

We can see how the blockquote style is changed:

Block quote with different background, border, and font

Have an issue or article suggestion?

Email us! lts@boisestate.edu