自訂主題 (原始版本)

您正在查看 Apigee Edge 說明文件。
查看 Apigee X 說明文件。 資訊

主題由全域層疊式樣式表 (CSS) 組成，可為入口網站中的所有頁面提供一致的外觀和風格。主題的目標是讓您一次變更所有入口網站頁面的外觀和風格。

範例入口網站提供的大多數預設樣式都是以「Bootstrap」為基礎。您可以自訂、預覽及發布主題，詳情請參閱以下各節。

請觀看以下影片，瞭解如何自訂入口網站主題。

使用主題編輯器

在主題編輯器中自訂、預覽及發布入口網站的主題。如要開啟主題編輯器，請在頂端導覽列的下拉式選單中選取「主題」。

主題編輯器

如上圖所示，主題編輯器可讓您：

新增自訂樣式

在樣式編輯器窗格中新增自己的 CSS 程式碼來自訂主題。支援所有 CSS 樣式元素。

如何自訂主題：

  1. 在頂端導覽列的下拉式選單中，選取「主題」。
  2. 在頁面右側的樣式編輯器窗格中新增自訂 CSS 程式碼。
  3. 在預覽窗格中預覽變更，然後按一下「重新載入預覽畫面」。
    > 注意：只要點閱入口網站導覽，即可預覽所有頁面上的內容。
  4. 按一下「發布」，發布主題變更。
  5. 點選「發布」來確認更新。

使用貴公司的標誌自訂「您的標誌」圖片，並替換檔案管理員中的下列圖片檔，方法是按照相同的名稱和相對檔案大小上傳標誌：

  • logo.png (140 像素 x 40 像素)
  • mobile-logo.png (140 像素 x 40 像素)

此外，請視需要修改 CSS 樣式表中的下列內容：

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}



.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

詳情請參閱管理資產。

自訂首頁的背景圖片

請在 CSS 樣式表中修改下列內容，自訂首頁的背景圖片。

  • 修改背景圖片檔案及其位置。
    您可以使用相同名稱和相對檔案大小 (1440 像素 x 540 像素)，將自己版本的 portal-hero.jpg 圖片上傳到檔案管理員。如要使用其他檔案名稱，請務必在下方 CSS 中編輯 background-image 值。

    /* ==== Jumbotron ====
a billboard for drawing attention, from Bootstrap  */

home-page-jumbotron-bg {
    background-image: url('/files/portal-hero.jpg');
}

  • 修改疊加在背景圖片的文字格式。

    .jumbotron {
 text-align: center;
 height: 500px;
 background-size: cover;
 margin: -50px -30px 0 -30px;
 border-radius: 0;
}

.jumbotron h1 {
 font-size: 40px;
 font-weight: 400;
}

.jumbotron h2 {
 font-size: 25px;
 font-weight: 400;
}

.jumbotron a, .jumbotron a:hover {
 font-size: 18px;
}

.jumbotron p {
 max-width: none;
}

瞭解 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

發布主題

如何在線上入口網站上發布您已新增的主題和樣式自訂項目：

  1. 在頂端導覽選單的下拉式選單中選取「主題」。
  2. 按一下「發布」。

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