Back to Blog

May 11, 2026

Odoo 19 Rewrites Its Website Theme Tutorial Around Bootstrap 5.3 and Modern CSS Conventions

Odoo's official website theme development tutorial gets a complete rewrite for version 19, upgrading from Bootstrap 5.1.3 to 5.3, switching from pixel-based sizing to rem units, introducing new manifest patterns, and fixing longstanding naming inconsistencies.

If you’ve built a website theme for Odoo before, the official tutorial was your starting point. It walks through module setup, SCSS theming, building blocks, page templates, and deployment. For version 19, the entire tutorial has been rewritten — not just patched with version-specific notes, but restructured around the framework changes that make Odoo 19 themes materially different from anything built for earlier versions.

Odoo website theme development overview showing the design workflow

Bootstrap 5.3 Replaces 5.1.3

The most consequential change is the Bootstrap version jump. Odoo 19 ships with Bootstrap 5.3, up from 5.1.3 in the previous release. That’s not just a minor point release — Bootstrap 5.3 introduced native dark mode support via color modes, new CSS custom properties for component theming, updated utility classes, and revised Sass variable structures.

For theme developers, this means SCSS files written against Bootstrap 5.1.3 variables may reference deprecated or renamed tokens. The tutorial now points to the Bootstrap 5.3 documentation for all variable references, which is a significant shift from earlier versions that linked to Bootstrap 4.6 documentation — yes, some references in the old tutorial were two major versions behind.

Pixels Out, Rem Units In

The tutorial now uses rem units instead of pixels for all sizing values. Navigation text that was previously specified as 14px is now 0.875rem. Input border radius moves from 10px to 0.625rem. This isn’t just a cosmetic preference — rem-based sizing respects the user’s browser font settings, which matters for accessibility and responsive behavior.

The shift also aligns with how modern CSS frameworks handle scaling. Bootstrap 5.3 itself uses rem units extensively, so mixing pixel values in theme overrides created inconsistencies where some elements scaled with browser settings and others didn’t. The tutorial now teaches the correct approach from the start.

New XML Fields for Page Records

Theme modules that define website pages now need additional XML fields that weren’t required in previous versions. The tutorial introduces three new fields on page records: is_homepage (a boolean that marks the page as the site’s landing page), type (set to qweb for template-based pages), and website_id (binding the page to a specific website in multi-website setups).

The is_homepagefield in particular solves a recurring theme development headache. Previously, setting a theme’s default homepage required post-installation configuration or workaround data files. Now it’s declarative: you mark it in the page record and the system handles it during installation.

Odoo 19 website theme page template with new XML field configuration

Naming Corrections That Break Old Themes

The tutorial fixes several naming inconsistencies that have persisted across versions. The most visible one: “caroussel” (with the double-s typo) has been corrected to “carousel” throughout the codebase. If your existing theme references Odoo’s carousel building blocks using the misspelled identifiers, those references will break in version 19.

Similarly, navigation-related documentation now refers to “menu items” instead of “links” — a terminology change that better reflects how Odoo’s website builder actually structures navigation. This affects how developers think about customizing headers and menus, even if it doesn’t change the underlying XML.

View References by ID Instead of Line Numbers

The tutorial now identifies views using their id attributes rather than file line numbers. Where the old tutorial might say “find the element at line 42,” the new version references elements like id="website.header_call_to_action". This is both more reliable (line numbers shift as files change between versions) and more useful for developers who need to locate and override specific view components.

Updated Installation Commands

Even the development environment setup has changed. The CLI parameter for running Odoo without demo data switches from --without-demo=all to --without-demo=True. A small change, but the kind that causes confusion when developers copy old tutorial commands and get unexpected behavior.

Building Blocks and the Theme Builder

The building blocks section — where theme developers define reusable content components that appear in the website builder’s drag-and-drop interface — has been updated with new builder plugin declarations and manifest configurations. The builder now supports a wider range of option types including color pickers, range sliders, button groups, and checkbox controls, all of which are documented with their current API signatures.

Odoo website theme building block cards design showing customizable components

What This Means for Existing Themes

If you’re maintaining a theme built for Odoo 17 or 18, the migration to 19 involves more than the usual version bump. The Bootstrap 5.3 changes alone require auditing SCSS variable usage. The carousel rename requires a search-and-replace across templates. The new page record fields need to be added to any theme-defined pages. And the rem unit convention, while not breaking, means new customizations should follow the updated sizing approach.

The rewritten tutorial serves as both a guide for new theme development and an implicit migration checklist. Reading through it with an existing theme open will surface most of the changes that need attention — which is probably the most efficient way to approach the upgrade.

Ready to experience Odoo AI?

Join hundreds of teams using DearERP to customize Odoo in minutes, not weeks. Plans start at $29/month.