General theme

Odoo offers various options to shape your website’s theme, including its colors, fonts, and layout.

When setting up your website for the first time, you are prompted to select a theme. Hover your mouse over the themes to see an extended preview of each one. Click on a theme to select it.

Ghi chú

  • If you leave without selecting a theme, your website is created using the default one.

  • You can switch themes later if needed.

In the website builder, the Theme tab offers various options to customize your website's general theme. To access it, click Edit and go to the Theme tab.

Once you have made the desired changes, click on Save to confirm and apply them to your website.

Chủ đề

In the Website section, click on Switch Theme to open the theme selector. Hover your mouse over the themes to see an extended preview of each one. Click on a theme to apply it to your website.

Màu sắc

Odoo's website editor features two main types of colors: theme colors and status colors.

Mà sắc Theme

Theme colors refer to the set of colors displayed across all pages of your website. These are made of five colors: three main colors and two light and dark colors.

To edit your website's colors, go to the Colors section in the website editor, then:

  • Click on the color dot you want to change, then select a Solid color or click on Custom to pick a specific color tone manually (or add its #HEX or RGBA code).

  • Click on the paint palette icon and choose a color palette. As a result, all color customizations are reset; click a color dot to change a specific color.

Odoo tự động tạo các Mẫu màu dựa trên bảng màu mà bạn chọn. Đây là các tổ hợp màu định sẵn, được áp dụng cho nhiều thành phần khác nhau trên trang web nhằm tạo nên một thiết kế hài hòa và thu hút. Khi bạn chọn một bảng màu, các mẫu màu sẽ xác định cách phân bổ màu sắc trên các thành phần của khối dựng, như nút bấm, nền và văn bản. Nếu muốn chỉnh sửa, bạn chỉ cần nhấp vào Mẫu màu và chọn mẫu màu để tùy chỉnh thêm. Mỗi mẫu màu bao gồm màu nền, màu chữ, tiêu đề, liên kết, nút chính và nút phụ cho các khối dựng của bạn.

Color presets

To apply a color preset to a building block on your site, select the building block, go to the Customize tab, click the color dot located next to Background, and choose a Theme.

Ghi chú

Changing a color preset automatically updates the colors of both the default preset and the building blocks where the preset is used.

Status colors

Status colors are used to 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 your website's Status Colors, scroll down to the Advanced section and click on the dots to change their color.

Example

Status color selection Success pop-up

Page layout

Tùy chọn Bố cục trang trong phần Trang web cho phép thay đổi cách hiển thị tổng thể và khoảng cách giữa các khối dựng cũng như thành phần trang web. Nhấp menu thả xuống và chọn bố cục mong muốn. Dưới Bố cục trang, tùy chỉnh Nền bằng cách chọn Hình ảnh, sử dụng hình ảnh đã chọn dưới dạng Họa tiết, hoặc để trống.

Fonts

Odoo allows you to customize the font family and size for specific elements on your website, including paragraphs, headings, buttons, and input fields.

  • Font Family: In the Paragraph, Headings, and Button sections, select a font from the dropdown menu.

  • Font Size: In the Paragraph, Headings, Button, and Input Fields sections, use the Font Size field to set a default size. Click the (arrow) icon to expand the section and define custom sizes (e.g., based on the heading level, button size, etc.).

Additionally, each element-specific section offers extra styling options, such as Line Height and Margins, for further customization.

Custom fonts

It is possible to use fonts on your website that are not offered by default in Odoo. To add a custom font, click the dropdown menu related to the Font Family field and select Add a Custom Font at the bottom of the dropdown menu. In the pop-up window:

  • Để thêm phông chữ Google, nhấp vào Chọn phông chữ Google và chọn phông chữ mong muốn trong danh sách. Nếu trang web của bạn hoạt động tại khu vực có quy định pháp lý nghiêm ngặt, chẳng hạn như GDPR của Liên minh Châu Âu, hãy tắt tùy chọn Cung cấp phông chữ từ máy chủ của Google. Việc này đảm bảo phông chữ sẽ được lưu trữ trên máy chủ của trang web thay vì từ máy chủ của Google.

  • To upload a custom font from your computer, click on Choose File.

Once done, click on Save and Reload.

Button styles

To customize the style of your website's primary and secondary buttons, navigate to the Button section in the website editor and edit the relevant options:

  • Click the arrow next to the Primary Style or Secondary Style fields and select one of the available styles for each type of button: 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 fonts.

  • Adjust the Padding to change the size of the spacing (in pixels) around the buttons' labels.

  • Customize the buttons' border radius using the Round Corners option.

  • Add an animation when a button is clicked in the On Click Effect dropdown menu.

Primary and secondary buttons

Mẹo

You can define custom Small and Large sizes for the buttons' Padding, Font Size, and Round Corners: Click on the (arrow) icon and use the related fields.

Button padding, font size and round corners settings