自訂主題 (原始版本)

您目前查看的是 Apigee Edge 說明文件。
前往 Apigee X 說明文件。 info

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

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

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

存取主題編輯器

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

主題編輯器

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

新增自訂樣式

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

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

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

使用貴公司的標誌自訂「Your Logo」圖片，然後上傳標誌，並使用相同名稱和相對檔案大小，在檔案管理員中取代下列圖片檔案：

  • 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. 按一下「發布」。

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