Changing colour of headings in Malala Theme

Theming
1

How does one change the blue headings (chapter titles etc) from blue to black?

2

Hi @firozem, each theme has its own CSS which controls various elements in the webbook, ebook exports and PDF exports. You can override or customize this with Custom CSS. See our guide chapter at Customizing your Exports with Custom Styles – Pressbooks User Guide for details.

In this particular case, Malala has the following CSS:

.front-matter h1, .part h1, .chapter h1, .back-matter h1 {
    color: #003180; }
  .front-matter h2, .part h2, .chapter h2, .back-matter h2 {
    color: #003180; }
  .front-matter h3, .part h3, .chapter h3, .back-matter h3 {
    color: #003180; }
  .front-matter h4, .part h4, .chapter h4, .back-matter h4 {
    color: #003180; }
  .front-matter h5, .part h5, .chapter h5, .back-matter h5 {
    color: #003180; }
  .front-matter h6, .part h6, .chapter h6, .back-matter h6 {
    color: #003180; }

You can override any or all of these header elements using your preferred color. To change the h1 headings for chapter titles to black you could add something like

.front-matter h1, .part h1, .chapter h1, .back-matter h1 {
    color: #000; }

To change the color of the chapter number, you’d want to target it

.chapter-number, .entry-title span {
  color: #000;

and to change the color of the header border, you’d want to add something like

section.chapter header, section.front-matter header, section.back-matter header { 
  border-bottom: 1px solid #000;
}

We don’t offer advanced CSS support, but hopefully these examples and the guide link are enough to get you started. Good luck with your book project!

1 Like
3

Thank you — that is really helpful.

Firoze