自訂 CSS 及影像
您可以自訂 Connections Engagement Center 的幾乎每個可見元素的外觀。請包含自己的 CSS 或建立自訂 CSS 檔案。然後將樣式表上傳至 Connections Engagement Center 設定標籤。本主題說明如何將自訂 CSS 套用至使用者介面元素並包含範例 CSS。
包含自訂 CSS 及影像
確保沒有使用現有檔名,因為上傳的檔案會改寫舊版本,而沒有進一步詢問。透過相同上傳表單,可上傳 CSS 所要求的影像(如 *.jpg、*.png)。
上傳 CSS 之後,您即可在頁面設定標籤的佈置選取器下,為現行頁面選取已上傳的樣式表檔案。若要編輯多個頁面,您可以移至頁面管理標籤並編輯頁面。按一下扳手圖示,即會開啟一個對話框,讓您為每個頁面指定 CSS。
建立自訂 CSS
本文件中提供的指示要求您具有基本 CSS 知識。在 http://www.w3schools.com/css/ 上,可以找到免費的 CSS 線上手冊。
您可以自訂 Connections Engagement Center 的幾乎每個可見元素的外觀。CSS 語言取決於順序及特殊性。若要偵測在變更屬性(顏色、大小等)時必須使用的選取器,建議您使用 Google Chrome 的開發人員工具 (https://developer.chrome.com/devtools),或 Mozilla Firefox 的開發人員工具列 (https://developer.mozilla.org/docs/Tools)。
您自訂的 CSS 將會最後載入。因此,如果使用的選取器與套用的選取器相同,則應變更元素的外觀。如果未這樣做,甚至是增強的特殊性也不會導致預期的行為,則 important 關鍵字會授權您存取該屬性。
已上傳的影像與 CSS 位於相同資料夾中。無需指定路徑。
適用於所有頁面的 CSS
如果僅使用一個 Connections Engagement Center 頁面,或是希望所有 Connections Engagement Center 頁面的行為及外觀皆相同,建議您使用 CSS 選取器並從 .xccstyle 主體類別開始。
.xccstyle {
background-color: #f00;
}
依頁面 ID 的 CSS
透過 .{page-id} 主體類別,您可以設定樣式,專門套用至具有此頁面 ID 的 Connections Engagement Center 頁面。如此一來,即可避免為您希望與標準外觀不同的每個 Connections Engagement Center 頁面上傳 CSS 檔案。
.my-special-page {
background-color: #0f0;
}
依網格佈置的 CSS
如果希望頁面的行為因所選網格佈置而異,建議您依 CSS 中的 .Layout{#} 主體類別進行選取。
.Layout17 {
background-color: #00f;
}
小組件的 CSS
<div class=”widget” position=”{grid-positon}”>
<div class=”xccWidget” data-wtype=”{widget-type}”>
<div class=”wheader”>
<div class=”wtitle”>
<!-- Title here --!>
</div>
</div>
<div class=”wbody”>
<div class=”{widget-type}”>
<!-- Content here --!>
</div>
</div>
</div>
</div>
- 特定類型專用:可將樣式套用至特定的小組件類型(例如熱門新聞小組件)。建議您使用 data-wtype 屬性中的屬性選取器,因為它容許您自訂小組件的標頭/標題及主體,而 .{widget-type} 類別僅限於主體。例如,下列是所有熱門新聞小組件的標題的紅色字型:
.xccstyle .xccWidget[data-wtype=“xccTopNews“] .wheader .wtitle { color: #f00; }
- 特定位置專用:透過參照 position 屬性,您可以為放置在特定網格位置的小組件設定樣式。左上網格位置一律為 position="0"。例如,下列是網格位置 0 上小組件標題的紅色字型的程式碼:
.xccstyle [position=”0”] .xccWidget .wheader .wtitle { color: #f00; }