本頁面由 Cloud Translation API 翻譯而成。

自訂主題

您正在查看 Apigee Edge 說明文件。
前往 Apigee X 說明文件。 info

主題包含全域樣式表單，可為入口網站中的所有頁面提供一致的外觀和感受。主題的目的，是讓您一次變更所有入口網頁的外觀和風格。

您可以自訂、預覽及發布主題，如以下各節所述。

探索主題編輯器

在主題編輯器中自訂、預覽及發布入口網站的主題。

如要存取主題編輯器，請按照下列步驟操作：

在側邊導覽列工具列中，依序選取「發布」>「入口網站」，選取入口網站，然後點選到達網頁中的「主題」。
編輯入口網站時，請按一下頂端導覽列工具列中下拉式選單的「主題」。

主題編輯器

如上圖所示，主題編輯器可讓您執行下列操作：

使用基本樣式主題編輯器快速自訂基本樣式，包括下列元素：
在進階主題編輯器中覆寫主題變數或自訂主題樣式元素，包括但不限於下列元素：
預覽主題變更
在瀏覽器中預覽入口網站
將主題發布至線上入口網站

關於基礎主題

定義網站外觀的大部分基礎主題樣式規則，都是根據 Angular Material Design 而定。Angular 材質設計會使用以格線為基礎的版面配置，以及一致的元件和樣式，提供統一的互動體驗。

樣式規則是使用 Sassy 階層式樣式表 (SCSS) 定義。SCSS 是階層式樣式表 (CSS) 的超集，具備下列優點：

全域變數，可在整個樣式表單中重複使用。
巢狀規則可節省樣式表單的開發時間。
建立混合函式和函式的能力

例如：

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

在網頁上轉譯內容之前，SCSS 會先編譯並轉換為舊版 CSS。

基本主題會使用角落 Material 樣式表，也就是 Material Design 主題設定 SCSS 檔案 (material-theming.scss)。這個樣式表會宣告變數、函式和混合，可使用自訂變數和 SCSS 區段覆寫，如「使用進階主題編輯器自訂主題」一文所述。

系統會根據您選取的 UI 主題，宣告多個 SCSS 變數，用於定義字體排版、顏色和版面配置樣式，並由基本樣式表使用。您可以覆寫佈景主題變數參考資料中列出的變數。

自訂調色盤

您可以使用基本樣式編輯器或覆寫主題變數自訂調色盤。

關於調色盤類別

整合式入口網站的調色盤定義會分為下列類別，這些類別是使用基礎主題中的 Material Design 顏色樣式定義。

類別	樣式
主要	導覽工具列、標題、資訊卡標題和按鈕
次要	`<pre>` 和 `<code>` 文字
輔色	導覽、連結和重音按鈕
警告	警告和錯誤

使用基本樣式編輯器自訂調色盤

使用基本樣式編輯器，快速自訂主要和強調色彩調色盤。

如要使用基本樣式編輯器自訂調色盤，請按照下列步驟操作：

存取主題編輯器。
如要自訂主要顏色，請在「主要顏色」下拉式選單中選取顏色，或是按一下「自訂」，然後在文字方塊中輸入自訂的十六進位顏色值。
如要自訂強調色，請在「強調色」下拉式選單中選取顏色，或按一下「自訂」，然後在文字方塊中輸入自訂的十六進位顏色值。
按一下「儲存」以儲存您的變更。
在預覽窗格中查看變更內容，或按一下「預覽」，在瀏覽器中預覽入口網站的變更內容。
注意：您可以點選預覽窗格中的入口網站導覽，查看所有頁面上的變更。
按一下「發布」即可發布主題。系統會提示您確認更新。

透過覆寫主題變數自訂調色盤

如要透過覆寫主題變數自訂色彩調色盤，請存取進階主題編輯器，並在「變數」部分加入一或多個下列變數，並調整其值，以分別變更主要、次要、強調或警告訊息的顏色。請參閱「關於色彩組合類別」。

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

查看匯入的 Material 主題設定 SCSS 檔案 (material-theming.scss) 內容，找出預先定義的顏色變數 (例如 $mat-grey)。數值分別代表預設、較淺和較深元素的陰影值。

或者，您也可以自行建立顏色變數。例如：

$my-color-variable: (    
    50 : #f9f0e7,    
    100 : #f0d8c2,    
    200 : #e6bf9a,    
    300 : #dba572,    
    400 : #d49153,    
    500 : #cc7e35,    
    600 : #c77630,    
    700 : #c06b28,    
    800 : #b96122,    
    900 : #ad4e16,    
    A100 : #ffebe0,     
    A200 : #ffc9ad,    
    A400 : #ffa77a,    
    A700 : #ff9661,     
    // Color to render text presented on a background of the same level       
    contrast: (    
        50 : #000000,     
        100 : #000000,     
        200 : #000000,     
        300 : #000000,    
        400 : #000000,     
        500 : #000000,    
        600 : #000000,    
        700 : #ffffff,     
        800 : #ffffff,    
        900 : #ffffff,     
        A100 : #000000,     
        A200 : #000000,     
        A400 : #000000,     
        A700 : #000000,     
    )    
);

然後使用它變更色版，如以下範例所示：

$primary: mat-palette($my-color-variable, 900, 200, 400);

自訂字型系列和樣式

您可以使用基本樣式編輯器或覆寫主題變數，自訂字型系列和樣式。你也可以匯入自訂字型。

使用基本樣式編輯器自訂字型系列和樣式

使用基本樣式編輯器快速自訂字型系列和樣式，如以下圖所示。

如要使用基本樣式編輯器自訂字型系列和樣式，請按照下列步驟操作：

存取主題編輯器。
如要變更字型系列，請在「字型」下拉式選單中選取所需值。
如要變更字型樣式，請展開「字型樣式」部分，然後視需要編輯樣式，包括所需 HTML 元素的字型大小、行高和字型粗細。
按一下「儲存」即可儲存變更。
在預覽窗格中查看變更內容，或按一下「預覽」，在瀏覽器中預覽入口網站的變更內容。
注意：您可以點選預覽窗格中的入口網站導覽，查看所有頁面上的變更。
按一下「發布」即可發布主題。系統會提示您確認更新。

覆寫主題變數，自訂字型系列和樣式

如要透過覆寫主題變數來自訂字型系列和樣式，請存取進階主題編輯器，並在「變數」部分加入一或多個含有調整值的字型系列和樣式變數。

舉例來說，如要將預設字型變更為 Arial，請定義下列變數：

$typography-main-font-family: 'Arial';

匯入自訂字型

匯入 Google 字型 (不在預設字型組合中) 或您自己的自訂字型，然後在樣式表中參照自訂字型，如下所述。

匯入 Google 字型

如要匯入 Google 字型，請存取進階主題編輯器，然後在「自訂樣式」部分匯入字型，如下所示：

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

匯入自訂字型

使用 @font-face CSS 規則匯入自訂字型。@font-face 規則支援多種不同的檔案格式，包括 TrueType (TTF)、Web Open Font Format (WOFF) 等。

如何匯入自訂字型：

您可以選擇將字型檔案上傳至素材資源管理工具，如「上傳檔案」一文所述。
存取進階主題編輯器，並將 @font-face 規則新增至「自訂樣式」部分，其中 font-family 會指定字型名稱、url 會指定字型檔案的位置 (在本例中為素材資源管理工具)、MyCustomFont.tff 是自訂字型檔案的名稱，而 format 則會指定字型格式。
```
@font-face {
   font-family: 'MyCustomFont';
   src: url('files/MyCustomFont.tff') format('truetype')
}
```

在樣式表單中參照自訂字型

在「變數」部分的其中一個字型系列和樣式變數中參照自訂字型。例如：

$typography-main: mat-typography-config(    
    $font-family: '"Indie Flower", "Oxygen", sans-serif',    
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers    
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers    
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers    
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers    
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags    
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags    
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags   
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags   
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text   
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text    
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text    
    $button: mat-typography-level(14px, 14px, 500), // Buttons    
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

自訂標誌

您可以在下列位置自訂入口網站使用的標誌：

標誌位置	預設檔案大小
電腦版導覽工具列	196 x 32 像素
行動版導覽列	156 x 32 像素
瀏覽器網址列中的網站小圖示 (以及其他位置)	32 x 32 像素
登入頁面	392 x 64 像素

針對電腦和行動裝置顯示畫面，自訂導覽工具列中的標誌。視瀏覽器的寬度而定，你可能會看到電腦版或行動版的標誌。

您無法刪除主要標誌，只能替換。如果您未指定行動裝置顯示的標誌，系統會預設使用主要標誌。

如要自訂導覽工具列中用於電腦和行動裝置螢幕的標誌，請按照下列步驟操作：

取得一或多個適合使用的公司標誌。
請參閱上表的建議大小。
存取主題編輯器。
如要在電腦版畫面上替換頂端導覽列工具列中的標誌：
a. 在右側窗格的「基本樣式」下方，按一下「主要標誌」欄位下方的。
b. 在本機目錄中瀏覽標誌的桌機版。
c. 按一下「開啟」即可上傳檔案。
如要在行動裝置上替換頂端導覽工具列中的標誌：
a. 在右側窗格的「基本樣式」下方，展開「標誌選項」，然後按一下「行動版標誌」欄位下方的。
b. 在本機目錄中瀏覽標誌的行動版。
c. 按一下「開啟」即可上傳檔案。
按一下「儲存」，即可在左側窗格中預覽變更內容。
按一下「發布」，將變更內容發布到入口網站。出現提示時，請確認操作。

自訂網站小圖示

如要自訂網路瀏覽器網址列 (以及其他位置) 中使用的圖示：

取得適合做為 favicon 的貴公司標誌副本。
請參閱上表的建議尺寸。
存取主題編輯器。
在右側窗格中的「Basic Styles」下方，展開「Logo options」，然後按一下「Favicon」欄位下方的。
在本機目錄中瀏覽標誌的網站小圖示版本。
按一下「開啟」即可上傳檔案。
按一下「儲存」，即可在左側窗格中預覽變更內容。
按一下「發布」，將變更內容發布到入口網站。出現提示時，請確認操作。

如要為開發人員計畫設定註冊和登入體驗，請按照「管理公司資訊」一節的說明，自訂登入頁面上的標誌。

以下提供自訂導覽工具列的快速提示：

如要自訂頁首和頁尾中導覽工具列的顏色，請變更主要顏色，詳情請參閱「自訂調色盤」一節。
如要自訂頁首和頁尾導覽列中選單項目的字型大小和樣式，請變更「字型」和「按鈕」樣式，詳情請參閱「自訂字型系列和樣式」。
如要自訂標題導覽列工具列的高度，請存取進階主題編輯器，然後在「變數」部分加入下列變數，並加入調整後的值： $layout-header-height: 64px;
如要自訂頁尾導覽列工具列的高度，請存取進階主題編輯器，然後在「變數」部分加入下列變數，並調整其值： $layout-footer-height: 44px;
自訂導覽工具列中的標誌，以便在電腦和行動裝置上顯示。

自訂背景圖片

如要自訂首頁的背景圖片，請執行下列任一項操作：

使用相同的名稱和相對檔案大小 (3000 像素 x 1996 像素)，將您自己的 home-background.jpg 圖片上傳至素材資源管理工具。詳情請參閱「管理資產」。
如要修改背景圖片檔案名稱及其邊框間距，請存取進階主題編輯器，並在「自訂樣式」專區中加入下列 SCSS 和調整過的值：
```
#index {
  &.main {
    .main-content {
      padding: 0;
      background-image: url('/files/home-background.jpg');
      background-size: cover;
    }
  }
}
```
如要為入口網站中的所有頁面新增背景圖片，請存取進階主題編輯器，並在「自訂樣式」專區中加入下列 SCSS 和調整過的值：
```
 body {
    background-image: url('/files/background-image.jpg');
 }
```

自訂字體排版

如要自訂字體排版，請使用進階主題編輯器，然後在「變數」部分調整下列一或多個字體排版變數的值：

$typography-main
$typography-header
$typography-footer
$typography-context-bar

例如：

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

接著，您可以將字體排版套用至特定 CSS 選取器，如以下範例所示：

@include mat-base-typography($custom-typography-config, '.css-selector');

或者，您也可以將自訂字體排版中定義的特定字體排版等級套用至 CSS 選取器，如以下範例所示：

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

使用進階主題編輯器自訂主題

您可以覆寫主題變數，或是直接在進階主題編輯器中自訂主題樣式元素，來自訂主題。

覆寫主題變數

在進階主題編輯器的「變數」部分覆寫主題變數。如需主題變數清單，請參閱「主題變數參考資料」。

舉例來說，如要自訂標頭和頁尾導覽工具列的高度，請在進階主題編輯器的「變數」部分中，分別加入下列變數，並調整值：

如需其他範例，請參閱：

透過覆寫主題變數自訂調色盤
透過覆寫主題變數自訂字型系列和樣式

如要覆寫主題變數，請按照下列步驟操作：

存取主題編輯器。
按一下右側窗格中的「進階」。
按一下「變數」。
新增變數覆寫值。
如需可覆寫的變數清單，請參閱「佈景主題變數參考資料」。
按一下「儲存」即可儲存變更。
按一下 x 關閉進階主題編輯器。
您可以在預覽窗格中查看變更內容，或按一下「預覽」，在瀏覽器中預覽入口網站的變更內容。注意：您可以點按預覽窗格中的入口網站導覽，查看所有頁面上的變更。
按一下「發布」即可發布主題。系統會提示您確認更新。

自訂主題樣式元素

直接在進階主題編輯器的「Custom Styles」專區中自訂主題樣式元素。

舉例來說，如要變更在入口網站註冊應用程式時，「新應用程式」頁面上顯示的「建立」按鈕顏色，請加入下列主題樣式元素，並調整值：

.main .main-content button.app-save {
  color: blue;
}

另請參閱「自訂背景圖片」。

如要自訂主題樣式元素，請按照下列步驟操作：

存取主題編輯器。
按一下右側窗格中的「進階」。
按一下「自訂樣式」。
新增主題樣式元素。
按一下「儲存」即可儲存變更。
按一下「x」x關閉進階主題編輯器。
在預覽窗格中查看變更內容，或按一下「預覽」，在瀏覽器中預覽入口網站的變更內容。
注意：您可以點選預覽窗格中的入口網站導覽，查看所有頁面上的變更。
按一下「發布」即可發布主題。系統會提示您確認更新。

在入口網站頁面中建立全寬面板

如何在入口網站頁面中建立全寬面板：

如「自訂主題樣式元素」一節所述，請在進階主題編輯器中新增下列主題樣式元素：

.full-width__container {
  position: relative;
  left: 50%;
  right: 50%;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image: url("/files/your-image.jpg");
  background-size: cover;
  background-position: 50% 50%;
  padding: 0;
}

.full-width__centered {
  @include centered-content();
}

.full-width__content {
  // Add any 'additional' padding here and NOT in .full-width__centered. Adding padding to
  // .full-width__centered will result in a horizontal scroll bar. You can exclude this class
  // and corresponding <div> container if no additional padding control other than the
  // min page padding is needed.
}

如「使用頁面編輯器開發入口網站內容」一文所述，請編輯入口網站頁面內容，加入下列 <div> 元素：

<div class="full-width__container">
  <div class="full-width__centered">
    <div class="full-width__content">  <!-- Include this div if you need additional padding -->
      <h2>Full Width Container</h2>
      <p>
        This content will align with the page header and other content outside
        of this full width container
      </p>
    </div>
  </div>
</div>

發布主題

如要將新增的主題和樣式自訂選項發布至線上入口網站，請按照下列步驟操作：

存取主題編輯器。
按一下 [發布]。

如要在直播入口網站中查看已發布的內容，請按一下頂端導覽列工具列中的「查看入口網站」。

瞭解 CSS 特殊性規則

在樣式元素宣告中使用 !important 規則覆寫其他宣告是不當做法，不建議使用。!important 規則會影響 CSS 的層疊和特定規則，可能會使樣式元素宣告的偵錯作業更加困難。

CSS 專屬性說明瀏覽器在發生衝突時，用來判斷 CSS 樣式元素宣告優先順序的方法。計算 CSS 特異性時，系統會根據選取器類型，為特定 CSS 樣式元素宣告套用權重。CSS 選取器越具體，權重就越高。舉例來說，ID 屬性在計算時的權重會高於類型選取器。

舉例來說，如果您在 CSS 程式碼中定義下列樣式元素，段落元素會以紅色顯示，因為 div 元素中的 p 樣式元素宣告比 p 樣式元素宣告更具體。

div p { color: red }  ← More specific  
p { color: blue }

同樣地，如果您在 CSS 程式碼中定義下列樣式元素宣告，則 <div class="test"></div> 標記內的任何文字都會以藍色顯示，因為 div 元素中的 id 屬性樣式宣告比 div 樣式元素宣告更為明確。

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

對於明確性相同的樣式元素宣告，系統會優先採用最後定義的樣式元素宣告。舉例來說，如果按照下列樣式元素宣告的順序，段落元素會以藍色顯示。

p { color: red }  
p { color: blue }  ← Last specified

主題變數參照

如「覆寫主題變數」一節所述，以下各節將概要說明可在進階主題編輯器的「變數」部分覆寫的變數。

基本主題變數
調色盤變數
字型系列和樣式變數
字體排版變數

基本主題變數

自訂整個網站所使用的基礎主題的前景色彩。有效值為 light 和 dark。

$base-theme: light;

調色盤變數

如要自訂調色盤，請修改下列變數，分別變更主要、次要、強調和警告訊息顏色。請參閱「關於色彩組合類別」。

$primary: mat-palette($mat-grey, 800, 100, 900); 
$secondary: mat-palette($mat-green); 
$accent: mat-palette($mat-blue); 
$warn: mat-palette($mat-red);

數值分別代表預設、較淺色和較深色元素的陰影值。查看 material 主題設定 SCSS 檔案 (material-theming.scss) 的內容，找出預先定義的顏色變數。

例如，您可以將主要色調變更為綠色，如下所示：

$primary: mat-palette($mat-green, 800, 100, 900);

如要只自訂基礎主題中定義的預設顏色組合的陰影值，請加入以下程式碼，並調整陰影值：

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

字型系列和樣式變數

自訂字型系列和樣式。

// If using a custom font, import it by URL. 
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

指定您自己的自訂字體排版，以便更精細地控管，如以下範例所示：

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

字體排版變數

自訂 Angular Material 字體排版。每個排版層級都會定義字型大小、行高和字型粗細。

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);

自訂主題

探索主題編輯器

關於基礎主題

自訂調色盤

關於調色盤類別

使用基本樣式編輯器自訂調色盤

透過覆寫主題變數自訂調色盤

自訂字型系列和樣式

使用基本樣式編輯器自訂字型系列和樣式

覆寫主題變數，自訂字型系列和樣式

匯入自訂字型

匯入 Google 字型

匯入自訂字型

在樣式表單中參照自訂字型

自訂標誌

自訂導覽工具列中的標誌，以便在電腦和行動裝置上顯示

自訂網站小圖示

自訂登入頁面上的標誌

自訂導覽工具列

自訂背景圖片

自訂字體排版

使用進階主題編輯器自訂主題

覆寫主題變數

自訂主題樣式元素

在入口網站頁面中建立全寬面板

發布主題

瞭解 CSS 特殊性規則

主題變數參照

基本主題變數

調色盤變數

字型系列和樣式變數

字體排版變數