元件特定樣式設定

影像元件

「影像」元件具有 scs-component-content 類別的下列 CSS 類別結構：

scs-image-container
scs-image-link
scs-image-image
scs-image-caption

scs-image-image 類別會套用至 <img> 標記本身。scs-image-caption 類別則用於設定說明文字的樣式 (若有說明文字時)。

影像有附加的連結時，才會顯示 scs-image-link 類別。此類別和 scs-image-container 類別通常都不需要自訂樣式。

影像說明文字預設會以橫跨影像底部的半透明浮動層方式呈現。

.scs-image .scs-image-caption {
 position: absolute;
 left: 0px;
 bottom: 0px;
 right: 0px;
 background-color: rgba(0, 0, 0, 0.54);
 padding: 0.5em;
 color: #FFFFFF;
}

若要將說明文字放在影像頂端及變更色彩，需要在 design.json 檔案中為影像元件新增額外樣式，然後在 design.css 檔案中定義它的 CSS。

.scs-image-style-17 .scs-image-caption {
 position: absolute;
 top: 0px;
 height: 35px;
 font-weight: bold;
 background-color: rgba(122, 213, 256, 0.54);
 color: #515151;
}

按鈕元件

「按鈕」元件的類別結構如下：

scs-button-button
    scs-button-text

scs-button-button 類別是可點選的 <div>，其樣式與按鈕相似。scs-button-text 類別可用於設定按鈕內的文字樣式。

例如，可在 design.json 檔案中為按鈕元件新增額外樣式以測試其外觀與感覺的變更，然後在 design.css 檔案中定義它的 CSS。

.design-style .scs-button-button {
 background-image: linear-gradient(
  to top, #E3E7E9 0%, #E7EBED 50%, #F1F3F3 100%);
 border: 1px solid #c4ced7;
 color: #000000;
}

.design-style .scs-button-button:hover {
background: #f7f8f9;
border: 1px solid #c4ced7;
 color: #0572ce;
}

.design-style .scs-button-button:active {
background: #0572ce;
border: 1px solid #0572ce;
color: #ffffff;
}

.scs-button-style-4 .scs-button-button {
 background-image: radial-gradient(
  red, yellow, green
 );
border: 1px solid #c4ced7;
color: #000000;
}

.scs-button-style-4 .scs-button-button:hover {
 background: #f7f8f9;
 border: 1px solid #c4ced7;
 color: #0572ce;
}

.scs-button-style-4 .scs-button-button:active {
 background: #0572ce;
 border: 1px solid #0572ce;
 color: #ffffff;
}

文件

「文件」元件的類別結構如下：

scs-document-container
 scs-document-cap
  scs-document-title
  scs-document-desc

scs-document-container 類別會讓文件檢視器自動換行，通常不需設定樣式。

圖庫

「圖庫」元件具有包含基礎 JSSOR 滑桿元件的單一類別：

scs-gallery-container 

JSSOR 滑桿使用數個也可用於設定樣式的類別：

jssorb14 (navigator)
jssora02l (left arrow)
jssora02r (right arrow)
jssort07 (thumbnails)

圖庫格線

「圖庫格線」元件的類別取決於設定值面板中所選取的版面配置和剪裁：

scs-gallerygrid-container scs-gallerygrid-layout
  scs-gallerygrid-cell
    scs-image (multiple)

根據為「圖庫格線」所選之剪裁和版面配置的不同，layout 的值將會是 stretch、crop、fit 或 flowing。

「欄」版面配置才會顯示 scs-gallerygrid-cell 類別。

社群列

「社群列」元件的類別結構如下：

scs-socialbar-container
  scs-socialbar-icon

scs-socialbar-icon 類別會套用至社群列的每個 <img> 標記。

段落

「段落」元件只有包含實際段落文字的單一類別：

scs-paragraph-text 

例如，若要讓在「段落」元件提供的文字具有金屬雕刻文字效果，請在 design.json 檔案中新增額外的樣式類別，然後在 design.css 檔案中定義它的 CSS。

.scs-paragraph-style-7 {
 font-size: 24px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: 700;
 padding: .3em;
 color: #000000;
 background: #666666;
 text-shadow: 0px 1px 1px #ffffff;
}

或者若想要花俏一點，可以像下一個範例這樣。

.scs-paragraph-style-8 {
 padding: 20px;
 margin: 10px;
 background: #ff0030;
 color: #fff;
 font-size: 21px;
 font-weight: bold;
 line-height: 1.3em;
 border: 2px dashed #fff;
 border-radius: 10px;
 box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
 text-shadow: -1px -1px #aa3030;
 font-weight: normal;
}

標題

「標題」元件也是只有包含實際文字的單一類別：

scs-title-text 

地圖

「地圖」元件具有包含地圖呈現的單一類別：

scs-map-content

此類別通常不需設定樣式。

自訂本機元件

「自訂本機元件」只有包含實際元件的單一類別：

scs-custom-component-wrapper 

您可以完全控制用於呈現自訂本機元件之自訂檢視所需的 CSS 樣式。本機元件會以內嵌方式呈現，也就是說您可以直接套用主題或 design.css 檔案中定義的 CSS 樣式。

自訂遠端元件

「自訂遠端元件」只有包含其 iframe 的單一類別：

scs-app-iframe-wrapper

除了套用自訂遠端元件中定義的 CSS 樣式之外，您也可以利用 Sites SDK 從主機網站擷取 design.css 檔案。

// fetch current theme design from host site and then add it to the page
SitesSDK.getSiteProperty('theme',function(data){
 // check if we got a url back
 if ( data.url && typeof data.url === 'string' ) {
  if ( data.url !== '') {
   // theme is loaded, so dynamically inject theme
   SitesSDK.Utils.addSiteThemeDesign(data.url);
  }
 }
});

因此，您可以讓元件沿用主機樣式的樣式設定。

分隔線

「分隔線」元件雖然沒有元件特定類別，但是 <hr> 標記本身是可以設定樣式的。

例如，可以建立虛線分隔線：

.design-style .scs-divider hr {
border-top: 1px dotted #333333;
}

視訊、YouTube、空白間隔

視訊、YouTube 或空白間隔元件沒有元件特定類別。