Tema geral
O Odoo oferece várias opções para moldar o tema do seu site, incluindo suas cores <website/themes/colors>, fontes <website/themes/fonts> e layout <website/themes/page-layouts>.
Ao configurar seu site pela primeira vez, você é solicitado a selecionar um tema. Passe o mouse sobre os temas para ver uma visualização estendida de cada um. Clique em um tema para selecioná-lo.
No construtor de sites, a guia Theme oferece várias opções para personalizar o tema geral do seu site. Para acessá-la, clique em Edit e vá para a guia Theme.
Depois de fazer as alterações desejadas, clique em Save para confirmar e aplicá-las ao seu site.
Tema
Na seção Website, clique em Switch Theme para abrir o seletor de tema. Passe o mouse sobre os temas para ver uma visualização estendida de cada um. Clique em um tema para aplicá-lo ao seu site.
Cores
O editor de sites do Odoo possui dois tipos principais de cores: cores do tema <website/themes/theme-colors> e cores de status <website/themes/status-colors>.
Cores do tema
Cores do tema referem-se ao conjunto de cores exibidas em todas as páginas do seu site. Elas são compostas por cinco cores: três cores principais e duas cores claras e escuras.
Para editar as cores do seu site, vá para a seção Colors no editor de sites, depois:
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.
O Odoo cria automaticamente Color Presets para sua paleta escolhida. Estas são combinações de cores predefinidas aplicadas a diferentes elementos do seu site para fornecer um design estruturado e visualmente atraente. Quando você seleciona uma paleta de cores, suas predefinições definem como essas cores são distribuídas entre diferentes elementos de um bloco de construção, como botões, fundos e texto. Se você quiser modificá-las, clique em Color Presets e clique em uma predefinição para personalizá-la ainda mais. Cada predefinição de cor contém cores para o fundo, texto, títulos, links, botões primários e botões secundários do seu bloco de construção.
Para aplicar uma predefinição de cor a um bloco de construção no seu site, selecione o bloco de construção, vá para a guia Customize, clique no ponto de cor localizado ao lado de Background e escolha um Theme.
Cores de status
As cores de status são usadas para indicar o status de certas ações (por exemplo, Sucesso, Aviso, etc.). Elas são usadas em mensagens pop-up que aparecem para fornecer feedback aos usuários e visitantes do site. Para personalizar as Cores de Status do seu site, role para baixo até a seção Avançado e clique nos pontos para alterar suas cores.
Layout da página
A opção Layout da Página na seção Site permite que você altere a exibição geral e o espaçamento dos blocos de construção e elementos do site nas páginas. Clique no menu suspenso e selecione o layout desejado. Em Layout da Página, personalize seu Fundo escolhendo uma Imagem, usando uma imagem selecionada em um Padrão, ou deixando em branco.
Fontes
O Odoo permite que você personalize a família e o tamanho da fonte para elementos específicos do seu site, incluindo parágrafos, títulos, botões e campos de entrada.
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 fa-caret-right (arrow) icon to expand the section and define custom sizes (e.g., based on the heading level, button size, etc.).
Além disso, cada seção específica de elemento oferece opções de estilo adicionais, como Altura da Linha e Margens, para personalização adicional.
Fontes personalizadas
É possível usar fontes no seu site que não são oferecidas por padrão no Odoo. Para adicionar uma fonte personalizada, clique no menu suspenso relacionado ao campo Família da Fonte e selecione Adicionar uma Fonte Personalizada na parte inferior do menu suspenso. Na janela pop-up:
To add a Google font, click on Select a Google Font and click on the desired font in the list. 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 that the Google Font is stored on your website's server instead of Google's.
To upload a custom font from your computer, click on Choose File.
Quando terminar, clique em Salvar e Recarregar.
Estilos de botão
Para personalizar o estilo dos botões primários e secundários do seu site, navegue até a seção Botão no editor de site e edite as opções relevantes:
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 <website/themes/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.
Estilo de link
Na seção Link, clique em Estilo de Link para escolher a aparência dos links no seu site. Selecione Sem Sublinhado, Sublinhado ao Passar o Mouse ou Sempre Sublinhado no menu suspenso.