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:
- Access the Pressbooks Dashboard: Log in to your Pressbooks account and navigate to your book dashboard.
- 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.
- 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.
- Enter Your CSS Code: Copy the CSS code provided below and paste it into the provided text box under the “Your Web Styles” section.
- 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;
}
.video-transcription p {
margin-top: 0px;
vertical-align: middle;
display:inline-block;
font-size: 16px;
}
.video-transcription img {
vertical-align:middle;
}
.video-transcription {
display: flex;
flex-direction: column;
align-items: center;
}
/* makes the text for the previous/next buttons in the webbook bigger @ulfany */
.nav-reading__next a, .nav-reading__previous a {
font-size: .99rem !important;
}
/* Change the anchor colour @ulfany*/
.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 @ulfany*/
.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 @fabian*/
.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;
}
/*Centennial style*/
: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 @f.textbox.shaded, .bcc-box.shaded {
background-color: #EAEF9C;
}Fabian*/
--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;
}
/* Colour Vars */
:root {
--v1-header-row-color: #8fc0d8;
--v1-header-col-color: #bcd9e7;
--v1-border: #dddddd;
--v1-text-color: #262c39;
--v1-cell-bg: #f3f3f3;
}
/* text boxes headers rounded corners*/
/*iframes boxes - videos*/
iframe {
border-radius: 10px;
}
/*general textboxes*/
.textbox, .bcc-box {
border-radius: 10px;
}
/*takeaways box*/
.textbox.textbox--key-takeaways .textbox__header, .textbox--key-takeaways.bcc-box .textbox__header{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.textbox.textbox--key-takeaways, .textbox--key-takeaways.bcc-box {
border-radius:10px;
}
/*example box*/
.textbox.textbox--examples .textbox__header, .textbox--examples.bcc-box .textbox__header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.textbox.textbox--examples, .textbox--examples.bcc-box {
border-radius: 10px;
}
/*learning-objectives*/
.textbox.textbox--learning-objectives .textbox__header, .textbox--learning-objectives.bcc-box .textbox__header {
background: #1e3d59;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: #fff;
font-size: 0.9em;
font-style: none;
font-weight: bold;
margin: 0;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}
.textbox.textbox--learning-objectives, .textbox--learning-objectives.bcc-box {
margin-bottom: 1.35em;
padding: 0;
border-radius: 10px;
border-style: none;
border-width: 0;
color: #000;
background: ALICEBLUE;
}
/*exercises box*/
.textbox.textbox--exercises .textbox__header, .textbox--exercises.bcc-box .textbox__header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.textbox.textbox--exercises, .textbox--exercises.bcc-box {
border-radius: 10px;
}
/*no line header textboxes*/
section.chapter header {
border-bottom:none;
}
/*shaded box edits*/
/*rounded corners for default shaded boxes*/
.textbox.shaded, .shaded.bcc-box, .textbox.examples, .examples.bcc-box {
border-radius: 10px;
}
/*Intro img in chapter 2.1*/
img.intro {
float: right;
margin: 15px;
border: 5px solid darkgrey;
border-radius: 10px;
}
/* Mani's Accordion */
details > summary {
padding: 7px 10px;
font-size: 1.25em;
text-indent: 0.5em;
background-color: #353d6b;
color: #fff;
border: none;
cursor: pointer;
margin-bottom: 20px;
border-radius: 10px 10px 10px 10px; }
details[open] > summary {
background-color: #54566b;
color: #fff; }
.collapsed {
border-radius: 10px;
border-style: outset;
border-width:2px;
border-color: #54566b;
padding: 15px 15px;
margin-bottom: 10px; }
img.youtubeimg{
margin-top: 5px;
border: 2px solid #54566b;
border-radius: 10px;
}
/* # The Sliding Summary # */
@keyframes details-show {
from {
opacity: 0;
transform: var(--details-translate, translateY(-0.5em)); } }
details[open] > *:not(summary) {
animation: details-show 750ms ease-in-out; }
/* End of Accordion */
/*H2 heading*/
.front-matter h2, .part h2, .chapter h2, .back-matter h2, body#tinymce.wp-editor h2 {
border-bottom: none 0 initial;
margin-top: 1.25em;
margin-bottom: 1em;
padding-bottom: 0;
font-size: 1.5em;
font-style: normal;
font-weight: bold;
line-height: 1.2em;
text-align: left;
text-transform: none;
letter-spacing: normal;
word-spacing: normal;
}
/*H3 heading
.front-matter h3, .part h3, .chapter h3, .back-matter h3, body#tinymce.wp-editor h3 {
font-style: normal;
font-weight: bold;
}*/
/*H5 heading*/
.front-matter h5, .part h5, .chapter h5, .back-matter h5, body#tinymce.wp-editor h5 {
font-style: normal;
font-weight: bold;
}
/*Non-caps Heading*/
section.part header h1 {
text-transform: none;
font-weight: bold;
}
section.chapter header h1 {
text-transform: none;
font-weight: bold;
}
section.front-matter header h1 {
text-transform: none;
font-weight: bold;
}
.special {
border-left-color: #006341;
border-left-width: 8px;
background-color: #E9E9EC;
}
/* Centennial custom box*/
.flex-container {
display: flex;
padding: 25px;
width: 100%;
/*
height: fit-content;
max-width: fit-content;
max-height: fit-content;
*/
}
/*Custombox*/
div.customboxcc {
/* original blue
border-color: #1492c9;
*/
border-radius: 10px 10px 10px 10px;
margin-top: 20px;
border-color: #919532;
border-style: solid;
border-width: 2px;
background-color: white;
}
.customboxcc > .flex-container > .resourcelist {
flex: 6 0 0%;
/*margin: auto 0;
vertical-align: top;*/
}
.customboxcc > .flex-container > .logo {
flex: 1 0 0%;
text-align: right;
}
.customboxcc > .flex-container > .logo > img {
vertical-align: top;
border-radius: 10px;
}
/*Custombox for non centennial resources - Yiseul*/
div.customboxncc {
border-radius: 10px 10px 10px 10px;
border-color: #33516C;
border-style: solid;
border-width: 2px;
background-color: white;
margin-top: 20px;
/* if shadow is needed
box-shadow: 5px 5px #A6a9aa;
*/
}
.customboxcc > .customboxcc_header{
border-radius: 10px 10px 0px 0px;
margin: -2px;
background: #57581D;
color: #fff;
font-size: 0.9em;
font-weight: bold;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}
.customboxcc > .customboxcc_header > .customboxcc_title{
font-size: 1rem;
font-weight: bold;
}
.customboxncc > .customboxncc_header{
border-radius: 10px 10px 0px 0px;
margin: -2px;
background: #34566F;
color: #fff;
font-size: 0.9em;
font-weight: bold;
padding: 1.7777777778em 1.7777777778em 1.7777777778em 1.7777777778em;
text-align: left;
}
.customboxncc > .customboxncc_header > .customboxncc_title{
font-size: 1rem;
font-weight: bold;
}
/* Bold fonts for textbox headers*/
.textbox .textbox__header p{
font-weight: bold;
}
section.front-matter header {
border-bottom-width: 0px;
}
/* Custombox style ends */
/* Hidden HR Class for adding extra spacing */
.hidden-hr {
opacity: 0;
}
/* Custom Attribution Box - Josh */
.intext-attribution-box {
border: 0.1em solid #a0bfde;
background-color: #f0f6ff;
margin-top: 1.5em;
border-radius: 10px;
padding: 1.5em 1em;
font-size: 0.9rem;
}
/* End Custom Attribution Box - Josh */
/* Custom Tables - Josh */
/* Base Table styles */
.table-v1 {
border-collapse: collapse;
margin: 25px 0;
border-top: none !important;
border-bottom: none !important;
}
/* Header Row(s) Styles */
.table-v1 thead tr,
.basic tr:first-of-type td, /* First row of basic tables */
.basic-title tr:first-of-type td, /* First & second row of basic-title tables */
.basic-title tr:nth-of-type(2) td {
background-color: var(--v1-header-row-color) !important;
text-align: center !important;
font-weight: bold;
}
/* Header THEAD Cell Styles */
.table-v1 thead th, .table-v1 thead td {
text-align: center;
}
/* Header Column Styles */
.table-v1 tbody th {
width: 30% !important;
background-color: var(--v1-header-col-color);
text-align: center;
}
/* Header Column for Basic/Basic-Title Table (this is usually a th, this helps w pressbooks) */
.basic tr:not(tr:first-child) td:first-child, /* exclude the header ROW */
.basic-title tr:not(tr:first-child, tr:nth-of-type(2)) td:first-child { /* exclude the first two rows if it has a title */
width: 30% !important;
font-weight: bold;
background-color: var(--v1-header-col-color);
text-align: center;
}
/* Cell Styles */
.table-v1 th, .table-v1 td {
padding: 12px 16px;
border: 2px solid var(--v1-border) !important;
}
/* Every other Row Styles */
.table-v1 tbody tr:nth-of-type(even) {
background-color: var(--v1-cell-bg);
}
/* Horizontal Rule Styles */
.table-v1 hr {
border-top: 2px solid var(--v1-header-row-color);
}
/* End Custom Tables - Josh */
/* makes the text for the previous/next buttons in the webbook bigger @ulfany */
.nav-reading__next a, .nav-reading__previous a {
font-size: .99rem !important;
}
/* Video transcription note @ulfany */
.video-transcription {
display: flex;
align-items: center;
padding-left: 10px; /* Added padding to the container */
}
.video-transcription img {
margin-right: 10px; /* Added margin to the image for spacing */
}
.video-transcription p {
font-size: smaller;
margin: 0; /* Removed default margin for paragraphs */
}
.video-transcription {
display: flex;
flex-direction: row;
align-items: center;
}
/* Event table style @Ulfany */
.event-table {
width: 100%;
border-collapse: collapse;
}
.event-table .event-row {
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
}
.event-table .event-cell {
flex: 1;
padding: 5px;
font-size: 16px;
border-right: 1px solid #ddd; /* Only add border to the right */
}
.event-table .event-cell:last-child {
border-right: none; /* Remove border from the last cell */
}
.event-table .event {
width: 70%;
}
.event-table .year {
width: 30%;
}
.event-table .header {
font-weight: bold;
background-color: #f0f0f0;
border: 1px solid #ddd;
}
/* upper bar color @Ulf*/
.cta {
background-color: var(--primary-green-centennial);
color: #000000;
text-align: right;
}
/*Link and Icon in the bar color change @Ulf**/
.cta p a {
color: rgb(0, 76, 151); /*updated @fabian*/
text-decoration: underline;
}
/*Text color in the lower bar @Ulf**/
.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; /* hover color changed @Ulf**/
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 bg color @Ulf**/
.nav-reading {
background-color: var(--primary-green-centennial);
bottom: 0;
display: block;
left: 0;
position: fixed;
width: 100%;
}
/* nav-reading up btn @Ulf**/
.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);
}
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.
For information on how to access the transcript for this video, see YouTube transcript instructions (opens a new window)
