General theme¶
Odoo provides a range of theme customization options to define the website’s colors and fonts, and the appearance of paragraphs and headings, buttons, links, and input fields. Additional advanced settings are also available.
When setting up a website for the first time, you are prompted to select a theme. Hover the mouse over the themes to see an extended preview of each one. Click a theme to select it, or click the View more themes button to display the full list of available themes.
Note
If you leave without selecting a theme, the website is created with the default theme.
To customize the theme, open the website editor, navigate to the Theme tab, and go to the Website section. You can:
Click Switch Theme to open the theme selector. Hover the mouse over the themes to see an extended preview of each one. Click Use this theme to apply it to the website.
Add a language for the website.
Select the Page Layout to change the overall display and spacing of building blocks and website elements on pages.
Customize the layout’s Background by:
Click Save to apply the changes to the website.
Colors¶
Odoo’s website editor features two main types of colors: theme colors and status colors.
Theme colors¶
Theme colors refer to the set of colors displayed across all pages of the website. They consist of five colors: three Main colors, used mainly for buttons and links, and two Light & Dark colors, used mainly for text and headings.
To edit the website’s colors, navigate to the Colors section of the Theme tab. Then:
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Click the paint palette icon and choose a color palette. As a result, all color customizations are reset.
Odoo automatically creates Color Presets for the chosen colors or palette. These predefined color combinations are applied to various elements of the website to create a structured and visually appealing design. When selecting a color palette, its presets define how those colors are distributed across different elements. To modify them, click Color Presets, then select a preset to open the customization dropdown. Each color preset contains colors for the building block’s Background, Text, Headings, Links, Primary Buttons, and Secondary Buttons.
Tip
To apply a color preset to a building block, select the building block, go to the Style tab, click the color dot located next to Background, and choose a Theme.
Note
Changing a color preset automatically updates the colors of both the default preset and the building blocks that use it.
Status colors¶
Status colors indicate the status of certain actions (e.g., Success, Warning, etc.). They’re used in pop-up messages that appear to provide feedback to users and website visitors. To customize the website’s Status Colors, scroll down to the Advanced section and click the dots to change their color.
Example
Information related to a successful action on the website appears in green.
Fonts¶
Odoo allows you to customize the font family and font size of website elements, including paragraphs and headings, buttons, and input fields.
Font Size: In the Paragraph, Headings, Button, and Input Fields sections, use the Font Size field to set a default size. Click the (Toggle more options) icon to expand the section and define custom sizes (e.g., based on the heading level, button size, etc.).
Font Family: In the Paragraph, Headings, and Button sections, select a font from the dropdown menu.
Note
When System Fonts is selected, Odoo uses the native fonts already installed on the visitor’s operating system. For example, Android uses Roboto as its default system font.
Custom fonts¶
To add a custom font not available by default in Odoo, click the Font Family dropdown and select Add a Custom Font at the bottom. In the Add a Google font or upload a custom font pop-up:
To add a Google font, open the Select a Google Font dropdown and select the desired font. Toggle off the Serve font from Google servers if your website is operated from a location where regulations require compliance with laws such as, but not limited to, the European Union’s GDPR. This will ensure the Google Font is stored on the website’s server rather than on Google’s servers.
To upload a Custom Font from your computer, click Choose File.
Once done, click Save and Reload.
Tip
A Preview of the selected font is displayed on the right side of the window.
Styles¶
The appearance of website elements can be further customized. For example, you can customize paragraphs and headings, buttons, links, and input fields.
Paragraphs & headings¶
The Paragraph and Headings sections offer additional styling options for these text elements. You can:
Modify the font settings.
Adjust the Line Height to define the spacing between lines of text.
Adjust Margins to define the spacing around paragraphs and headings.
Buttons¶
To customize the style of the website’s primary and secondary buttons, navigate to the Button section and edit the relevant options:
Open the dropdown menu next to the Primary Style or Secondary Style fields to change the style for each button type, such as Fill, Outline, or Flat. When selecting Outline, the Border Width option appears below, allowing you to adjust the width of the button’s outline.
Modify the font settings.
Adjust the Padding to change the spacing around the buttons’ labels.
Use the Round Corners option to adjust the buttons’ border radius.
Add an animation when a button is clicked in the On Click Effect dropdown menu.
Tip
To define custom Small and Large sizes for the buttons’ Padding, Font Size, and Round Corners, click the (Toggle more options) icon, then use the related fields.
Links¶
In the Link section, open the dropdown menu next to Link Style to choose the appearance of links on the website. You can choose between:
No Underline;
Underline On Hover; or
Always Underline.
Input fields¶
To customize the style of the website’s input fields, navigate to the Input Fields section and edit the relevant options:
Adjust the Padding to change the spacing around the fields.
Modify the font settings.
Customize the Border Width around fields.
Define a Border Radius to round the fields’ corners.
Choose a Background color to fill the fields.
Advanced settings¶
Additional settings can be configured in the Advanced section, such as showing or hiding the header, using Code Injection for website verification through an HTML tag, and configuring status colors and Grays.
You can also configure Google Maps to display maps and enable geolocation features on the website, e.g., on the Contact Us page and in specific snippets. To configure this option:
Go to your Google account.
Enable the Maps Static API, Maps JavaScript API, and Places API.
Important
Do not enable Places API (New), as it is not yet supported by Odoo.
Using the Google APIs could require payment to Google.
Create an API key and copy it.
In Odoo’s website editor, go to the Theme tab, and, in the Advanced section, click Custom Key next to Google Map.
Paste the generated API key into the API Key field.
Click Save.