[TITLE]
Odoo 网站主题定制指南：颜色、字体、布局与按钮样式全面教程

[DESCRIPTION]
本文系统介绍 Odoo 网站主题的设置方法，涵盖主题选择与切换、主题颜色与状态颜色、颜色预设、页面布局、字体族与大小、自定义字体、按钮样式以及链接样式，并提供详细操作步骤和注意事项，帮助用户快速打造专业美观的企业站点。

[KEYWORDS]
Odoo,网站主题,颜色设置,字体定制,页面布局,按钮样式,颜色预设,状态颜色,自定义字体,主题切换

总体主题

Odoo 提供多种选项来塑造网站的主题，包括其
颜色 <website/themes/colors>、
字体 <website/themes/fonts>、以及
布局 <website/themes/page-layouts>。

首次设置网站时，系统会提示你选择一个主题。将鼠标悬停在主题上可查看每个主题的扩展预览。点击主题即可选中。

:::: note
::: title
注意
:::

  • 如果不选择主题直接离开，网站将使用默认主题创建。
  • 如有需要，你可以随后 切换主题 <website/themes/switch>。
    ::::

在网站构建器中，主题选项卡提供多种自定义网站整体主题的功能。点击 编辑 并进入 主题 选项卡即可。

完成所需更改后，点击 保存 以确认并将更改应用到网站。

在 网站 部分，点击 切换主题 打开主题选择器。将鼠标悬停在主题上可查看每个主题的扩展预览。点击主题即可将其应用到你的网站。

Odoo 的网站编辑器包含两类颜色：主题颜色 <website/themes/theme-colors> 与 状态颜色 <website/themes/status-colors>。

主题颜色指在网站所有页面中统一显示的一组颜色，由五种颜色组成：三种主色以及两种浅色和深色。

要编辑网站颜色，请进入网站编辑器的 颜色 部分，然后：

  • 点击想要更改的颜色点，选择 纯色 或点击 自定义 手动挑选特定色调（或输入其 #HEX 或 RGBA 代码）。
  • 点击调色板图标并选择一个颜色调色板。此操作会重置所有颜色自定义；随后点击颜色点可单独更改某一颜色。

Odoo 会自动为所选调色板生成 颜色预设。这些预设是预定义的颜色组合，应用于网站的不同元素，以提供结构化且视觉上协调的设计。选择调色板后，其预设会决定这些颜色在按钮、背景、文字等构建块中的分配方式。若需进一步修改，点击 颜色预设 并选择相应预设进行自定义。每个颜色预设包含构建块的背景、文字、标题、链接、主按钮和次按钮的颜色。

要将颜色预设应用于页面上的构建块，选中该构建块，进入 自定义 选项卡，点击 背景 旁的颜色点并选择 主题。

:::: note
::: title
注意
:::

更改颜色预设会自动更新该预设默认值以及所有使用该预设的构建块颜色。
::::

状态颜色用于指示某些操作的状态（如 成功、警告 等），常出现在弹出消息中，为用户和访客提供反馈。要自定义网站的 状态颜色，向下滚动至 高级 部分，点击对应的颜色点进行修改。

::: {.example alt=“状态颜色选择”}
.. image:: themes/advanced.png


:::

页面布局 选项位于 网站 部分，可用于更改页面上构建块和其他元素的整体显示与间距。点击下拉菜单并选择所需布局。 在 页面布局 下，你还可以通过选择 图像、使用 图案，或保持为空来自定义 背景。

Odoo 允许你为网站的特定元素（如段落、标题、按钮、输入字段）自定义字体族和大小。

  • 字体族：在 段落、标题 与 按钮 部分的下拉菜单中选择字体。
  • 字体大小：在 段落、标题、按钮 与 输入字段 部分的 字体大小 字段中设置默认尺寸。点击 fa-caret-right（向右箭头）图标展开更多设置，可根据标题层级、按钮大小等自定义尺寸。

此外，每个元素专属的设置区还提供 行高、外边距 等额外样式选项，以实现更精细的调整。

你可以在网站中使用 Odoo 默认未提供的字体。添加自定义字体的步骤如下：

  1. 在 字体族 字段的下拉菜单中选择 添加自定义字体（位于列表底部）。
  2. 在弹出窗口中：
    • 若要添加 Google 字体，点击 选择 Google 字体 并在列表中选中所需字体。若网站所在地区需遵守 GDPR 等法规，可关闭 从 Google 服务器加载字体，使字体存储在你的网站服务器上。
    • 若要从本地上传字体，点击 选择文件 并上传字体文件。
  3. 完成后点击 保存并重新加载。

要自定义网站主按钮和次按钮的样式，请在网站编辑器的 按钮 部分进行以下操作：

  • 点击 主样式 或 次样式 字段右侧的箭头，选择 填充、轮廓 或 平面 中的任意一种。选择 轮廓 时，会出现 边框宽度 选项，可调节按钮轮廓的粗细。
  • 修改字体：参见 字体 <website/themes/fonts>。
  • 调整 内边距 以改变按钮标签四周的像素间距。
  • 使用 圆角 选项自定义按钮的圆角程度。
  • 在 点击效果 下拉菜单中为按钮点击时添加动画。

:::: tip
::: title
提示
:::

你可以为按钮的 内边距、字体大小 与 圆角 分别定义 小、大 两种尺寸。点击 fa-caret-right（向右箭头）并在相应字段中填写数值即可。


::::

在 链接 部分，点击 链接样式 以选择网站链接的显示方式。下拉菜单中提供 无下划线、悬停时下划线 与 始终下划线 三种选项。

[SUMMARY]

  • Odoo 网站主题定制
    • 主题选择与切换
      • 初始主题选择
      • 后期切换主题
    • 颜色设置
      • 主题颜色
        • 主色、浅色、深色
        • 颜色点编辑（纯色 / 自定义）
        • 调色板与颜色预设
        • 预设应用于构建块
      • 状态颜色
        • 成功、警告等
        • 高级设置中修改
      • 颜色预设说明
    • 页面布局
      • 布局选择
      • 背景图像 / 图案
    • 字体定制
      • 字体族选择（段落、标题、按钮）
      • 字体大小设置与自定义
      • 行高、外边距等额外样式
      • 自定义字体
        • 添加 Google 字体
        • 本地上传字体
    • 按钮样式
      • 主/次按钮样式（填充、轮廓、平面）
      • 边框宽度、内边距、圆角、点击动画
      • 不同尺寸（小/大）设置
    • 链接样式
      • 无下划线 / 悬停下划线 / 始终下划线
    • 注意事项
      • 未选择主题默认使用默认主题
      • 颜色预设修改会同步更新所有使用该预设的元素
      • GDPR 合规的自定义字体加载方式