自訂 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 的綠色背景範例：

.my-special-page {
	background-color: #0f0;
}

依網格佈置的 CSS

如果希望頁面的行為因所選網格佈置而異，建議您依 CSS 中的 .Layout{#} 主體類別進行選取。

為網格佈置 17 中的所有頁面設定藍色背景的範例：

.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>

通常，可透過數個類別來自訂小組件。Connections Engagement Center 小組件具有標準結構。如果要自訂小組件的整體外觀，請使用類似於 .xccstyle .xccwidget .wheader .wtitle 的 CSS 選取器。

特定類型專用：可將樣式套用至特定的小組件類型（例如熱門新聞小組件）。建議您使用 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;
}
```