高级

高级

创建样式预设

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

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

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

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

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

YAML文件的解剖

Gantry创建样式预设

为了创建这些新的预设,您将需要配置 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

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

设置 描述
标签 这是每个预设顶部的顶层线。它应该是小写的,没有空格。例如:preset1
image image标签将在样式面板中显示预设的缩略图图像。
description 这是样式将在样式面板中显示的名称。这一行可以有空格和大写字母。例如:Example 要么 Preset 1
styles 这将创建组成样式预设主体的部分。颜色,断点等都在这里。
colors 这些是预设的主要颜色。这些颜色显示在缩略图下方。
base 基于 backgroundtext-color等等是风格的核心默认背景/文字颜色。
accent 在这里创建风格的颜色。这些颜色通常被编号(accent-1accent-2
menustyle 预设的这部分决定菜单粒子的样式。
font 本部分可让您设置预设字体。
Sections Gantry主题的每个部分都能够拥有自己的样式设置。通常这些包括backgroundtext-color 但也可能包含图像和覆盖设置。
breakpoints 设置预设的默认断点。
说点什么...
取消
你是一个访客 ( 注册 ? )
作为一个访客
对话中的人:
加载评论... 注释将在之后刷新 00:00.
joomlass-logo31.png

Search