Fix Odoo Website Theme Rendering Problems

Website Theme Breaking

Odoo website themes can break after upgrades, module installations, or asset changes. Symptoms include missing styles, broken layouts, blank pages, and SCSS compilation errors. Here are the fixes for the most common theme rendering problems.

SCSS Compilation Error

# Error: "Could not compile stylesheet" or
# "SCSS compilation error" in browser console

# Fix 1: Clear assets and regenerate
# Developer Mode → Debug → Regenerate Assets Bundles
# This recompiles all SCSS files

# Fix 2: Check for syntax errors in custom SCSS
# Common issues:
# - Missing semicolons
# - Undefined variables
# - Wrong Sass function usage
# - Importing non-existent files

# Fix 3: Clear browser cache
# Hard refresh: Ctrl+Shift+R
# Or clear all cached data for the domain

# Fix 4: Clear asset attachments in database
DELETE FROM ir_attachment WHERE name LIKE 'web.assets%';
# Then restart Odoo — assets regenerate on first load

Missing Styles / Blank Page

# Problem: Page loads with no CSS styling

# Fix 1: Check asset bundle loading
# Browser → Network tab → filter CSS/JS
# Look for 404 errors on asset files

# Fix 2: Regenerate assets
# Settings → Technical → Asset Bundles → Regenerate
# Or: add ?debug=assets to URL, then regenerate

# Fix 3: Check theme module is installed
# Settings → Apps → Search theme name
# Status should be "Installed"
# If not, install the theme module

# Fix 4: Dependency conflict
# Two themes installed simultaneously can conflict
# Only one website theme should be active
# Uninstall conflicting theme modules

Layout Broken After Upgrade

# Problem: Website layout scrambled after Odoo upgrade

# Cause: Theme uses view IDs or class names that
# changed between Odoo versions

# Fix 1: Update theme module
# Check if theme publisher released version for Odoo 19
# Install updated theme module

# Fix 2: Reset to default theme
# Website → Configuration → Settings
# Select default Odoo theme
# Rebuild page layouts

# Fix 3: Identify broken views
SELECT id, name, key FROM ir_ui_view
WHERE website_id IS NOT NULL
  AND active = true
ORDER BY write_date DESC;

# Deactivate problematic theme views:
UPDATE ir_ui_view SET active = false
WHERE key LIKE 'theme_broken_name%';

Mobile Responsiveness

# Problem: Website looks fine on desktop, broken on mobile

# Fix 1: Check viewport meta tag
# Should exist in page head:


# Fix 2: Custom CSS overriding responsive breakpoints
# Inspect with browser mobile emulation
# Look for fixed widths overriding flex/grid layout

# Fix 3: Image sizing
# Images without max-width break mobile layout:
img {
    max-width: 100%;
    height: auto;
}

# Fix 4: Table overflow
# Tables wider than viewport:
.table-responsive {
    overflow-x: auto;
}

# Fix 5: Website Builder snippets
# Some snippets have fixed-width elements
# Edit in Website Builder → adjust for mobile view

Custom Page Not Rendering

# Problem: Custom website page shows 404 or blank

# Fix 1: Check page is published
# Website → Pages → find page → Published: Yes

# Fix 2: Check URL route
# Website → Pages → page properties → URL
# Ensure no duplicate routes

# Fix 3: Template error
# Enable developer mode, check server logs for:
# QWebException or template rendering errors

# Fix 4: Check page visibility
# Page may be restricted to specific groups
# Website → Pages → page → Visibility

# Fix 5: Multi-website conflict
# Page assigned to different website
# Check website_id on the page record

Font Loading Issues

# Problem: Custom fonts not loading, fallback fonts shown

# Fix 1: Check font files exist
# /static/fonts/ directory in theme module
# Verify files are accessible: /module/static/fonts/font.woff2

# Fix 2: CORS headers for fonts
# If using CDN, fonts need CORS headers:
# Access-Control-Allow-Origin: *

# Fix 3: Font-face declaration
# Check SCSS @font-face uses correct paths:
@font-face {
    font-family: 'CustomFont';
    src: url('/theme_name/static/fonts/custom.woff2') format('woff2');
    font-display: swap;
}

DeployMonkey

DeployMonkey's AI agent can diagnose and fix website theme rendering issues in your Odoo instance. Get your website looking right without manual debugging.