Implementing Custom CSS: A Guide for Book Cloners

When cloning our book, you may want to maintain its appearance and style. One way to achieve this is by implementing custom CSS (Cascading Style Sheets). In this chapter, we’ll provide you with step-by-step instructions on how to apply custom CSS within Pressbooks to maintain the same style as the original book. By following the below instructions and using the provided custom CSS code, you’ll be able to effortlessly maintain the same style as the original book when cloning it using Pressbooks. Don’t hesitate to experiment and tailor the styles to your liking! Book cloners are encouraged to update this chapter with any adaptations made to the CSS for their own books.

Uploading Custom CSS

Even though Pressbooks will normally copy the original style when cloning a book, sometimes things can go wrong. To ensure your book maintains its original style, you can copy the CSS styles of the original book by following these steps:

1. Access the Pressbooks Dashboard: Log in to your Pressbooks account and navigate to your book dashboard.
2. Select the Theme Options: In the dashboard menu, locate and click on “Appearance.” This will allow you to access the theme settings for your book.
3. Navigate to Web Styles: Within the theme options, look for a section labeled “Your Web Styles” or similar. This is where you’ll input your custom CSS code.
4. Enter Your CSS Code: Copy the CSS code provided below and paste it into the provided text box under the “Your Web Styles” section.
5. Save Your Changes: Once you’ve entered your custom CSS code, don’t forget to save your changes. Look for the “Save” button located at the bottom of the theme settings page.

Custom CSS for “From Food to Fashion: Students Explore Waste and Sustainability from Local and Global Perspectives”

Copy the CSS styles provided in the code field below and paste into “Your Web Styles”:

/*pre html tag used with code tag for code examples*/
.front-matter pre, .part pre, .chapter pre, .back-matter pre {
background: #1e1e1e;
color: #b5c4cc;
border-radius: 15px;
padding: 20px;
font-size:smaller;
}

:root body { 
--primary-green-centennial: #D4DF38;
--primary-green-20op-centennial: rgba(212,223,56,0.2);
--primary-green-50op-centennial: rgba(212,223,56,0.5);
--primary-green-80op-centennial: rgba(212,223,56,0.8);
--primary-gray-centennial: #414042;
--primary-gray-20op-centennial: rgba(65,64,66,0.2);
--primary-gray-50op-centennial: rgba(65,64,66,0.5);
--primary-gray-80op-centennial: rgba(65,64,66,0.8);
/*overwrites predefined variables*/
--primary-dark: var(--primary-gray-centennial);
--primary: var(--primary-gray-centennial);
--primary-fg: var(--primary-green-centennial);
}

.footer {
--brand: var(--primary-green-centennial);
--primary-dark: var(--primary-gray-centennial);
background-color: var(--primary-gray-centennial);
color: #fff;
font-family: Karla,sans-serif;
padding: 0 0 2rem;
}

/* Remove border from tables and siable hyphenation for specific sections @ul*/
.table: {
border-top: 0px solid black !important;
border-bottom: 0px solid black !important;
}

.front-matter, .part, .chapter, .back-matter, body#tinymce.wp-editor {
hyphens: none;
}

.front-matter p, .part p, .chapter p, .back-matter p, body#tinymce.wp-editor p {
hyphens: none;
}
/* upper bar color*/
.cta {
background-color: var(--primary-green-centennial);
color: #000000;
text-align: right;
}

/*Link and Icon in the bar color change*/
.cta p a {
color: rgb(0, 76, 151); /*updated @fabian*/
text-decoration: underline;
}

/*Text in the lower bar*/
.nav-reading__next a, .nav-reading__previous a {
border: 1px solid transparent;
color: var(--primary-gray-centennial);
display: block;
font-family: Karla,sans-serif;
font-size: 0.99rem;
height: 100%;
padding: 0.5rem 1rem;
font-weight: bold;
transition: color 0.3s; /*hover effect added */
}

.nav-reading__next, .nav-reading__previous {
color: unset;
}

.nav-reading__next a:hover, .nav-reading__previous a:hover {
color: #FFFFFF; 
background-color: var(--primary-gray-80op-centennial);
}
.nav-reading__next a:focus, .nav-reading__previous a:focus {
border: var(--primary-gray-centennial);
outline: none;
}

/* lower bar */
.nav-reading {
background-color: var(--primary-green-centennial);
bottom: 0;
display: block;
left: 0;
position: fixed;
width: 100%;
}

/* nav-reading up btn*/
.nav-reading__up {
align-items: center;
background-color: var(--primary-green-centennial); /*updated @fabian*/
border-radius: 50%;
border-color: unset;
color: var(--primary-gray-centennial);
display: flex;
flex-direction: column;
height: 2.5rem;
justify-content: center;
left: 50%;
opacity: 0;
padding: 0;
position: absolute;
top: -3rem;
transform: translate(-50%);
width: 2.5rem;
}

.nav-reading__up:active, .nav-reading__up:hover {
color: var(--primary-green-centennial);
border-color: var(--primary-green-centennial);
}

.button.focus, .button:focus, button.focus, button:focus,
 input[type=submit].focus, input[type=submit]:focus {
box-shadow: 0 0 0 2px var(--primary-gray-centennial),
0 0 0 4px var(--primary-green-centennial);
}
.nav-reading__up:focus {
background-color: var(--primary);
border: 1px solid var(--primary-fg);
}

/*ccbox*/
img#centennial-logo-box {
height: auto;
display: inline-block;
float: left;
margin-right: 20px;
}

div.textbox.CCbox {
border-style: none;
border-width: 2px;
background-color: #DFE76A;
}

/*reference box -Centennial Gray 100%*/
.textbox, .bcc-box {
background-color: #DFE76A;
border-color: #003180;
}

/* shaded box color - 50% Centennial Green */
.textbox.shaded, .bcc-box.shaded {
background-color: rgba(212,223,56,0.5);
}

/*Text color -Centennial Grey - body text */
.front-matter, .part, .chapter, .back-matter {
color: var(--primary-gray-centennial);
}

/*quotes body color */
.front-matter blockquote, .part blockquote, .chapter blockquote, .back-matter blockquote {
color: #373d3f;
}

/*anchor tags color*/
.front-matter a, .part a, .chapter a, .back-matter a {
color: rgb(0, 76, 151); /*updated @fabian*/
}

/*References Content text color*/
div.referencesContent {
color: white;
background: #454546;
padding: 2.5em 2.5em 2.5em 2.5em;
margin: 0.9em 0 0.9em 0;
font-family: "Encode Sans", sans-serif;
font-size: 1rem;
font-style: normal;
font-weight: normal;
word-spacing: normal;
letter-spacing: normal;
line-height: 1.6em;
text-align: left;
text-indent: 0;
border-radius: 0;
}

.referencesContent h2 {
color: white;
}

/*color of h's throughout the book*/
.front-matter h1, .part h1, .chapter h1, .back-matter h1,
.front-matter h2, .part h2, .chapter h2, .back-matter h2, 
.front-matter h3, .part h3, .chapter h3, .back-matter h3, 
.front-matter h4, .part h4, .chapter h4, .back-matter h4 {
color: var(--primary-gray-centennial);
}

/*header borderline color*/
section.chapter header:not(.textbox__header), section.front-matter header:not(.textbox__header), 
section.back-matter header:not(.textbox__header) {
border-bottom: 1px solid var(--primary-gray-centennial);
}

/*fig caption color - centennial gray*/
figcaption, [data-type="subtitle"], [data-type="author"] {
color: #414042;
}

/*video transcription section*/
/* reduce the size of the img and the text */
.video-transcription img {
width: 25px; 
height: 25px; 
}

/*reduce the size of the img and the text*/
.video-transcription img {
width: 30px; 
}
p.video-transcription {
font-size: 16px;
}
p img.alignleft {
float: none;
margin: 0.5em 0.5em 0.5em 0.5em;
padding-right: 0;
}

/*table font size*/
.chapter table{
font-size: 1.125em
}

/*contributors section*/
.contributor_box {
display: flex;
background-color: rgba(212, 223, 56, 0.5);
padding: 30px;
flex-flow: column;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}

.contributor_header {
display:flex;
flex-direction: column;
background-color: #414042;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
color: white;
}

.contributor_header .contributor_dept {
margin-top:0px;
}

p.contributor_position {
font-weight: bold;
font-size: x-large;
}

.contributor_dept {
font-size: smaller;
}

.contributor_image-container {
width: 200px; 
height: 200px; 
border-radius: 50%; /* this creates the rounded effect */
overflow: hidden; /* hides the parts of the img that overflow */
display: flex; 
justify-content: center; 
align-items: center; 
margin-bottom: 20px;
}

.contributor_image-container img {
width: 100%; 
height: 100%; 
object-fit: cover; /* ensures the img covers the area, maintaining its aspect ratio */
}

.contributor_info {
align-self: center;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
align-content: center;
padding-right: 20px;
}

.contributor_info p {
text-align: center;
font-size: large;
margin: unset;
}

.contributor_main {
display: flex;
flex-flow: row;
}

.contributor_details {
height: auto;
}

.contributor_info a {
text-decoration: none;
}

.contributor_socials {
display: flex;
padding-top: 10px;
text-decoration: none;
justify-content: center;
}

How to Edit Your Book CSS in Pressbooks

We’ve provided an instructional video that demonstrates the process of editing your book’s custom CSS within Pressbooks.