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 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. Cloning a Book: Access the “Clone Book” feature in the upper right corner. Input the source book’s URL into the designated field, specify a new URL for the clone, and select “Clone Book” to finalize. The cloned book will be available under “My Books” in the upper left corner. For this Custom CSS example, we will use “From Food to Fashion: Students Explore Waste and Sustainability from Local and Global Perspectives”[New Tab]
3. 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.
4. Navigate to Custom Styles: Hover over the “Appearance” tab, then from the dropdown menu, click on “Custom Styles” where you can input your custom CSS code.
5. Enter Your CSS Code: Copy the CSS code provided below and paste it into the provided text box under the “Your Web Styles” section.
6. 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”

Clone the book then 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;
}

.video-transcription p {
  padding-left:10px;
  font-size: smaller;
}


.video-transcription {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* makes the text for the previous/next buttons in the webbook bigger*/
.nav-reading__next a, .nav-reading__previous a {
    font-size: .99rem !important;
}


/* Change the anchor colour*/

.front-matter a, .part a, .chapter a, .back-matter a {
  color: #003180;
}

.front-matter a, .part a, .chapter a, .back-matter a {
  text-decoration: underline;
}

/* Change the anchor colour for References*/
.textbox.textbox--exercises a,
.textbox.textbox--exercises .part a,
.textbox.textbox--exercises .chapter a,
.textbox.textbox--exercises .back-matter a {
  color: #193E37;
}


.textbox.shaded, .bcc-box.shaded {
  background-color: #f0f6ff;
  box-shadow: 6px 5px 5px rgba(0, 0, 0, 0.2);
}

/*contributors section*/
.contributor_box {
    display: flex;
    background-color: #cce1e4;
    padding: 30px;
    flex-flow: column;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.contributor_header {
    display:flex;
  	flex-direction: column;
    background-color: #18314F;
    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 created by BCcampus.