General theme

Estimated reading: 3 minutes 73 views

Introduction

Your website’s theme sets the tone for your brand. In Odoo Website, you can easily adjust your site’s colors, fonts, and layout without any coding skills. Whether you’re just starting or giving your site a refresh, the theme editor helps you achieve a professional, consistent look that matches your business identity.

From switching themes to customizing button styles, Odoo gives you full creative control all from the website builder.

Step-by-Step Instructions

1. Choose or Switch Your Theme

When creating your website, you’ll be prompted to select a theme.
Hover over a theme to preview it in detail.
Click to apply the theme to your website.
If you skip this step, the default theme will be applied.
You can switch themes anytime:
- Go to Website → Switch Theme.
- Preview and select your new theme.

2. Customize Theme Colors

Odoo uses two main types of colors:

Theme Colors

Control the look of your site across all pages.
Includes five main colors: three primary, one light, and one dark.
To edit:
1. Go to Colors in the Theme tab.
2. Click a color dot to choose a solid color, pick from the palette, or enter a HEX/RGBA code.
3. Change the entire palette at once to instantly refresh your website’s style.

Color Presets

Predefined color combinations for buttons, backgrounds, and text.
To apply:
- Select a block → Customize tab → Background color → Choose Theme.
Updating a preset updates all blocks using that preset.

Status Colors

Used for feedback messages (e.g., success, warning, error).
Change them in Advanced → Status Colors.

3. Adjust Page Layout

Go to Page Layout to change spacing and element arrangement.
Set a background (image, pattern, or blank).
Perfect for making sections stand out.

4. Set Fonts

Customize fonts for:
- Paragraphs
- Headings
- Buttons
- Input fields
Adjust font family, size, line height, and margins.
For custom fonts:
- Select Add a Custom Font.
- Choose a Google Font or upload from your computer.
- For GDPR compliance, store Google Fonts locally if required.

5. Style Your Buttons

In the Button section, edit:
- Primary & Secondary Styles (Fill, Outline, Flat).
- Border width (for Outline style).
- Padding (spacing around text).
- Rounded corners (border radius).
- Click animations.
Define custom small and large button sizes for padding, font, and corners.

6. Customize Link Style

In Link Style, choose:
- No Underline
- Underline on Hover
- Always Underline
Ensures link appearance matches your branding.

Tips for Better Theme Design

Keep it simple: Too many colors or fonts can make your site look messy.
Use high-contrast colors for buttons and calls-to-action.
Preview on mobile to ensure your design works on all devices.
Stay consistent: Use the same font sizes and colors for similar elements.
Test before publishing: Save your changes and view your site as a visitor.