Website Themes & Brand Customization
Your website theme determines the overall look and feel of your site. From colors and fonts to button styles and layouts, theme customization lets you create a unique brand experience that reflects your business identity.
Access Theme Settings: Go to Website → Configuration → Customize → Theme or click the paint palette icon while in Edit mode.
Selecting a Theme
Odoo provides professionally designed themes to get you started:
- Navigate to Website → Configuration → Settings
- Click Pick a Theme in the Website section
- Browse available themes with live previews
- Click a theme to preview it on your site
- Click Use This Theme to apply
Important: Changing themes may affect your existing content layout. Always review your pages after switching themes and make adjustments as needed.
Color Customization
Colors are fundamental to your brand identity. The Website Builder provides comprehensive color management:
Theme Colors
Define your primary color palette that applies across the entire website:
| Color Type | Usage | Recommendations |
|---|---|---|
| Primary | Main brand color, buttons, links, accents | Your main brand color |
| Secondary | Alternative buttons, less prominent elements | Complementary to primary |
| Alpha (Background 1) | Main page backgrounds | Usually white or very light |
| Beta (Background 2) | Alternate section backgrounds | Light gray or subtle tint |
| Gamma (Background 3) | Highlighted sections, footers | Darker or contrasting |
| Delta (Background 4) | Special sections | Feature areas |
| Epsilon (Background 5) | Additional backgrounds | Extra variation |
Status Colors
Semantic colors that communicate meaning:
- Success (Green): Confirmations, completed actions
- Info (Blue): Informational messages
- Warning (Yellow/Orange): Cautions, important notices
- Danger (Red): Errors, critical alerts
Setting Colors
- Click the color swatch to open the color picker
- Choose from:
- Theme presets: Pre-defined color schemes
- Color wheel: Pick any color visually
- Hex value: Enter exact color codes
- RGB values: Precise color control
- Colors update across your entire site instantly
Typography Settings
Fonts convey personality and improve readability:
Font Configuration
| Setting | Applies To | Options |
|---|---|---|
| Heading Font | H1, H2, H3, H4, H5, H6 | Google Fonts, System fonts, Custom upload |
| Body Font | Paragraphs, lists, general text | Google Fonts, System fonts, Custom upload |
| Button Font | Button text | Usually inherits from body or heading |
| Navigation Font | Menu items | Often matches heading font |
Font Sources
- Google Fonts: 1000+ free fonts, automatically loaded from Google CDN
- System Fonts: Arial, Helvetica, Times, Georgia - fast loading, no external requests
- Custom Fonts: Upload your own brand fonts (WOFF, WOFF2, TTF, OTF)
Typography Options
- Base Font Size: Default text size (typically 16px)
- Heading Scale: Ratio between heading levels
- Line Height: Space between lines (1.5 is readable)
- Letter Spacing: Space between characters
Button Styles
Buttons drive user actions. Configure them to match your brand:
Button Shape
- Square: Sharp corners (0px radius)
- Slightly Rounded: Subtle rounding (4-8px)
- Rounded: Notable curves (12-16px)
- Pill: Fully rounded ends (9999px)
Button Variants
- Filled/Solid: Background color with contrasting text
- Outline: Border only, transparent background
- Flat: No border, minimal styling
Button States
| State | When | Typical Style Change |
|---|---|---|
| Default | Normal appearance | Base style |
| Hover | Mouse over button | Darker/lighter, shadow, scale up |
| Active | Being clicked | Pressed appearance |
| Focus | Keyboard navigation | Outline ring |
| Disabled | Not clickable | Grayed out, reduced opacity |
Link Styling
Configure how links appear throughout your site:
- Link Color: Usually primary brand color
- Visited Color: Slightly different shade (optional)
- Hover Color: Darker/different shade on mouseover
- Underline: Always, never, or on hover only
- Decoration: Underline style (solid, dotted, dashed)
Page Layouts
Control the overall structure of your pages:
Container Width
- Full Width: Content spans entire viewport
- Contained: Maximum width with side margins (1140px, 960px, etc.)
- Narrow: Tighter content for readability (720px)
Header Layout
- Regular: Standard navigation bar
- Sticky: Stays visible while scrolling
- Transparent: See-through over hero images
- Hamburger: Collapsed menu on all devices
Footer Layout
- Simple: Single row of links
- Multi-column: Organized sections
- Extended: Multiple rows with content
- Minimal: Copyright only
Advanced Customization
Custom CSS
For advanced users, add custom CSS:
- Go to Website → Configuration → Customize → HTML/CSS Editor
- Add your CSS in the custom stylesheet section
- Styles apply across all pages
CSS Variables
Override theme variables for precise control:
:root { --primary: #your-color; --secondary: #your-color; --font-family-base: "Your Font"; }Brand Consistency Checklist
Before Publishing
- ☐ Logo uploaded and properly sized
- ☐ Primary and secondary colors match brand guidelines
- ☐ Fonts are consistent across all pages
- ☐ Button styles are uniform
- ☐ Favicon uploaded (browser tab icon)
- ☐ Social media preview image set
- ☐ Mobile appearance tested
- ☐ Color contrast meets accessibility standards
Best Practices
- Less is more: Stick to 2-3 colors and 2 fonts maximum
- Contrast: Ensure text is readable on all backgrounds
- Consistency: Use the same styles across all pages
- Test: Preview on multiple devices and browsers
- Accessibility: Use WCAG contrast ratio guidelines (4.5:1 for text)