Chủ đề chung¶
Odoo provides a range of theme customization options to define the website's colors, fonts, and shadow styles, 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.
Ghi chú
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:
Click Save to apply the changes to the website.
Màu sắc¶
Odoo's website editor features two main types of colors: theme colors and status colors. Click the color palette bar to open the Website / Colors menu in the Theme tab.
Mà sắc Theme¶
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 customize the theme colors:
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.
Mẹo
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.
Ghi chú
Thay đổi bảng màu thiết lập sẵn sẽ tự động cập nhật màu sắc của cả bảng màu mặc định và các khối xây dựng sử dụng nó.
Màu trạng thái¶
Status colors indicate the status of certain actions (e.g., Success, Warning, etc.). They are used in pop-up messages that appear to provide feedback to users and website visitors. To customize the website's Status Colors, go to the Advanced section and click the dots to change their color. You can also configure Grays.
Example
Thông tin liên quan đến hành động thành công trên trang web xuất hiện bằng màu xanh lá cây.
Phông chữ¶
Odoo cho phép bạn tùy chỉnh họ phông chữ và cỡ chữ của các thành phần trang web, bao gồm đoạn văn và tiêu đề, nút, và trường nhập liệu.
Cỡ Chữ: Trong các phần Đoạn Văn, Tiêu Đề, Nút, và Trường Nhập Liệu, sử dụng trường Cỡ Chữ để đặt cỡ mặc định. Nhấp vào biểu tượng (Bật/tắt thêm tùy chọn) để mở rộng phần và xác định các cỡ tùy chỉnh (ví dụ: dựa trên cấp độ tiêu đề, kích thước nút, v.v.).
Font Family: Trong các phần Paragraph, Headings và Button, chọn một phông chữ từ menu thả xuống.
Ghi chú
Khi Phông Chữ Hệ Thống được chọn, Odoo sử dụng các phông chữ gốc đã được cài đặt sẵn trên hệ điều hành của khách truy cập. Ví dụ: Android sử dụng Roboto làm phông chữ hệ thống mặc định.
Phông chữ tùy chỉnh¶
Để thêm phông chữ tùy chỉnh không có sẵn mặc định trong Odoo, nhấp vào menu thả xuống Họ Phông Chữ và chọn Thêm Phông Chữ Tùy Chỉnh ở cuối. Trong cửa sổ bật lên Thêm phông chữ Google hoặc tải lên phông chữ tùy chỉnh:
Để thêm phông chữ Google, mở menu thả xuống Chọn Phông Chữ Google và chọn phông chữ mong muốn. Tắt tùy chọn Phục vụ phông chữ từ máy chủ Google nếu trang web của bạn được vận hành từ một địa điểm có quy định yêu cầu tuân thủ các luật như GDPR của Liên minh Châu Âu, nhưng không giới hạn ở đó. Điều này sẽ đảm bảo phông chữ Google được lưu trữ trên máy chủ của trang web thay vì trên máy chủ của Google.
Để tải lên Phông Chữ Tùy Chỉnh từ máy tính của bạn, nhấp vào Chọn Tệp.
Sau khi hoàn tất, nhấp vào Lưu và Tải Lại.
Mẹo
Xem Trước của phông chữ đã chọn được hiển thị ở phía bên phải của cửa sổ.
Kiểu dáng¶
Giao diện của các thành phần trang web có thể được tùy chỉnh thêm. Ví dụ: bạn có thể tùy chỉnh đoạn văn và tiêu đề, nút, liên kết, và trường nhập liệu.
Đoạn văn & tiêu đề¶
Các phần Đoạn Văn và Tiêu Đề cung cấp các tùy chọn định kiểu bổ sung cho các thành phần văn bản này. Bạn có thể:
Sửa đổi cài đặt phông chữ.
Điều chỉnh Chiều Cao Dòng để xác định khoảng cách giữa các dòng văn bản.
Điều chỉnh Lề để xác định khoảng cách xung quanh đoạn văn và tiêu đề.
Nút¶
Để tùy chỉnh kiểu của các nút chính và nút phụ của trang web, điều hướng đến phần Nút và chỉnh sửa các tùy chọn liên quan:
Mở menu thả xuống bên cạnh các trường Kiểu Chính hoặc Kiểu Phụ để thay đổi kiểu cho từng loại nút, chẳng hạn như Tô Đầy, Viền Ngoài, hoặc Phẳng. Khi chọn Viền Ngoài, tùy chọn Độ Rộng Viền sẽ xuất hiện bên dưới, cho phép bạn điều chỉnh độ rộng của viền ngoài của nút.
Sửa đổi cài đặt phông chữ.
Điều chỉnh Padding để thay đổi khoảng cách xung quanh nhãn của các nút.
Sử dụng tùy chọn Round Corners để điều chỉnh bán kính đường viền của các nút.
Thêm hiệu ứng động khi nhấp vào nút trong menu thả xuống On Click Effect.
Mẹo
Để xác định kích thước tùy chỉnh Small và Large cho Padding, Font Size và Round Corners của các nút, nhấp vào biểu tượng (Toggle more options), sau đó sử dụng các trường liên quan.
Liên kết¶
Trong phần Link, mở menu thả xuống bên cạnh Link Style để chọn giao diện của các liên kết trên trang web. Bạn có thể chọn giữa:
No Underline;
Underline On Hover; hoặc
Always Underline.
Trường nhập liệu¶
Để tùy chỉnh kiểu của các trường nhập liệu trên trang web, điều hướng đến phần Input Fields và chỉnh sửa các tùy chọn liên quan:
Điều chỉnh Padding để thay đổi khoảng cách xung quanh các trường.
Sửa đổi cài đặt phông chữ.
Tùy chỉnh Border Width xung quanh các trường.
Xác định Border Radius để làm tròn các góc của trường.
Chọn Background màu để tô các trường.
Shadows¶
Configure the default shadow styles used across sections, cards, and other elements. To customize them, go to the Shadow section, and define the Color, Blur, and Spread values for each shadow size: Normal, Small, and Large. These settings serve as the default shadow styles. Whenever you apply a shadow option to a building block or another website element, the corresponding configured shadow option is automatically applied.
Cài đặt nâng cao¶
Additional settings can be configured in the Advanced section, such as showing or hiding the header and using Code Injection for website verification through an HTML tag.
Bạn cũng có thể cấu hình Google Maps để hiển thị bản đồ và kích hoạt các tính năng định vị địa lý trên trang web, ví dụ: trên trang Contact Us và trong các snippet cụ thể. Để cấu hình tùy chọn này:
Truy cập tài khoản Google của bạn.
Bật Maps Static API, Maps JavaScript API và Places API.
Quan trọng
Không bật Places API (New), vì nó chưa được Odoo hỗ trợ.
Việc sử dụng Google APIs có thể yêu cầu thanh toán cho Google.
Tạo khóa API và sao chép nó.
Trong trình chỉnh sửa trang web của Odoo, chuyển đến tab Giao diện, và trong phần Nâng cao, nhấp vào Khóa tùy chỉnh bên cạnh Google Map.
Dán khóa API đã tạo vào trường Khóa API.
Nhấp Lưu.