Advanced Features
  • CSS Customization

    • CSS Customization

    CSSCover PageTooltipsSite Formatting

    While editing the book's cover page, you can include custom CSS into the Custom CSS field, which will be applied to all chapters in the book.

    This is powerful and can have undesired effects because the CSS is applied to the entire page (not just the chapter contents). To prevent CSS from changing site formatting unexpectedly, you should limit your adjustments to only apply to content within the div#chapter-container id as follows:

    div#chapter-container h2 { color: pink; } // Makes all H2 headings pink

    Snippets

    These are some snippets that can be adjusted to add elements in a chapter or across an entire book.

    Banner Image

    This snippet places an image above the main heading.

    div#chapter-container h1 {
        background-image: url("https://edtechbooks.org/images/logo.png");
        background-repeat: no-repeat;
        background-position: top right;
        padding-top: 140px;
        background-size: 100px;
    }

    Tooltips Bolded

    This snippet makes all tooltips (e.g., glossary pop-ups) bolded.

    div#chapter-container [data-bs-toggle=tooltip] {
         font-weight: bold;
    }


    This content is provided to you freely by Ensign College.

    Access it online or download it at https://ensign.edtechbooks.org/userguide/custom_css.