連結共用

連結分享工具包含新增至Social分享面板的按鈕，以及啟動工具時顯示的強制回應對話方塊。 按鈕的位置由Social分享工具完全管理。

連結共用按鈕的外觀由下列CSS類別選取器控制：

.s7ecatalogviewer .s7linkshare

連結共用工具的CSS屬性

您可以透過設定 display:none 其CSS類上的CSS屬性。

按鈕工具提示可以本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

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

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

當對話方塊作用中時，會覆蓋網頁的背景覆蓋圖會由下列CSS類別選取器控制：

.s7ecatalogviewer .s7linkdialog .s7backoverlay

背景覆蓋的CSS屬性

範例 — 若要將背景覆蓋設定為灰色且不透明度為70%:

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

依預設，強制回應對話方塊會顯示在案頭系統的畫面中央，並在觸控裝置上取用整個網頁區域。 在所有情況下，對話框的定位和大小由元件管理。 使用以下CSS類選擇器控制該對話框：

.s7ecatalogviewer .s7linkdialog .s7dialog

對話框的CSS屬性

範例 — 若要設定對話方塊以使用整個瀏覽器視窗，且在觸控裝置上具有白色背景：

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogheader

對話框標題的CSS屬性

圖示和標題文字會包裝在由

.s7ecatalogviewer .s7linkdialog .s7dialogheader .s7dialogline

對話框行的CSS屬性

使用下列CSS類選擇器控制標題表徵圖

.s7ecatalogviewer .s7linkdialog .s7dialogheadericon

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

使用下列CSS類選擇器控制標題：

.s7ecatalogviewer .s7linkdialog .s7dialogheadertext

對話框標題文本的CSS屬性

使用下列CSS類選擇器控制關閉按鈕：

.s7ecatalogviewer .s7linkdialog .s7closebutton

關閉按鈕的CSS屬性

「關閉」按鈕工具提示和對話框標題可以本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

範例 — 若要設定對話方塊標題，使用邊框間距、22 x 12像素圖示和粗體16點標題。 最後，28 x 28像素的「關閉」按鈕，從頂部放置兩個像素，從對話框容器的右側放置兩個像素：

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

對話框頁尾由「取消」按鈕組成。 頁尾容器可透過下列CSS類別選取器控制：

.s7ecatalogviewer .s7linkdialog .s7dialogfooter

對話框頁尾的CSS屬性

頁腳具有保持按鈕的內容器。 它由下列CSS類別選取器控制：

.s7ecatalogviewer .s7linkdialog .s7dialogbuttoncontainer

對話框按鈕容器的CSS屬性

使用以下CSS類選擇器控制「全部選擇」按鈕：

.s7ecatalogviewer .s7linkdialog .s7dialogactionbutton

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

「全部選擇」按鈕的CSS屬性

使用下列CSS類選擇器控制取消按鈕：

.s7ecatalogviewer .s7linkdialog .s7dialogcancelbutton

對話框取消按鈕的CSS屬性

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

.s7ecatalogviewer .s7linkdialog .s7dialogfooter .s7button

按鈕的CSS屬性

按鈕工具提示可翻譯。 請參閱 用戶介面元素本地化 以取得更多資訊。

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

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

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

.s7ecatalogviewer .s7linkdialog .s7dialogviewarea

對話框查看區域的CSS屬性

範例：若要將主對話方塊區域設定為300像素高、有10個像素邊界，並使用白色背景：

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

所有表單內容（如標籤和輸入欄位）都駐留在由以下CSS類選擇器控制的容器內：

.s7ecatalogviewer .s7linkdialog .s7dialogbody

對話框主體的CSS屬性

範例：若要設定表單內容，應有十個像素邊框間距：

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

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

.s7ecatalogviewer .s7linkdialog .s7dialoglabel

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

對話框標籤的CSS屬性。 ​

對話方塊標籤可以翻譯。 請參閱 用戶介面元素本地化 以取得更多資訊。

範例：若要將所有標籤設為灰色、粗體和九像素字型：

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

使用下列CSS類別選取器來控制顯示在連結頂端的文字副本大小：

.s7ecatalogviewer .s7linkdialog .s7dialoginputwide

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

範例：若要將文字副本設定為430像素寬，且底部有10個像素邊框：

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

共用連結會包裝在容器中，並透過下列CSS類別選取器加以控制：

.s7ecatalogviewer .s7linkdialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

範例：若要在內嵌程式碼文字周圍設定一個像素灰色邊框，並有九個像素的邊框間距：

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

共用連結本身由下列CSS類別選取器控制：

.s7ecatalogviewer .s7linkdialog .s7dialoglink

對話框的CSS屬性共用連結

範例：若要將共用連結設為450像素寬：

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

Business.Adobe.com 資源

Cms Cloud Embedded Charts Mobile Forms Managed Cloud Digital Rights Management Headless Cms