样式预设是在配色方案和其他样式选项之间快速轻松切换的好方法。对于开发人员创建网站或添加到现有网站，创建新预设或编辑现有网站是快速切换预设样式选项的好方法。

例如，如果您的网站具有您想要在一个或多个页面中使用的特定配色方案或背景图像，则可以创建一个预设，以便在创建新页面时只需选择它即可。

为主题的样式预设创建覆盖

为了覆盖主题的默认样式预设，您需要创建一个新的 presets.yaml文件。该文件将取代所包含的设置presets.yaml文件的主题。如果您希望对现有预设进行一些修改，我们建议您复制现有的预设presets.yaml 文件位于 THEME_DIR/gantry/ 并在保存到自定义目录之前进行修改。

创建新的样式预设非常简单。你需要做的第一件事是创建一个新的presets.yaml文件。这个文件应该放在/custom/gantry/目录。这将防止您的自定义预设在主题更新时被覆盖。

YAML文件的解剖

为了创建这些新的预设，您将需要配置 presets.yaml文件。该文件告诉Gantry什么风格预设的名称，缩略图和设置。

以下是我们新的YAML文件中的示例代码：

preset1:
  image: 'gantry-admin://images/preset1.png'
  description: 'Preset 1'
  colors:
    - '#ffffff'
    - '#000000'
  styles:
    base:
      background: '#7b00f7'
      text-color: '#605c72'
      text-active-color: '#232529'
    accent:
      color-1: '#7b00f7'
      color-2: '#ffe6a3'
    menustyle:
      text-color: '#ffffff'
      text-color-alt: '#8e9dab'
      text-color-active: 'rgba(255,255,255, 0.7)'
      background-active: 'rgba(255,255,255, 0)'
      sublevel-text-color: '#ffffff'
      sublevel-text-color-active: '#ffffff'
      sublevel-background: '#000000'
      sublevel-background-active: '#7b00f7'
    font:
      family-default: 'catamaran, Helvetica, Tahoma, Geneva, Arial, sans-serif'
    top:
      background: '#ffffff'
      text-color: '#605c72'
    navigation:
      background: 'rgba(255,255,255, 0)'
      text-color: '#ffffff'
    slideshow:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/slideshow/img-01.jpg'
      text-color: '#605c72'
    header:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/header/img-01.jpg'
      text-color: '#605c72'
    above:
      background: '#000000'
      background-image: 'gantry-media://backgrounds/above/img-01.jpg'
      text-color: '#ffffff'
    feature:
      background: '#ffffff'
      text-color: '#605c72'
    showcase:
      background: '#ffffff'
      text-color: '#605c72'
    utility:
      background: '#ffffff'
      text-color: '#605c72'
    main:
      background: '#ffffff'
      text-color: '#605c72'
    expanded:
      background: '#ffffff'
      text-color: '#605c72'
    extension:
      background: '#ffffff'
      text-color: '#605c72'
    bottom:
      background: '#ffffff'
      text-color: '#605c72'
    footer:
      background: '#000000'
      text-color: '#605c72'
    copyright:
      background: '#000000'
      text-color: '#605c72'
    offcanvas:
      background: '#7b00f7'
      text-color: '#ffffff'
      toggle-color: '#000000'
    breakpoints:
      large-desktop-container: 75rem
      desktop-container: 60rem
      tablet-container: 51rem
      large-mobile-container: 30rem
      mobile-menu-breakpoint: 51rem
preset25:
  image: 'gantry-admin://images/preset1.png'
  description: 'Preset 25'
  colors:
    - '#000000'
    - '#ffe6a3'
  styles:
    base:
      background: '#000000'
      text-color: '#000000'
      text-active-color: '#000000'
    accent:
      color-1: '#7b00f7'
      color-2: '#ffe6a3'
    menustyle:
      text-color: '#ffffff'
      text-color-alt: '#8e9dab'
      text-color-active: 'rgba(255,255,255, 0.7)'
      background-active: 'rgba(255,255,255, 0)'
      sublevel-text-color: '#ffffff'
      sublevel-text-color-active: '#ffffff'
      sublevel-background: '#000000'
      sublevel-background-active: '#7b00f7'
    font:
      family-default: 'catamaran, Helvetica, Tahoma, Geneva, Arial, sans-serif'
    top:
      background: '#ffffff'
      text-color: '#605c72'
    navigation:
      background: 'rgba(255,255,255, 0)'
      text-color: '#ffffff'
    slideshow:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/slideshow/img-01.jpg'
      text-color: '#605c72'
    header:
      background: '#ffffff'
      background-image: 'gantry-media://backgrounds/header/img-01.jpg'
      text-color: '#605c72'
    above:
      background: '#000000'
      background-image: 'gantry-media://backgrounds/above/img-01.jpg'
      text-color: '#ffffff'
    feature:
      background: '#ffffff'
      text-color: '#605c72'
    showcase:
      background: '#ffffff'
      text-color: '#605c72'
    utility:
      background: '#ffffff'
      text-color: '#605c72'
    main:
      background: '#ffffff'
      text-color: '#605c72'
    expanded:
      background: '#ffffff'
      text-color: '#605c72'
    extension:
      background: '#ffffff'
      text-color: '#605c72'
    bottom:
      background: '#ffffff'
      text-color: '#605c72'
    footer:
      background: '#000000'
      text-color: '#605c72'
    copyright:
      background: '#000000'
      text-color: '#605c72'
    offcanvas:
      background: '#7b00f7'
      text-color: '#ffffff'
      toggle-color: '#000000'
    breakpoints:
      large-desktop-container: 75rem
      desktop-container: 60rem
      tablet-container: 51rem
      large-mobile-container: 30rem
      mobile-menu-breakpoint: 51rem

以下是主要设置及其功能的简要分解：