Appearance and Design

Custom Styles (CSS)

In addition to the recommended Clarke theme, we suggest adding the following customizations to adjust how your book will appear on screen and in epub and PDF exports.

The CSS code shown below can be copied and pasted into the Custom Styles section in Pressbooks to modify the formatting of the book. Remember to select the appropriate category (Web, Ebook, or PDF) from the drop-down list.

The text inside the forward slash marks (/* */) explains what the specific CSS does. Styles under “Recommended” should be applied to every book. Styles under “Optional” are applied if needed.

For more information on editing CSS, please refer to the following resources:

Web

Recommended

/*Bolds Heading 2*/
.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {
font-weight: bold;
}

/*Bolds Heading 3s and left aligns them*/
.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {
font-weight: bold;
text-align: left;
}

/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*/
h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {
padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em; margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;
font-size: 0.9em;
color: #fff; text-align: left;
font-weight: normal;
font-style: normal;
}

/*Fix table accessibility and display*/
.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {
border: 1px solid; border-color: #373d3f; }
.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {
border: 1px solid; border-color: #373d3f;
}
#content table caption { caption-side: top; color:#000; text-align: center; }
td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul {
font-size: inherit;
line-height: inherit;
margin-top: inherit;
}

/*Match font size in multicolumn lists*/
.twocolumn, .threecolumn{
font-size: inherit;
}

/*Styles for end-of-chapter content (image descriptions and attributions headings)*/
h1.eocp {
font-size: 0.9em;
padding-top: 4em;
}
h1.eoc {
font-size: 0.9em;
}

/*avoid words breaking across lines*/
.front-matter p, .part p, .chapter p, .back-matter p, body#tinymce.wp-editor p, .front-matter, .part, .chapter, .back-matter, body#tinymce.wp-editor { word-break: normal;
hyphens: manual;
}

/*Removes license footer*/
.block-reading-meta {
display: none;
}

PDF

The required CSS for PDFs is more robust than Web and EBook. This is because it includes the following:

  • Prevent textbox headers from being on different pages from their content: This ensures that a page break will not separate a textbox from its header.
  • Left-align regular text: By default, regular text in the PDF is justified (meaning words are spaced so that the left and right edges of a paragraph are perfectly straight). This causes irregular spacing that is not good for accessibility as it makes it harder to read. As such, we’ve added CSS to left-align regular text instead.

Recommended

/*Bolds Heading 2*/
.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {
font-weight: bold;
}

/*Bolds Heading 3s and left aligns them*/
.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {
font-weight: bold;
text-align: left;
}

/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*/
h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {
padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;
margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;
font-size: 0.9em;
color: #fff;
text-align: left;
font-weight: normal;
font-style: normal;
}

/*Fix table accessibility and display*/
.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {
border: 1px solid;
border-color: #373d3f;
}
.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {
border: 1px solid;
border-color: #373d3f;
}
#content table caption {
caption-side: top;
color:#000;
text-align: center; }
td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{
font-size: inherit;
line-height: inherit;
margin-top: inherit;
}

/*Prevents textbox headers being on different pages from their content*/
.textbox__header {
page-break-after: avoid;
}

/*Change text alignment from justified to left-aligned (makes text more readable)*/
p {
text-align: left;
}

/*Makes it so centre/right/left-aligned images in the PDF without captions will have text wrap properly*/
img.alignright {
float: right;
margin-left: .5em;
}
img.alignleft {
float: left;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

/*Ensures all text on copyright page is the same size*/
#copyright-page li, #copyright-page .textbox {
font-size: 0.75em;
}

/*Match font size in multicolumn lists*/
.twocolumn, .threecolumn{
font-size: inherit; 
}

 

Optional

/*Reduces size of embedded video image, and reduces space around placeholders for all interactive content*/
.interactive-content img {
max-width: 50%;
}
.interactive-content {
line-height: 1.2em;
margin-bottom: 0.5em;
padding: 0.5em 0.5em 0.5em 0.5em;
}

/*Reduce padding around standard textboxes*/
.textbox, .bcc-box {
padding: 1em 1em 1em 1em;
}

/*Reduce size of media attributions in PDF*/
div[class^="media-attributions"] {
font-size: 0.7em;
margin-top: 0.2em;
}
div[class^="media-attributions"] li {
padding: 0;
line-height: 0.9em;
}

/*Allow tables to be broken across pages*/
/*auto page break in tables*/
.front-matter table, .part table, .chapter table, .back-matter table, body#tinymce.wp-editor table {
page-break-inside: auto;
}

/*Avoid footnotes breaking across pages*/
.footnote{
page-break-inside: avoid;
}

Ebook

Recommended

/*Bolds Heading 2*/
.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {
font-weight: bold;
}

/*Bolds Heading 3s and left aligns them*/
.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {
font-weight: bold;
text-align: left;
}

/*Standardizes textbox title styles when they are marked as headings. These styles are for Clarke theme. Change values for other themes if desired.*/
h1.textbox__title, h2.textbox__title, h3.textbox__title, h4.textbox__title, h5.textbox__title, h6.textbox__title {
padding: 1.1111111111em 1.1111111111em 1.1111111111em 1.1111111111em;
margin: -1.1111111111em -1.1111111111em -1em -1.1111111111em;
font-size: 0.9em;
color: #fff;
text-align: left;
font-weight: normal;
font-style: normal;
}

/*Fix table accessibility/display*/
.front-matter td, .part td, .chapter td, .back-matter td, body#tinymce.wp-editor td {
border: 1px solid;
border-color: #373d3f;
}
.front-matter th, .part th, .chapter th, .back-matter th, body#tinymce.wp-editor th {
border: 1px solid;
border-color: #373d3f;
}
#content table caption {
caption-side: top;
color:#000;
text-align: center; }
td p, .chapter td p + p, td, .back-matter td p + p, td li, td li + li, .chapter td li + li, .chapter td li, td ul{
font-size: inherit;
line-height: inherit;
margin-top: inherit;
}

/*Makes it so videos inside textboxes aren't larger than the textboxes*/
div iframe {
max-width: 98%;
}

/*Match font size in multicolumn lists*/
.twocolumn, .threecolumn{
font-size: inherit; }

/*Fixes an issues with right/left aligned images that are oversized and overlapping with content*/
.wp-caption.alignright, .wp-caption.alignleft {
width: 25% !important;
}

/*Reduce padding around special textbox headings*/
.textbox.textbox--learning-objectives .textbox__header, .bcc-box.textbox--learning-objectives .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--exercises .textbox__header, .bcc-box.textbox--exercises .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--examples .textbox__header, .bcc-box.textbox--examples .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--key-takeaways .textbox__header, .bcc-box.textbox--key-takeaways .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}

/*Increase space between list items*/
ol.space li {
margin-bottom: 30px;
}

/*Style for blank spaces - all text with this class will be white with a black underline.*/
.blankspace {
color: #fff;
text-decoration: underline;
text-decoration-color: black;
}




 


Optional




/*Fixes an issues with right/left aligned images that are oversized and overlapping with content*/
.wp-caption.alignright, .wp-caption.alignleft {
   width: 25% !important;
}





Or, alternately,




/*Alternate: Fixes an issues with right/left aligned images that are oversized and overlapping with content*/
.wp-caption.alignright, .wp-caption.alignleft {
  width: 194px !important;
}





 


Other Solutions


The following are CSS solutions developed for specific books that may be useful in the future but are generally not applicable to most books.




/*Increases width of sidebar textboxes*/
.textbox--sidebar {
margin: 1em 0 1em 1em;
max-width: 50%; 
}

/*Reduce padding around special textbox headings*/
.textbox.textbox--learning-objectives .textbox__header, .bcc-box.textbox--learning-objectives .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--exercises .textbox__header, .bcc-box.textbox--exercises .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--examples .textbox__header, .bcc-box.textbox--examples .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}
.textbox.textbox--key-takeaways .textbox__header, .bcc-box.textbox--key-takeaways .textbox__header {
padding: 0.3em 1em 0.1em 1em;
}

/*Increase space between list items*/
ol.space li {
margin-bottom: 30px;
}

/*Style for blank spaces -- all text with this class will be white with a black underline.*/
.blankspace {
color: #fff;
text-decoration: underline;
text-decoration-color: black;
}





 




This chapter is adapted from “Custom Styles (CSS)” in BCCampus Open Education Publishing Style Guide (CC BY).




 


 






					
		
					

						

							

								
License

								
Icon for the Creative Commons Attribution 4.0 International License
Custom Styles (CSS) Copyright © 2024 by University of Manitoba Libraries is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.