連結共用 | Adobe Experience Manager

連結共用工具由添加到「社交共用」面板的按鈕和激活工具時顯示的模式對話框組成。按鈕的位置完全由社交共用工具管理。

連結共用按鈕的外觀由以下CSS類選擇器控制：

.s7videoviewer .s7linkshare

連結共用工具的CSS屬性

width	按鈕寬度。
height	按鈕高度。
背景影像	為給定按鈕狀態顯示的影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

可以通過設定來從「社交共用」面板中刪除按鈕 display:none CSS類上的CSS屬性。

按鈕工具提示可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 設定28 x 28像素的連結共用按鈕，並為四個不同按鈕狀態中的每個狀態顯示不同的影像：

.s7videoviewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7videoviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7videoviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7videoviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7videoviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}

當對話框處於活動狀態時覆蓋網頁的背景覆蓋層由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7backoverlay

背景覆蓋的CSS屬性

不透明度	背景覆蓋不透明度。
背景色	背景覆蓋顏色。

示例 — 要設定背景覆蓋，使其為灰色且不透明度為70%:

.s7videoviewer .s7linkdialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

預設情況下，模式對話框會以案頭系統螢幕的中心顯示，並在觸摸設備上獲取整個網頁區域。在所有情況下，對話框的定位和大小由元件管理。對話框由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialog

對話框的CSS屬性

邊界半徑	對話框邊框半徑，以防對話框不佔用整個瀏覽器。
背景色	對話框背景顏色。
寬度	應取消設定，或設定為100%，在這種情況下，對話框將佔據整個瀏覽器窗口（此模式在觸摸設備上是首選模式）。
高度	應取消設定，或設定為100%，在這種情況下，對話框將佔據整個瀏覽器窗口（此模式在觸摸設備上是首選模式）。

示例 — 要設定對話框以使用整個瀏覽器窗口並在觸摸設備上具有白色背景：

.s7videoviewer .s7touchinput .s7linkdialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

對話框標題由表徵圖、標題文本和關閉按鈕組成。集箱容器由

.s7videoviewer .s7linkdialog .s7dialogheader

對話框標題的CSS屬性

填補

標題內容的內填充。

表徵圖和標題文本被包裝到由

.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline

對話框行的CSS屬性

填補	標題表徵圖和標題的內填充

標題表徵圖由以下CSS類選擇器控制

.s7videoviewer .s7linkdialog .s7dialogheadericon

對話框標題表徵圖的CSS屬性

寬度	表徵圖寬度。
高度	表徵圖高度。
背景影像	表徵圖影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

標題由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialogheadertext

對話框標題文本的CSS屬性

字型粗細	字型粗細。
字型大小	字型高度。
字型系列	字型系列。
填補	內部文本填充。

關閉按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7closebutton

關閉按鈕的CSS屬性

頂部	垂直按鈕相對於標題容器的位置。
右側	水準按鈕相對於標題容器的位置。
寬度	按鈕寬度。
高度	按鈕高度。
填補	按鈕的內填充。
背景影像	每個狀態的按鈕影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

「關閉」(Close)按鈕工具提示和對話框標題可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 設定帶填充、22 x 12像素表徵圖和粗體16點標題的對話框標題。最後，一個28 x 28像素的「關閉」按鈕，它位於對話框容器頂部的兩個像素和右側的兩個像素：

.s7videoviewer .s7linkdialog .s7dialogheader {
 padding: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7videoviewer .s7linkdialog .s7dialogheadericon {
    background-image: url("images/sdk/dlglink_cap.png");
    height: 12px;
    width: 22px;
}
.s7videoviewer .s7linkdialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7videoviewer .s7linkdialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7videoviewer .s7linkdialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7linkdialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

對話框頁腳由「取消」按鈕組成。頁腳容器由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialogfooter

對話框頁腳的CSS屬性

border

可用於將頁腳與對話框其餘部分視覺分離的邊框。

頁腳具有保持按鈕的內部容器。它由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer

對話框按鈕容器的CSS屬性

填補	頁腳和按鈕之間的內填充。

「全選」按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialogactionbutton

該按鈕僅在案頭系統上可用。

「全選」按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
color	每個狀態的按鈕文本顏色。
背景色	每個狀態的按鈕背景顏色。

注意

「全選」按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

「取消」按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialogcancelbutton

「取消」對話框的CSS屬性按鈕

寬度	按鈕寬度。
高度	按鈕高度。
顏色	每個狀態的按鈕文本顏色。
背景色	每個狀態的按鈕背景顏色。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

此外，兩個按鈕共用公用CSS類，這些類可包含其他對話框按鈕相同的CSS設定：

.s7videoviewer .s7linkdialog .s7dialogfooter .s7button

按鈕的CSS屬性

字型粗細	按鈕字型粗細。
字型大小	按鈕字型大小。
字型系列	按鈕字型系列。
線高	按鈕內的文本高度。影響垂直對齊。
框陰影	投影。
邊距右	右按鈕邊距。

按鈕工具提示可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 要設定一個對話框頁腳，其中按64 x 34取消按鈕，每個按鈕狀態的文本顏色和背景顏色不同：

.s7videoviewer .s7linkdialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7videoviewer .s7linkdialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7videoviewer .s7linkdialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

主對話框區域（頁眉和頁腳之間）包含對話框內容。在所有情況下，元件都會管理此區域的寬度 — 無法在CSS中設定它。主對話框區域由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialogviewarea

對話框查看區域的CSS屬性

高度	主對話框區域的高度。只有在對話框在案頭模式下工作時才應指定該對話框。當對話框的大小為佔用整個瀏覽器窗口時，它不適用。
背景色	主對話框區域的背景顏色。
margin	外邊距。

示例 — 要將主對話框區域設定為300像素高度、具有10像素邊距並使用白色背景：

.s7videoviewer .s7linkdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

所有表單內容（如標籤和輸入欄位）都駐留在由

.s7videoviewer .s7linkdialog .s7dialogbody

對話框主體的CSS屬性

填補

內填充。

示例 — 要將表單內容設定為具有十個像素填充：

.s7videoviewer .s7linkdialog .s7dialogbody {
    padding: 10px;
}

對話框窗體中的所有靜態標籤都由

.s7videoviewer .s7linkdialog .s7dialoglabel

此類不適於控制標籤大小或位置，因為您可以將其應用於表單用戶介面不同位置的文本。

對話框標籤的CSS屬性。 

字型粗細	標籤字型粗細。
字型大小	標籤字型大小。
字型系列	標籤字型系列。
顏色	標籤文本顏色。

對話框標籤可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 將所有標籤設定為灰色，用9像素字型加粗：

.s7videoviewer .s7linkdialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

連結頂部顯示的文本副本的大小由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialoginputwide

對話框輸入範圍欄位的CSS屬性

寬度	文本寬度。
填補	內填充。

示例 — 將文本副本設定為寬430像素，並在底部填充10像素：

.s7videoviewer .s7linkdialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

共用連結包裝在容器中，並使用以下CSS類選擇器進行控制：

.s7videoviewer .s7linkdialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

邊界	在共用連結容器周圍邊框。
填補	內填充。

示例 — 要在嵌入代碼文本週圍設定一個像素灰度邊框，並且有九個像素填充：

.s7videoviewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

共用連結本身由以下CSS類選擇器控制：

.s7videoviewer .s7linkdialog .s7dialoglink

對話框的CSS屬性共用連結

寬度

共用連結寬度。

示例 — 將共用連結設定為450像素寬：

.s7videoviewer .s7linkdialog .s7dialoglink {
    width: 450px;
}

adobe.com 上的資源

Multichannel Communication Responsive Forms Managed Cloud Version History Web Content Management Digital Asset Management

全新的改善搜尋

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe