Hey Pressbooks community!
I’m in the process of customizing my exercise, key takeaways, learning objectives, and examples textboxes and am wondering if there is a way to change colours on a chapter level, or if it’s only customizable on a book level. I was hoping that each chapter could have its own custom colours for exercises and learning objectives - is this possible?
Thanks in advance!
Hey @Kaitlin_Schilling Appearance > Theme Options only sets colours at the book level, but it’s possible to consistently style elements within a given chapter using custom CSS.
For example, let’s say you want to colour all learning objectives textboxes the same way in Chapter 1. In the Text Editor for Chapter 1, you could edit the class attribute for each learning objectives textbox, changing it from
class=“textbox learning-objectives”
to
class=“textbox learning-objectives chapter-1"
Then, in Appearance > Custom Styles, you could add custom CSS for that specific class.
My approach when I’ve added custom CSS to a book has been to reference the default theme styles shown on that Custom Styles page (e.g. seeing how learning objectives textboxes are currently styled in the theme). The MDN Web Docs on CSS are also great.
Hi @Kaitlin_Schilling @ThomasWeideman is 100% correct about Custom CSS being the best/fastest way to customize colors for textboxes on a per chapter basis. One other thing to note is that by default every piece of front/back matter, chapter will also already be given a unique identifier that can be used to target elements only in that chapter. For example, here’s a chapter in a test book: I’m a new chapter – A Guide to Making Open Textbooks with Students
If you inspect the HTML for this chapter, the body element will have a class declaration that looks something like this: <body class="chapter-template-default single single-chapter postid-155 js">
In this case postid-155 will be unique to this particular chapter. This comes from WordPress – every individual front/back matter or chapter will have a different post ID. You can target elements inside ONLY this chapter with a CSS rule like:
.postid-155 .textbox.learning-objectives {
color: red;
}
etc. All you’d need to change/replace would be the .postid-### for different chapters.
