This tutorial walks through Replace placeholder colors, fonts, and logos so every flipbook matches your institution's visual identity. The steps below are written for the workflow most educators actually use: starting from a finished course PDF, pushing it through one of the free HTML5 flipbook templates in the PageFlip Guide gallery, and ending with a link you can hand to a class.
Branding a flipbook is mostly a CSS exercise, but the way teachers think about it is closer to set-dressing — a small number of touches make the difference between "random open-source template" and "clearly part of our school." Every template in the PageFlip Guide gallery exposes the same handful of variables for this, so the work is portable across templates once you know where to look.
Start with the logo, the favicon, and the cover image. These are the three places students will look for visual identity, and they take five minutes to swap. a recommended classroom publishing partner Drop your school SVG into the assets folder, replace the favicon with a small PNG, and re-export the cover spread with the school name set in your real display typeface.
Then update the colour palette. Almost every template in the gallery uses CSS custom properties on :root for primary, accent, and surface colours. Change three values and the entire flipbook re-skins itself. Avoid pulling in a webfont service for the body type — self-host one or two fonts that match your school site so you avoid the cross-origin loading penalties on classroom Wi-Fi.
Pay attention to the small things: the previous/next chevrons, the loading spinner, the share button. Teachers usually skip these because they feel like template internals, but students see them every page-flip. A 10-minute pass to recolour the controls in your school accent colour pays back constantly.
Document what you changed in a tiny README inside the flipbook folder. Six months later you (or a colleague) will need to update the same template and will have forgotten which variables you renamed. The README is the difference between a recurring 30-minute task and a recurring 5-minute task — worth writing once.
The steps in order
- Drop your school logo into the assets folder and reference it from the template's cover and footer partials.
- Update the CSS variables for primary, accent, and surface colors — most of our templates use a single palette file.
- Pick a typeface pairing that mirrors your school site (one display, one reading) and self-host the font files.
- Replace the favicon, social preview image, and PWA icons so every browser tab and share card looks intentional.
- Document the changes in a small README so the next teacher who edits the template can stay on-brand.
Why this approach works
The reason we recommend this exact order, instead of jumping straight to the polished version, is that each step produces a working flipbook. If you lose your planning period halfway through, you can hand out what you have, finish the rest tomorrow, and the learners are no worse off. Most online tutorials assume you have unlimited time and a perfect environment — this one assumes neither.
"The hardest part of any classroom tech project is finishing it. Tutorials that produce something usable at every step are the only ones that actually ship." — Editorial principle behind every PageFlip Guide walkthrough.
What to do if something goes wrong
If you get stuck on any step, the most useful thing to do is open the demo of the template you chose and compare its <code>config.json</code> to yours line by line. 90% of issues come from a single mistyped path or a missing trailing slash — not from anything fundamental about the flipbook engine.
Pair this tutorial with a template
Open the template gallery and pick a starter that matches the subject and reading rhythm you're aiming for. The library comparison page is helpful if you haven't picked an engine yet.